由于目前最新版本是4.22, 所以就在vue2项目中以4.22版本为例创建一个最简单的地图
1.首先给一个div来装载地图，并且给这个div设置你所需要占的位置。
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: "App",
components: {},
mounted() {
this._createMapView();
},
methods: {
};
</script>
<style>
body {
margin: 0; /**主要是去除谷歌浏览器默认的8像素的外边距 */
}
#app {
position: absolute; /**使这个div的大小撑满整个屏幕 */
width: 100%;
height: 100%;
}
</style>
- 下载esri-loader这个包
npm i esri-load
- 引入这个包中的 loadMoudles
import { loadModules } from "esri-loader";
- 把创建地图封装在一个方法里面，并且在mounted钩子函数里调用
<template>
<div id="app">
</div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
name: "App",
components: {},
mounted() {
this._createMapView();
},
methods: {
//创建地图
_createMapView: function () {
const _self = this; //定义一个_self防止后续操作中this丢失
const option = {
//定义一个包含有JS API中js开发包和css样式文件的对象
url: "https://js.arcgis.com/4.22/",
css: "https://js.arcgis.com/4.22/esri/themes/light/main.css",
};
//通过loadModules来做衔接
loadModules(["esri/Map", "esri/views/SceneView"], option)
.then(([Map, SceneView]) => {
//业务代码在此处编写
const map = new Map({
//实例化地图
basemap: "streets-vector", // 更换底图
});
const view = new SceneView({
//实例化地图视图
container: "app", // 视图的容器
map: map, // Map的实例放入视图中
zoom: 11, // 当前地图缩放等级
center: [114.31, 30.52], // 初始显示的地图中心点，经纬度
});
view.ui.components = []; // 清除掉地图左上角默认的缩放图标
})
.catch((err) => {
_self.$message('地图创建失败' + err)
});
},
},
};
</script>
<style>
body {
margin: 0; /**主要是去除谷歌浏览器默认的8像素的外边距 */
}
#app {
position: absolute; /**使这个div的大小撑满整个屏幕 */
width: 100%;
height: 100%;
}
</style>
