Preview

包含繪制的一些基本功能，點線面的繪制，坐標、距離、面積的測量，繪制緩沖區做空間統計功能，點擊當前標注可以洗掉，

功能統一封裝

DrawingGraphics.js

import {
    MessageBox
} from 'element-ui' // 做文字標繪

let DrawGraphicsLayer = null // 繪制圖形圖層
let DrawLayer = null // 繪制圖層
let drawingOption = {} // 繪制配置，根據配置可實作空間統計、空間測量、標繪等功能

/**
 * @name: 坐標測量
 * @msg: 顯示點擊位置的坐標資訊
 * @param {event}
 */
function coordinateMeasuring(event) {
    const content = '<div><p>經度：' + event.geometry.x.toFixed(6) + '</p><p>緯度：' + event.geometry.y.toFixed(6) + '</p></div>'
    this.map.infoWindow.resize(200, 100)
    this.map.infoWindow.setTitle('坐標資訊')
    this.map.infoWindow.setContent(content)
    this.map.infoWindow.show(event.geometry)
    this.map.infoWindow.on('hide', () => {})
}

/**
 * @name: 設定圖片標注
 */
function setPictureMarkerSymbol() {
    return {
        url: require('@/assets/images/ico01.png'),
        height: 20,
        width: 20,
        type: 'esriPMS',
        angle: 0,
    }
}

/**
 * @name: 設定標注顏色
 */
function setSymbolColor(type) {
    if (type === 'fill') {
        // 圖形填充顏色
        return new this.gisConstructor.Color([255, 0, 0, 0.25])
    } else if (type === 'line') {
        // 線條顏色
        return new this.gisConstructor.Color([255, 0, 0, 0.8])
    } else {
        return new this.gisConstructor.Color([255, 0, 0, 0.8])
    }
}

/**
 * @name: 設定線標注樣式
 */
function setLineSymbolStyle() {
    return {
        color: setSymbolColor.call(this, 'line'),
        width: 2,
    }
}

/**
 * @name: 設定文字標注樣式
 * @param {text} String
 */
function setTextSymbolStyle(text) {
    let _this = this
    return {
        text: text,
        color: [255, 0, 0],
        font: new _this.gisConstructor.Font({
            family: 'microsoft Yahei',
            size: 8,
            style: 'normal',
            weight: 'bold',
        }),
        haloColor: [255, 255, 255],
        haloSize: 2, // haloColor 和 haloSize 需要 arcgis 3.15 版本及以上
        horizontalAlignment: 'center', // 文本對齊方式 "left" | "right" | "center" | "justify"
        xoffset: 0,
        yoffset: 0,
    }
}

/**
 * @name: 根據 id 清除圖形
 * @msg: 點擊當前標注可以洗掉
 * @param {ID}
 */
function clearCurrentMarker(ID) {
    const graphicsArr = DrawGraphicsLayer.graphics
    for (let i = graphicsArr.length - 1; i >= 0; i--) {
        if (
            graphicsArr[i].attributes.id && graphicsArr[i].attributes.id === ID
        ) {
            DrawGraphicsLayer.remove(graphicsArr[i])
        }
    }
}

/**
 * @name: 地圖點擊
 * @param {event}
 */
function mapHandleClick(event) {
    if (event.graphic && event.graphic.attributes) {
        let attributes = event.graphic.attributes
        clearCurrentMarker(attributes.id)
    }
}

/**
 * @name: 查詢緩沖區范圍內的資料
 * @param {geometry} 幾何圖形
 */
function doQueryBuffer(geometry) {
    let queryUrl = drawingOption.StatisticalServerURL || ''
    let query = new this.gisConstructor.query()
    query.geometry = geometry
    query.outFields = ['*']
    query.returnGeometry = true
    var queryTask = new this.gisConstructor.QueryTask(queryUrl)
    queryTask.execute(
        query,
        (featureSet) => {
            console.log(featureSet)
        },
        (error) => {
            console.log(error)
        }
    )
}

/**
 * @name: 繪制圖形
 * @param {event}
 */
function drawGraphic(event) {
    let _this = this
    let symbol = ''
    let _type = event.geometry.type
    let resultSymbol = '' // 繪制的完整圖形
    let symbolID = 'symbolMarker' + new Date().getTime() // 用于洗掉當前標注

    if (drawingOption.name === '標繪') {
        if (_type === 'point' && drawingOption.text === false) {
            resultSymbol = new this.gisConstructor.PictureMarkerSymbol(setPictureMarkerSymbol.call(this))
            DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID,
                    name: '圖形標注'
                }
            ))
        } else if (_type === 'point' && drawingOption.text === true) {
            // 文字標繪
            MessageBox.prompt('', '請輸入文字', {
                confirmButtonText: '確定',
                cancelButtonText: '取消'
            }).then(
                ({
                    value
                }) => {
                    if (value !== '') {
                        resultSymbol = new this.gisConstructor.TextSymbol(setTextSymbolStyle.call(this, value))
                        DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                            event.geometry,
                            resultSymbol, {
                                id: symbolID,
                                name: '圖形標注'
                            }
                        ))
                    }
                }
            ).catch(error => {
                console.log(error)
            })
        } else if (_type === 'polyline') {
            resultSymbol = new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this))
            console.log(event.geometry)
            console.log(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID,
                    name: '圖形標注'
                }
            ))
            DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID,
                    name: '圖形標注'
                }
            ))
        } else if (_type === 'polygon') {
            // 添加繪制好的面圖形
            resultSymbol = new this.gisConstructor.SimpleFillSymbol(
                this.gisConstructor.SimpleFillSymbol.STYLE_SOLID,
                new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this)),
                setSymbolColor.call(this, 'fill'),
            )
            DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID, // 洗掉功能
                    name: '圖形標注'
                }
            ))
        }
    }
    if (drawingOption.name === '空間測量') {
        if (_type === 'point') {
            // infoWindow 顯示坐標資訊
            coordinateMeasuring.call(this, event)
        } else if (_type === 'polyline') {
            resultSymbol = new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this))
            DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID,
                    name: '圖形標注'
                }
            ))

            // 測量距離
            const lengthParams = new _this.gisConstructor.LengthsParameters()
            const geometryService = new _this.gisConstructor.GeometryService(
                drawingOption.GeometryServerURL
            )
            lengthParams.distanceUnit = _this.gisConstructor.GeometryService.UNIT_KILOMETER
            lengthParams.calculationType = 'preserveShape'
            const polyline = new _this.gisConstructor.Polyline(
                _this.map.spatialReference
            )
            const paths = event.geometry.paths[0]
            polyline.addPath(paths)
            lengthParams.polylines = [polyline]
            // 根據引數，動態計算長度
            geometryService.lengths(lengthParams, (length) => {
                let distance = _this.gisConstructor.number.format(length.lengths[0])
                // 設距離顯示樣式，并添加到地圖上
                let text = '總長度:' + distance + '米'
                const distanceSymbol = new _this.gisConstructor.TextSymbol(setTextSymbolStyle.call(this, text))
                const distanceCenterPoint = event.geometry.getExtent().getCenter()
                const distancePoint = new _this.gisConstructor.Point(distanceCenterPoint, _this.map.spatialReference)
                const distanceGraphic = new _this.gisConstructor.graphic(
                    distancePoint,
                    distanceSymbol, {
                        id: symbolID, // 洗掉功能
                        name: '圖形標注'
                    }
                )
                DrawGraphicsLayer.add(distanceGraphic)
            })
        } else if (_type === 'polygon') {
            // 添加繪制好的面圖形
            resultSymbol = new this.gisConstructor.SimpleFillSymbol(
                this.gisConstructor.SimpleFillSymbol.STYLE_SOLID,
                new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this)),
                setSymbolColor.call(this, 'fill'),
            )
            DrawGraphicsLayer.add(new this.gisConstructor.graphic(
                event.geometry,
                resultSymbol, {
                    id: symbolID, // 洗掉功能
                    name: '圖形標注'
                }
            ))

            // 測量面積
            // https://developers.arcgis.com/javascript/3/jsapi/geometryservice-amd.html
            const areasAndLengthParams = new this.gisConstructor.AreasAndLengthsParameters()
            const geometryService = new this.gisConstructor.GeometryService(drawingOption.GeometryServerURL)
            areasAndLengthParams.areaUnit = this.gisConstructor.GeometryService.UNIT_SQUARE_KILOMETERS // 平方公里（平方米：UNIT_SQUARE_METERS）
            areasAndLengthParams.calculationType = 'preserveShape'
            geometryService.simplify([event.geometry], (simplifiedGeometries) => {
                areasAndLengthParams.polygons = simplifiedGeometries
                geometryService.areasAndLengths(areasAndLengthParams, (area) => {
                    let areas = this.gisConstructor.number.format(area.areas[0])
                    // 設距離顯示樣式，并添加到地圖上
                    let text = areas + '平方公里'
                    const areaSymbol = new this.gisConstructor.TextSymbol(setTextSymbolStyle.call(this, text))
                    const areaCenterPoint = event.geometry.getExtent().getCenter()
                    const areaPoint = new this.gisConstructor.Point(areaCenterPoint, this.map.spatialReference)
                    const areaGraphic = new this.gisConstructor.graphic(
                        areaPoint,
                        areaSymbol, {
                            id: symbolID, // 洗掉功能
                            name: '圖形標注'
                        }
                    )
                    DrawGraphicsLayer.add(areaGraphic)
                })
            })
        }
    }
    if (drawingOption.name === '空間統計') {
        if (_type === 'point') {
            symbol = new this.gisConstructor.SimpleMarkerSymbol(
                this.gisConstructor.SimpleMarkerSymbol.STYLE_SQUARE,
                10,
                new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this)),
                setSymbolColor.call(this, 'fill')
            )
        } else if (_type === 'polyline') {
            symbol = new _this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this))
        } else if (_type === 'polygon') {
            symbol = new this.gisConstructor.SimpleFillSymbol(
                this.gisConstructor.SimpleFillSymbol.STYLE_NONE,
                new this.gisConstructor.SimpleLineSymbol(
                    this.gisConstructor.SimpleLineSymbol.STYLE_DASHDOT,
                    new this.gisConstructor.SimpleLineSymbol(setLineSymbolStyle.call(this)),
                    setSymbolColor.call(this, 'fill'),
                ),
                new this.gisConstructor.Color(setSymbolColor.call(this, 'fill'))
            )
        }

        let drawingGraphic = new this.gisConstructor.graphic(event.geometry, symbol, {
            id: symbolID,
            name: '圖形標注'
        })
        DrawGraphicsLayer.add(drawingGraphic)
        // 空間統計做緩沖區，查詢資料
        let params = new this.gisConstructor.BufferParameters()
        params.bufferSpatialReference = this.map.spatialReference
        params.outSpatialReference = this.map.spatialReference
        params.distances = [Number(drawingOption.distances) || 1]
        params.unit = this.gisConstructor.GeometryService.UNIT_METER
        params.geodesic = true
        params.geometries = [drawingGraphic.geometry]

        new this.gisConstructor.GeometryService(drawingOption.GeometryServerURL || 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer').buffer(params, features => {
            let symbol = new _this.gisConstructor.SimpleFillSymbol(
                _this.gisConstructor.SimpleFillSymbol.STYLE_SOLID,
                new _this.gisConstructor.SimpleLineSymbol(
                    setLineSymbolStyle.call(this)
                ),
                new _this.gisConstructor.Color(setSymbolColor.call(this, 'fill'))
            )
            let graphic = new _this.gisConstructor.graphic(features[0], symbol, {
                id: symbolID,
                name: '圖形標注'
            })
            DrawGraphicsLayer.add(graphic)

            // 獲取緩沖范圍里的資料一般有兩種情況：
            // 一：用 MapServer 查詢
            doQueryBuffer.call(_this, graphic.geometry)

            // 二：取構成圖形范圍的坐標點集合傳給后臺，后臺查詢圖形范圍內的資料，例如：
            let rings = features[0].rings
            console.log(rings)
        })
    }
    DrawLayer.deactivate()
    this.map.setMapCursor('default')
}

/**
 * @name: 初始化繪制圖層
 */
function initDrawLayer() {
    // GraphicsLayer 第一個引數是 url，沒有也要占位，否則在第二個引數物件中設定圖層 id 等資訊無效，無法通過 map.addLayer(id) 獲取指定 id 的圖層
    DrawGraphicsLayer = new this.gisConstructor.GraphicsLayer('', {
        id: '繪制圖層'
    }, this.map.spatialReference)
    this.map.addLayer(DrawGraphicsLayer)
    DrawLayer = new this.gisConstructor.draw(this.map, {
        showTooltips: true
    })
    // 官網：draw-end This event is deprecated. Use draw-complete instead.
    DrawLayer.on('draw-complete', drawGraphic.bind(this))
}

/**
 * @name: 繪制工具
 * @param {status} 繪制狀態
 * @return {option} 配置
 */
function DrawingGraphics(status, option) {
    drawingOption = option
    if (!DrawLayer) {
        // 防止第二次點擊繪制型別，任然為上一次繪制型別狀態
        initDrawLayer.call(this)
    }
    if (status === 'active') {
        DrawLayer.activate(option.type)
        this.map.setMapCursor('crosshair')
    } else {
        // 清除繪制狀態和繪制圖形
        DrawLayer.deactivate()
        this.map.setMapCursor('default')
        DrawGraphicsLayer.clear()
        this.map.infoWindow.hide()
    }
    this.map.on('click', mapHandleClick.bind(this))
}

export {
    DrawingGraphics
}

使用

<template>
  <div id="map-container"
       style="width:100%;height:100%;">
    <div
         style="position:absolute;right:50px;top:50px;z-index:999;">
      <span>標繪：</span>
      <button
              @click="drawingGraphicsTool('標繪', 'point')">點</button>
      <button
              @click="drawingGraphicsTool('標繪', 'polyline')">線</button>
      <button
              @click="drawingGraphicsTool('標繪', 'polygon')">面</button>
      <button
              @click="drawingGraphicsTool('標繪', 'point', 'text')">文字</button>
      <br>
      <span>空間測量：</span>
      <button
              @click="drawingGraphicsTool('空間測量', 'point')">坐標測量</button>
      <button
              @click="drawingGraphicsTool('空間測量', 'polyline')">距離測量</button>
      <button
              @click="drawingGraphicsTool('空間測量', 'polygon')">面積測量</button>
      <br>
      <span>空間統計：</span>
      <button
              @click="drawingGraphicsTool('空間統計', 'point')">點</button>
      <button
              @click="drawingGraphicsTool('空間統計', 'polyline')">線</button>
      <button
              @click="drawingGraphicsTool('空間統計', 'polygon')">面</button>
      <br>
      <button
              @click="drawingGraphicsTool()">clear</button>
    </div>
  </div>
</template>
<script>
import { loadCss, loadModules } from 'esri-loader'
import { DrawingGraphics } from './DrawingGraphics.js'
export default {
  name: 'DrawingGraphics',
  components: {},
  data() {
    return {
      map: '',
      gisConstructor: {}, // gis 建構式
      gisModules: [
        'esri/map',
        'esri/SpatialReference',
        'esri/geometry/Extent',
        'esri/geometry/Point',
        'esri/geometry/Polyline',
        'esri/geometry/Polygon',
        'esri/geometry/geometryEngine',
        'esri/tasks/GeometryService',
        'esri/tasks/ProjectParameters',
        'esri/tasks/AreasAndLengthsParameters',
        'esri/tasks/LengthsParameters',
        'esri/tasks/query',
        'esri/tasks/QueryTask',
        'esri/tasks/BufferParameters',
        'esri/graphic',
        'esri/symbols/PictureMarkerSymbol',
        'esri/symbols/TextSymbol',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/symbols/SimpleLineSymbol',
        'esri/symbols/SimpleFillSymbol',
        'esri/symbols/Font',
        'esri/layers/GraphicsLayer',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'esri/layers/ArcGISTiledMapServiceLayer',
        'esri/toolbars/draw',
        'esri/Color',
        'dojo/_base/declare',
        'dojo/number',
        'esri/config',
        'esri/geometry/normalizeUtils',
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * @name: 地圖點擊事件
     */
    mapClickFun() {
      this.map.on('click', () => { })
    },

    /**
     * @name: 繪制工具
     * @msg: 標繪,空間測量,空間統計
     * @param {name}
     * @param {type}
     * @param {text} true
     */
    drawingGraphicsTool(name, type, text) {
      if (name && type) {
        let option = {}
        if (name === '標繪') {
          option = {
            name: '標繪',
            type: type,
            text: text ? true : false,
          }
        }
        if (name === '空間測量') {
          option = {
            GeometryServerURL:
              'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer',
            name: '空間測量',
            type: type,
          }
        }
        if (name === '空間統計') {
          option = {
            StatisticalServerURL:
              'https://sampleserver6.arcgisonline.com/arcgis/rest/services/StoryMaps/StoryMapPlaces4/MapServer/0',
            GeometryServerURL:
              'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer',
            distances: 100,
            name: '空間統計',
            type: type,
          }
        }
        DrawingGraphics.call(this, 'active', option)
      } else {
        DrawingGraphics.call(this, 'clear')
      }
    },

    /**
     * @name: 初始化地圖
     */
    init() {
      // 加載 css
      loadCss('https://js.arcgis.com/3.32/esri/css/esri.css')
      // 加載模塊
      loadModules(this.gisModules, {
        url: 'https://js.arcgis.com/3.32/init.js',
      })
        .then(this.initMap)
        .then(this.mapClickFun)
    },
    // 初始化地圖
    initMap(args) {
      // 將 ArcGIS 的每個功能模塊都存放到 gisConstructor 中
      for (let k in args) {
        let name = this.gisModules[k].split('/').pop()
        this.gisConstructor[name] = args[k]
      }
      this.map = new this.gisConstructor.map('map-container', {
        basemap: 'osm',
        logo: false,
        slider: true,
      })
      let extent = {
        xmin: -117.1839455,
        ymin: 32.68087830000002,
        xmax: -117.15035189999998,
        ymax: 32.732100979999984,
      }
      /*
        如果坐標系是 4490，初始化范圍需要設定空間參考坐標系
        new this.gisConstructor.SpatialReference({
          wkid: 4490
        })
      */
      this.map.setExtent(
        new this.gisConstructor.Extent(
          extent.xmin,
          extent.ymin,
          extent.xmax,
          extent.ymax,
          new this.gisConstructor.SpatialReference()
        )
      )
      // 添加一個 MapServer 做測驗
      let StoryMapPlaces4 = new this.gisConstructor.ArcGISDynamicMapServiceLayer(
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/StoryMaps/StoryMapPlaces4/MapServer',
        {
          id: 'StoryMapPlaces4',
          opacity: 1,
          visible: true,
        }
      )
      this.map.addLayer(StoryMapPlaces4, 2)
    },
  },
}
</script>