原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Map%20Pins.html&label=All

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const pinBuilder = new Cesium.PinBuilder();

const bluePin = viewer.entities.add({
  name: "蓝色空白标记(图钉)",
  position: Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
  billboard: {
    image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  },
});

const questionPin = viewer.entities.add({
  name: "问号标记",
  position: Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
  billboard: {
    image: pinBuilder.fromText("?", Cesium.Color.BLACK, 48).toDataURL(),
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  },
});

const url = Cesium.buildModuleUrl("Assets/Textures/maki/grocery.png");
const groceryPin = Promise.resolve(
  pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48),
).then(function (canvas) {
  return viewer.entities.add({
    name: "杂货店(标记)",
    position: Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
    billboard: {
      image: canvas.toDataURL(),
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
  });
});

//从 maki 图标集中创建一个代表医院的红色标记(图钉)。
const hospitalPin = Promise.resolve(
  pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 48),
).then(function (canvas) {
  return viewer.entities.add({
    name: "医院(标记)",
    position: Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
    billboard: {
      image: canvas.toDataURL(),
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
  });
});

//由于某些图钉(pin,标记)是异步创建的，因此请等待所有图钉(pin,标记)加载完毕后再进行缩放
Promise.all([bluePin, questionPin, groceryPin, hospitalPin]).then(
  function (pins) {
    viewer.zoomTo(pins);
  },
);