正文
首先和传统的开发一样我们需要引入他的js文件和css文件,但是因为我们是用vue来开发,所以传统的通过标签的方式来引入的方法不适用了,arcgis官网给我提供了一个工具"esriLoader",这是他的npm地址esri-loader。
Install
npm install --save esri-loader
引入之后在组件里面定义一个地图的容器,这里可以使用id或者vue的ref来绑定。下面我把这个组件的代码贴出来。
<template>
<div class="wrapper">
<div ref="map" class="map"></div>
</div>
</template>
<script>
import Vue from 'vue'
import esriLoader from "esri-loader";
export default {
name: "",
components: {},
props: {},
data() {
return {};
},
created() {},
mounted() {
const options = { url: "https://js.arcgis.com/3.27/" };
esriLoader
.loadModules(
[
"esri/map"
],
options
)
.then(
([
Map
]) => {
let map = new Map(this.$refs.map, {
backgroundColor: "#eee",
basemap: 'streets',
logo: false,
slider: false,
zoom: 7,
minZoom: 7
});
Vue.prototype.$map = map;
}
);
},
computed: {},
methods: {}
};
</script>
<style scoped>
@import url('https://js.arcgis.com/3.27/esri/css/esri.css');
.map {
width: 100%;
height: 100vh;
}
</style>
需要注意的就是引入arcgis api的js之后还需要在css里面引入他的样式文件。 这里我们加载的底图是arcgis自带的底图,如果需要加载天地图或者自己发布的底图的话,这里就不用设置basemap,通过加载一个底图服务它会自己把它作为底图。具体的加载方法我会在下一篇文章给大家展示。
下面这张图就是我们加载的'streets'底图。