原文链接及内容

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

运行效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  @import url(../templates/bucket.css);
  
  button.cesium-button {
    position: absolute;
    top: 2px;
    left: 95px;
    width: 60px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>加载中...</h1></div>
<div id="toolbar">
  <div id="propertiesMenu"></div>
  <div id="downloadBtn"></div>
</div>
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const modelCzml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
  },
  {
    id: "truck model",
    name: "Cesium Milk Truck",
    position: {
      cartographicDegrees: [-77, 37, 0],
    },
    model: {
      gltf: "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
    },
  },
];

function downloadBlob(filename, blob) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    const elem = window.document.createElement("a");
    elem.href = window.URL.createObjectURL(blob);
    elem.download = filename;
    document.body.appendChild(elem);
    elem.click();
    document.body.removeChild(elem);
  }
}

function reset() {
  viewer.trackedEntity = undefined;
  viewer.dataSources.removeAll();
}

// 我们将获取将被嵌入 KMZ 文件中的资源。
const daeModelPromise = Cesium.Resource.fetchBlob({
  url: "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.dae",
});

const texturePromise = Cesium.Resource.fetchBlob({
  url: "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.jpg",
});

/**
 * 此回调允许我们将模型的 URL 设置为使用 COLLADA 版本的模型，而不是 glTF 版本。
 * 它还允许我们指定将嵌入到导出的 KMZ 中的文件。
 */
function modelCallback(modelGraphics, time, externalFiles) {
  const resource = modelGraphics.uri.getValue(time);

  if (resource.url.indexOf("CesiumMilkTruck") !== -1) {
    externalFiles["model/CesiumMilkTruck.dae"] = daeModelPromise;
    externalFiles["model/CesiumMilkTruck.jpg"] = texturePromise;

    return "model/CesiumMilkTruck.dae";
  }

  throw Cesium.RuntimeError("Unknown Model");
}

let filenameToSave = "";
let dataSourcePromise;

Sandcastle.addToolbarMenu(
  [
    {
      text: "卫星",
      onselect: function () {
        reset();
        filenameToSave = "Satellites.kmz";
        dataSourcePromise = Cesium.CzmlDataSource.load(
          "../SampleData/simple.czml"
        );
        viewer.dataSources.add(dataSourcePromise);

        viewer.camera.flyHome(0);
      },
    },
    {
      text: "模型",
      onselect: function () {
        reset();
        filenameToSave = "Model.kmz";
        dataSourcePromise = Cesium.CzmlDataSource.load(modelCzml);
        viewer.dataSources.add(dataSourcePromise).then(function (dataSource) {
          viewer.trackedEntity = dataSource.entities.getById("truck model");
        });
      },
    },
  ],
  "propertiesMenu"
);

Sandcastle.addToolbarButton("下载", function () {
  dataSourcePromise
    .then(function (dataSource) {
      return Cesium.exportKml({
        entities: dataSource.entities,
        kmz: true,
        modelCallback: modelCallback,
      });
    })
    .then(function (result) {
      downloadBlob(filenameToSave, result.kmz);
    })
    .catch(console.error);
});