526互联

Cesium学习笔记3——加载topojson和Geojson

发布时间 2023-07-10 14:54:29作者: 太一吾鱼水

在根目录下新建bucket.css

@import"../Build/CesiumUnminified/Widgets/widgets.css";@import"../Build/CesiumUnminified/Widgets/lighter.css";html{height:100%}body{background:#000;color:#eee;font-family:sans-serif;font-size:9pt;padding:0;margin:0;width:100%;height:100%;overflow:hidden}.fullSize{display:block;position:absolute;top:0;left:0;border:none;width:100%;height:100%}#loadingOverlay{position:absolute;top:0;left:0;opacity:.9;width:100%;height:100%;display:none}#loadingOverlay h1{text-align:center;position:relative;top:50%;margin-top:-.5em}.sandcastle-loading #loadingOverlay{display:block}.sandcastle-loading #toolbar{display:none}#toolbar{margin:5px;padding:2px 5px;position:absolute}.infoPanel{background:rgba(42,42,42,.8);padding:4px;border:1px solid #444;border-radius:4px}

新建代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="utf-8" />
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6     <meta
  7       name="viewport"
  8       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  9     />
 10     <meta name="description" content="Load GeoJSON or TopoJSON data and apply custom styling.">
 11     <meta name="cesium-sandcastle-labels" content="Showcases, Tutorials, DataSources">
 12     <title>Cesium Demo</title>
 13     <script type="text/javascript" src="../Sandcastle-header.js"></script>
 14     <script type="module" src="../load-cesium-es6.js"></script>
 15   </head>
 16   <body
 17     class="sandcastle-loading"
 18     data-sandcastle-bucket="bucket-requirejs.html"
 19   >
 20 <style>
 21       @import url(bucket.css);
 22       html,
 23       body,
 24     #cesiumContainer {
 25       width: 100%;
 26       height: 100%;
 27       margin: 0;
 28       padding: 0;
 29       overflow: hidden;
 30     }
 31     </style>
 32     <div id="cesiumContainer" class="fullSize"></div>
 33     <div id="loadingOverlay"><h1>Loading...</h1></div>
 34     <div id="toolbar"></div>
 35     <script id="cesium_sandcastle_script">
 36 window.startup = async function (Cesium) {
 37     'use strict';
 38 //Sandcastle_Begin
 39 const viewer = new Cesium.Viewer("cesiumContainer", {
 40       timeline:false,
 41         animation:false,
 42         infoBox:false,
 43         imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
 44             url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的Token" ,
 45             layer: "vec",
 46             style: "default",
 47             tileMatrixSetID: "w",
 48             format: "tiles",
 49             maximumLevel: 18,
 50         }),
 51     });
 52 
 53 //Example 1: Load with default styling.
 54 Sandcastle.addDefaultToolbarButton("Default styling", function () {
 55   viewer.dataSources.add(
 56     Cesium.GeoJsonDataSource.load(
 57       "../ne_10m_us_states.topojson"
 58     )
 59   );
 60 });
 61 
 62 //Example 2: Load with basic styling options.
 63 Sandcastle.addToolbarButton("Basic styling", function () {
 64   viewer.dataSources.add(
 65     Cesium.GeoJsonDataSource.load(
 66       "../ne_10m_us_states.topojson",
 67       {
 68         stroke: Cesium.Color.HOTPINK,
 69         fill: Cesium.Color.PINK.withAlpha(0.5),
 70         strokeWidth: 3,
 71       }
 72     )
 73   );
 74 });
 75 
 76 //Example 3: Apply custom graphics after load.
 77 Sandcastle.addToolbarButton("Custom styling", function () {
 78   //Seed the random number generator for repeatable results.
 79   Cesium.Math.setRandomNumberSeed(0);
 80 
 81   const promise = Cesium.GeoJsonDataSource.load(
 82     "../ne_10m_us_states.topojson"
 83   );
 84   promise
 85     .then(function (dataSource) {
 86       viewer.dataSources.add(dataSource);
 87 
 88       //Get the array of entities
 89       const entities = dataSource.entities.values;
 90 
 91       const colorHash = {};
 92       for (let i = 0; i < entities.length; i++) {
 93         //For each entity, create a random color based on the state name.
 94         //Some states have multiple entities, so we store the color in a
 95         //hash so that we use the same color for the entire state.
 96         const entity = entities[i];
 97         const name = entity.name;
 98         let color = colorHash[name];
 99         if (!color) {
100           color = Cesium.Color.fromRandom({
101             alpha: 1.0,
102           });
103           colorHash[name] = color;
104         }
105 
106         //Set the polygon material to our random color.
107         entity.polygon.material = color;
108         //Remove the outlines.
109         entity.polygon.outline = false;
110 
111         //Extrude the polygon based on the state's population.  Each entity
112         //stores the properties for the GeoJSON feature it was created from
113         //Since the population is a huge number, we divide by 50.
114         entity.polygon.extrudedHeight =
115           entity.properties.Population / 50.0;
116       }
117     })
118     .catch(function (error) {
119       //Display any errrors encountered while loading.
120       window.alert(error);
121     });
122 });
123 
124 //Reset the scene when switching demos.
125 Sandcastle.reset = function () {
126   viewer.dataSources.removeAll();
127 
128   //Set the camera to a US centered tilted view and switch back to moving in world coordinates.
129   viewer.camera.lookAt(
130     Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
131     new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0)
132   );
133   viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
134 };
135 //Sandcastle_End
136     Sandcastle.finishedLoading();
137 };
138 if (typeof Cesium !== 'undefined') {
139     window.startupCalled = true;
140     window.startup(Cesium).catch((error) => {
141       "use strict";
142       console.error(error);
143     });
144 }
145 </script>
146 </body>
147 </html>

效果：