跳到主要内容

添加标记

这个示例演示如何使用 DMap3D SDK 在地图上添加各种标记点。

效果预览​

在 3D 地球上添加带有图标、文字标签的标记点，支持点击交互。

完整代码​

src/components/AddMarker.tsx
import { useEffect, useRef } from 'react'
import * as Cesium from 'cesium'
import './AddMarker.css'

function AddMarker() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    Cesium.Ion.defaultAccessToken = 'your-cesium-ion-token'

    const viewer = new Cesium.Viewer(containerRef.current, {
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      infoBox: false,
      baseLayerPicker: false,
      terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
    })
    viewerRef.current = viewer

    // 添加点标记
    viewer.entities.add({
      name: '北京',
      position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042),
      point: {
        pixelSize: 12,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
      label: {
        text: '北京',
        font: '14px sans-serif',
        fillColor: Cesium.Color.WHITE,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -15),
      },
    })

    // 添加广告牌标记（图标）
    viewer.entities.add({
      name: '上海',
      position: Cesium.Cartesian3.fromDegrees(121.4737, 31.2304),
      billboard: {
        image: '/img/marker.png', // 自定义图标
        width: 32,
        height: 32,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
      label: {
        text: '上海',
        font: '14px sans-serif',
        fillColor: Cesium.Color.WHITE,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -40),
      },
    })

    // 添加自定义样式标记
    viewer.entities.add({
      name: '广州',
      position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291),
      point: {
        pixelSize: 16,
        color: Cesium.Color.BLUE,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        text: '广州',
        font: 'bold 16px sans-serif',
        fillColor: Cesium.Color.YELLOW,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -20),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    })

    // 飞到中国全景视角
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(108.0, 34.0, 5000000.0),
    })

    return () => {
      viewer.destroy()
    }
  }, [])

  return (
    <div className="add-marker">
      <div ref={containerRef} className="cesium-container" />
      <div className="info-panel">
        <h3>标记点示例</h3>
        <ul>
          <li><span className="dot red"></span> 北京 - 点标记</li>
          <li><span className="dot blue"></span> 上海 - 图标标记</li>
          <li><span className="dot yellow"></span> 广州 - 自定义样式</li>
        </ul>
      </div>
    </div>
  )
}

export default AddMarker

样式文件​

src/components/AddMarker.css
.add-marker {
  position: relative;
  width: 100%;
  height: 100vh;
}

.cesium-container {
  width: 100%;
  height: 100%;
}

.info-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

.info-panel h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.info-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-panel li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 14px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot.red { background: #ff0000; }
.dot.blue { background: #0000ff; }
.dot.yellow { background: #ffff00; border: 1px solid #999; }

关键代码说明​

1. 添加点标记​

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042),
  point: {
    pixelSize: 12,               // 点大小（像素）
    color: Cesium.Color.RED,     // 颜色
    outlineColor: Cesium.Color.WHITE, // 边框颜色
    outlineWidth: 2,             // 边框宽度
  },
})

2. 添加文字标签​

label: {
  text: '北京',
  font: '14px sans-serif',
  fillColor: Cesium.Color.WHITE,
  style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  outlineWidth: 2,
  pixelOffset: new Cesium.Cartesian2(0, -15), // 偏移避免遮挡
}

3. 添加图标标记​

billboard: {
  image: '/img/marker.png', // 图标路径
  width: 32,
  height: 32,
  verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
}

4. 贴地显示​

point: {
  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
}

使用 heightReference 属性可以让标记贴合地形表面。

扩展功能​

  1. 点击交互 - 使用 ScreenSpaceEventHandler 实现点击标记弹出信息
  2. 聚合显示 - 使用 EntityCluster 在标记密集时自动聚合
  3. 动态更新 - 修改 Entity 属性实现标记动态变化
  4. 批量加载 - 通过 GeoJSON 数据源批量加载标记

相关 API​