ArcGIS API for JavaScript

一、基础使用

1、安装


npm install @arcgis/core
yarn install @arcgis/core
pnpm install @arcgis/core

2、引入

CSS：点击查看文档


import '@arcgis/core/assets/esri/themes/dark/main.css'

ts：


import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'

3、创建

点击查看文档

点击查看Map文档点击查看MapView文档


<template>
  <div id="map" />
</template>

<script setup lang="ts">
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import { onMounted } from 'vue'

onMounted(() => {
  const map = new Map({
    basemap: 'topo-vector'
  })

  const view = new MapView({
    container: 'map',
    map,
    center: [116.6, 35.5],
    zoom: 8,
  })
})
</script>

<style>
  html,
  body,
  #app,
  #map {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
</style>

4、地图UI

点击查看Zoom文档

点击查看ScaleBar文档


import Zoom from '@arcgis/core/widgets/Zoom'
import ScaleBar from '@arcgis/core/widgets/ScaleBar'

const zoom = new Zoom({ view })
view.ui.add(zoom, { position: 'bottom-right' })

const scaleBar = new ScaleBar({ view, unit: 'metric' })
view.ui.add(scaleBar, { position: 'bottom-right' })

5、使用自定义瓦片地图

点击查看TileLayer文档

点击查看Basemap文档


import TileLayer from '@arcgis/core/layers/TileLayer'
import BaseMap from '@arcgis/core/Basemap'

const mapBaseLayer = new TileLayer({
  url: 'http://xxx.xxx.xxx.xxx:xxxx/arcgis/rest/services/JINING/GEO_JN_IMAGES/MapServer',
})
const mapBaseMap = new BaseMap({ baseLayers: [mapBaseLayer] })
const map = new Map({ basemap: mapBaseMap })

6、添加地图图片图层

点击查看MapImageLayer文档

点击查看SimpleRender文档

点击查看SimpleFillSymbol文档


import MapImageLayer from '@arcgis/core/layers/MapImageLayer'

const imageLayer = new MapImageLayer({
  url: 'http://xxx.xxx.xxx.xxx:xxxx/arcgis/rest/services/JNORCL/GEO_JN_XZQH/MapServer',
  visible: true,
  sublayers: [
    {
      id: 2,
      title: '县',
      renderer: new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: [0, 0, 0, 0],
          outline: {
            color: '#05e4c6',
            width: 2.5,
          },
        }),
      }),
      labelsVisible: true,
      visible: true,
    },
  ],
})
map.add(imageLayer)

7、添加图形覆盖物

引入 Graphic 构建工具


import Graphic from '@arcgis/core/Graphic'

引入构建图形的两个重要元素geometry和symbols（这里以 Point 和 SimpleMarkerSymbol 为例）


import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'

// 或
import { Point } from '@arcgis/core/geometry'
import { SimpleMarkerSymbol } from '@arcgis/core/symbols'

使用


const marker = new Graphic({
  geometry: new Point({
    longitude: 120,
    latitude: 36,
  }),
  symbol: new SimpleMarkerSymbol({
    color: [226, 119, 40],
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  }),
})

添加


// (method) __esri.Collection<__esri.Graphic>.add(item: Graphic, index?: number | undefined): void
view.graphics.add(marker)

删除


// (method) __esri.Collection<__esri.Graphic>.remove(item: Graphic): void
view.graphics.remove(marker)
// 删除所有
view.graphics.removeAll()

8、MapView点击事件与命中测试

点击查看click文档

点击查看hitTest文档


view.on('click', (event) => {
  console.log(event.mapPoint)
  view.hitTest(event).then((response) => {
    console.log(response.results)
  })
})

9、Popup弹出窗

方式一：


const pictureMarker = new Graphic({
  geometry: new Point({
    longitude: 120,
    latitude: 36,
  }),
  symbol: new PictureMarkerSymbol({
    url: img,
    width: '64px',
    height: '64px',
  }),
  popupTemplate: {
    title: 'Vue',
    content: 'Vue is a progressive framework for building user interfaces.',
  },
})

方式二：


view.popup.id = 'person'
view.popup.alignment = 'bottom-right'
const popupTemplate = {
  title: '执法人员详情',
  location: new Point({ longitude: info.longitude, latitude: info.latitude }),
  content: `<div class="flex-wrap flex-start peopleInfoWindow">
              <div class="item">姓名：${account}</div>
              <div class="item" ${sexName ? '' : 'style="display: none"'}>性别：${sexName}</div>
              <div class="item">手机号：${phone}</div>
              <div class="item">经度：${info.longitude}</div>
              <div class="item">纬度：${info.latitude}</div>
              <div class="item">所属区县：${postName}</div>
            </div>`
}
view.popup.open(popupTemplate)

10、视角移动缩放

点击查看文档


view.goTo({ target: Point, zoom: range })

view.goTo({ center: [lng, lat], zoom: range })

二、进阶使用

1、draw绘制

引入Draw


import Draw from '@arcgis/core/views/draw/Draw'

使用


type Type = 'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'

const draw = new Draw({ view: MapView })
const action = draw.value!.create('polyline')

MapView.focus()
action.value.on(
  ['vertex-add', 'vertex-remove', 'cursor-update', 'redo', 'undo', 'draw-complete'],
  (event) => {
    // do something
  }
)

2、sketch绘制

引入SketchViewModel


import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'

使用


type CreateType = 'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'
const sketch = new SketchViewModel({
  view: MapView,
  layer: GraphicLayer,
})
sketch.create('polyline')

3、测量、测面、判断相交等

引入geometryEngine


import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'

使用


geometryEngine.geodesicLength(geometry, unit)
geometryEngine.geodesicArea(geometry, unit)
geometryEngine.intersect(geometry1, geometry2)

4、Editor进行layer编辑

引入Editor


import Editor from '@arcgis/core/widgets/Editor'

使用


const editor = new Editor({ view: MapView })

5、使用queryFeatures查询

使用queryFeatures方法