如何将图标添加到铯地图而不是点答案

【问题标题】：How to add a icon to cesium map instead of point如何将图标添加到铯地图而不是点
【发布时间】：2016-10-13 20:52:30
【问题描述】：

我想将图标添加到铯地图中，而不是绘制一个点。目前我在做下面的代码，但想用一个实际的图标替换下面的点。我一直在查看 cesium 文档，但找不到任何可以做到这一点的东西。感谢您的任何建议

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

points.add({
    position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
    color : colorDot,
    outlineColor : Cesium.Color.WHITE,
    outlineWidth : width
});

【问题讨论】：

标签： javascript html cesium

【解决方案1】：

在 Cesium 中，这称为广告牌。它们的创建方式与点基本相同，只是图像通常是从 URL 加载的。

https://cesiumjs.org/Cesium/Build/Documentation/BillboardCollection.html

// Create a billboard collection with two billboards
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
  position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
  image : 'url/to/image'
});
billboards.add({
  position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
  image : 'url/to/another/image'
});

【讨论】：

我尝试了上面的代码并尝试了一个本地文件的 URL，但我得到一个错误 cant' load local file
Web 浏览器不允许 JavaScript 读取本地文件，这是有充分理由的。您的图像需要托管在托管您的 Cesium 副本的同一台服务器上，或者在具有 enabled CORS 以允许其他站点的 JavaScript 请求资产的服务器上。

【解决方案2】：

补充@paraquat 关于广告牌的正确答案：Cesium 包含一个“Pin Builder”，可用于将典型的地图图标制作为广告牌。 Here's a demo.

var viewer = new Cesium.Viewer('cesiumContainer');

var pinBuilder = new Cesium.PinBuilder();

var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
    return viewer.entities.add({
        name : 'Grocery store',
        position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
        billboard : {
            image : canvas.toDataURL(),
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
        }
    });
});

【讨论】：