ArcGIS Vue By Webpack 创建地图

如何使用 webpack 创建一个最基础的 ArcGIS 地图

效果

以下是 package.json 中需要的依赖

 

    "devDependencies": {
        ...
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        ...
        "esri-loader": "^2.11.0",
        "vue": "^2.6.10"
    }

下面是 app.vue

<template>
    <div id="map"></div>
</template>
<style scoped>
    #map{
        width:100%;
        height:300px;
    }
</style>
<script>
import { loadModules } from 'esri-loader';
export default{
    mounted(){

        // 懒加载模块
        loadModules([
	    	'esri/layers/WebTileLayer',
            'esri/Map',
            'esri/views/SceneView',
    	], { css: true })
	    .then(([WebTileLayer,Map,SceneView]) => {

	    	let map = new Map();

            // 使用谷歌地图切片
	    	let tiled_layer = new WebTileLayer({
				urlTemplate: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{level}!2i{col}!3i{row}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
			});
			map.add(tiled_layer);

            // 创建 view
	        let map_view = new SceneView({
	        	map:map,
	        	container:"map",          
		        scale:110329633.40563367, 
		        center:[105.578034,34.062071]
	        });

	    });
    }
}
</script>

这个例子完全就是文档里面的例子。

仔细阅读文档可以解决 99% 的问题。