标记 - Marker

官网链接：https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import Graphic from "@arcgis/core/Graphic"

const map = new Map({
  basemap: 'dark-gray'
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343]
})

const pointGraphic = new Graphic({
  geometry: {
    type: "point",
    longitude: -49.97,
    latitude: 41.73
  },
  symbol: {
    type: "simple-marker",
    style: "square",
    color: "blue",
    size: "8px",
    outline: {
      color: [ 255, 255, 0 ],
      width: 3
    }
  }
})

mapView.graphics.add(pointGraphic)

更多 SimpleMarkerSymbol 介绍请看这里。

添加多个

mapView.graphics.addMany([pointGraphic])

删除

mapView.graphics.remove(pointGraphic)

删除多个

mapView.graphics.removeMany([pointGraphic])

删除全部

mapView.graphics.removeAll()

是否可见

new Graphic({
  visible: false
})

添加属性

new Graphic({
  attributes: {id: 1}
})

添加弹层

new Graphic({
  popupTemplate: {
    title: '标题',
    content: '<div>内空</div>'
  }
})

图片标记

图片可以是常规格式图片（.jpg、.png 等），也可以是 .svg 图形。

const pictureGraphic = new Graphic({
  geometry: {
    type: "point",
    longitude: -49.97,
    latitude: 41.73
  },
  symbol: {
    type: 'picture-marker',
    url: '/assets/vehicle.svg',
    width: 30,
    height: 30,
    angle: 60,
  }
})

更多 PictureMarkerSymbol 介绍请看这里。

文本标记

const textGraphic = new Graphic({
  geometry: {
    type: "point",
    longitude: -49.97,
    latitude: 41.73
  },
  symbol: {
    type: 'text',
    text: 'Hello World',
    color: '#fff',
    angle: 30,
    font: {
      size: 8
    }
  }
})

更多 TextSymbol 介绍请看这里。

div标记

以 vue3 项目为示例，主要通过把经 纬度坐标转 换成 屏幕坐标 来实现div容器定位。

<template>
  <!-- 车辆标记 -->
  <div 
    class="zh-vehicle" 
    v-for="item in vehicleList" 
    :key="item.number" 
    :style="{left: `${item.x}px`, top: `${item.y}px`, transform: `rotate(${item.angle}deg)`}"
  >
    <img src="@/assets/vehicle.svg" />
    <!-- 标签回正 -->
    <div class="zh-label" :style="{transform: `rotate(${-item.angle}deg)`}">
      车牌号：{{ item.number }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const vehicleList = ref([])

const testData = [
  {number: '测试-1', lng: 121.1321982, lat: 33.231234, angle: 30},
  {number: '测试-2', lng: 131.1321982, lat: 23.231234, angle: 45},
  {number: '测试-3', lng: 111.1321982, lat: 13.231234, angle: 60},
]

testData.forEach(item => {
  const screenCoord = mapView.toScreen({
    x: item.lng,
    y: item.lat,
    spatialReference: {
      wkid: 4326, // WGS-84坐标系
    }
  })
  item.x = screenCoord.x
  item.y = screenCoord.y
})

vehicleList.value = testData

// 监听地图范围变化（包含：缩放、拖动、旋转）
mapView.watch("extent", () => {
  // 更新屏幕坐标，不然定位会固定
  vehicleList.value.forEach(item => {
    const screenCoord = mapView.toScreen({
      x: item.lng,
      y: item.lat,
      spatialReference: {
        wkid: 4326
      }
    })
    item.x = screenCoord.x
    item.y = screenCoord.y
  })
})
</script>

<style lang="less" scoped>
.zh-vehicle {
  position: fixed;
  z-index: 9;
  .zh-label {
    position: absolute;
    padding: 15px;
    background-color: #000;
  }
}
</style>

多点

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import Graphic from "@arcgis/core/Graphic"
import Multipoint from "@arcgis/core/geometry/Multipoint.js"

const pointsGraphicLayer = new GraphicsLayer()

const map = new Map({
  basemap: 'dark-gray',
  layers: [pointsGraphicLayer]
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343]
})

const pointsGraphic = new Graphic({
  geometry: new Multipoint({
    points: [
      [-111.3, 52.68],
      [-98, 49.5],
      [-93.94, 29.89]
    ]
  }),
  symbol: {
    type: "simple-marker",
    color: "red",
    size: "8px"
  }
})

// 或者
// const pointsGraphic = new Graphic({
//   geometry: {
//     type: "multipoint",
//     points: [
//       [-111.3, 52.68],
//       [-98, 49.5],
//       [-93.94, 29.89]
//     ]
//   },
//   symbol: {
//     type: "simple-marker",
//     color: "red",
//     size: "8px"
//   }
// })

pointsGraphicLayer.add(pointsGraphic)