效果图
前言
项目中需要使用 ArcGis 来实现地图功能，至于为什么不适用百度、高德，是因为据说 ArcGis 定位会准一点。初次接触 Arcgis for javascript，踩坑之路很舒服，写下来记录下，也希望能够帮到需要的人。
安装
yarn add esri-loader
或者引入官方的资源快速上手
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
html
<template>
<div id="map" :style="mapLayout"></div>
</template>
js
import {
loadModules } from 'esri-loader'
import {
mapState } from 'vuex'
export default {
name: 'PolylineMap',
data () {
return {
view: null
}
},
computed: {
...mapState({
mapLayout: state => {
return {
width: '100%',
height: state.layoutHeight - 48 + 'px'
}
}
})
},
mounted () {
loadModules(['esri/Map', 'esri/views/MapView', 'esri/Graphic'], {
css: true })
.then(([ArcGISMap, MapView, Graphic]) => {
// 配置地图的底图
const map = new ArcGISMap({
// 地图ID
basemap: 'osm'
})
// 地图视图对象
this.view = new MapView({
// 容器
container: document.getElementById('map'),
// 中心点
center: [117.179359, 31.839979],
map: map,
// 缩放
zoom: 14
})
// 创建线几何
const polyline = {
type: 'polyline',
// 二维数组，每个元素是一个地点的经纬度，点越多路线越精准
paths: [
[117.129359, 31.839979],
[117.128810, 31.839979],
[117.128810, 31.832240],
[117.227610, 31.833600]
]
}
// 路径的属性定制
const lineSymbol = {
type: 'simple-line', // 类型
color: '#1e80ff', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制
width: 3 // 宽度 px
}
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
})
// 创建线几何2
const polyline2 = {
type: 'polyline',
// 二维数组，每个元素是一个地点的经纬度，点越多路线越精准
paths: [
[117.119359, 31.849979],
[117.118810, 31.849979],
[117.118810, 31.842240],
[117.217610, 31.843600]
]
}
// 路径的属性定制
const lineSymbol2 = {
type: 'simple-line', // 类型
color: '#8c3de5', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制
width: 3 // 宽度 px
}
const polylineGraphic2 = new Graphic({
geometry: polyline2,
symbol: lineSymbol2
})
// 将图形添加到视图的图形层
this.view.graphics.addMany([polylineGraphic, polylineGraphic2])
})
},
beforeDestroy () {
this.view = null
}
}
实现原理
代码实现了最简单的功能，注释写的挺详细。需要了解一些 ArcGis js 的一些基本概念：底图 和 Graphic，前者可以定义街道地图、卫星图、地形图等，后者则可以给地图绘制一些标记（线、点等） 。
源码地址