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 總覽