Cesium学习笔记5——加载topojson和Geojson
在根目录下新建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>
效果:
作者:太一吾鱼水
文章未经说明均属原创,学习笔记可能有大段的引用,一般会注明参考文献。
欢迎大家留言交流,转载请注明出处。