ArcGis for javascript 绘制线！！！

效果图

在线预览

前言

项目中需要使用 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，前者可以定义街道地图、卫星图、地形图等，后者则可以给地图绘制一些标记（线、点等） 。
源码地址

参考

• ArcGis 官方绘制点、线、面的 Demo

• ArcGis javascript api 总览