Vue(四)基于vue/cli4.x搭建的vue项目引入arcgis api for js 4.x

使用vue create B创建项目工程之后,cd进去输入:npm install --save esri-loader即可
那么在搭建完之后如何使用呢?
在项目中的任意一个vue文件中输入如下代码:

<script>
import HelloWorld from './components/HelloWorld.vue';
import {
    
     loadModules } from 'esri-loader';

export default {
    
    
	name: 'App',
	components: {
    
    
		HelloWorld
	},
	mounted() {
    
    
		// lazy load the required ArcGIS API for JavaScript modules and CSS
		loadModules(['esri/Map', 'esri/views/MapView'], {
    
     css: true }).then(([ArcGISMap, MapView]) => {
    
    
			const map = new ArcGISMap({
    
    
				basemap: 'topo-vector'
			});

			this.view = new MapView({
    
    
				container: this.$el,
				map: map,
				center: [-118, 34],
				zoom: 8
			});
		});
	},
	beforeDestroy() {
    
    
		if (this.view) {
    
    
			// destroy the map view
			this.view.container = null;
		}
	}
};
</script>

结果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u014752033/article/details/107941737
今日推荐