将shp文件转换为cesium可以加载的geojson文件，在线转换工具，使用cesium的GeoJsonDataSource接口类，根据建筑物高度上色加载geojson文件。
注意shp文件包含_Height字段。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="Load GeoJSON or TopoJSON data and apply custom styling.">
<meta name="cesium-sandcastle-labels" content="Showcases, Tutorials, DataSources">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(bucket.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
window.startup = async function (Cesium) {
'use strict';
//Sandcastle_Begin
const viewer = new Cesium.Viewer("cesiumContainer", {
timeline:false,
animation:false,
infoBox:false,
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=ec5a2a0e05d6e7be9aabdcfa8a8812a9" ,
layer: "vec",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
}),
});
//Example 1: Load with default styling.
Sandcastle.addDefaultToolbarButton("Default styling", function () {
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(
"../ZhongXBuildings.json"
)
);
});
//Example 2: Load with basic styling options.
Sandcastle.addToolbarButton("Basic styling", function () {
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(
"../ZhongXBuildings.json",
{
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK.withAlpha(0.5),
strokeWidth: 3,
}
)
);
});
//Example 3: Apply custom graphics after load.
Sandcastle.addToolbarButton("Custom styling", function () {
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);
var geojsonOptions = {
clampToGround : true //使数据贴地
};
// 加载tileset.json
var entities;
var promise =Cesium.GeoJsonDataSource.load('../ZhongXBuildings.json', geojsonOptions);
promise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
entities =dataSource.entities.values;
viewer.zoomTo(entities);
for (var i = 0; i < entities.length;i++) {
var entity = entities[i];
const { properties, polygon } = entity
var lvalue = entity.properties._Height._value;
var color;
if(lvalue<10){
color = "151,232,173";
}
else if(lvalue>=10&&lvalue<20){
color = "0,0,255";
}
else if(lvalue>=20&&lvalue<30){
color = "247,180,45";
}
else if(lvalue>=30&&lvalue<45){
color = "241,147,3";
}
else if(lvalue>=45&&lvalue<60){
color = "239,117,17";
}
else if(lvalue>=60&&lvalue<70){
color = "238,88,31";
}
else if(lvalue>=70&&lvalue<80){
color = "224,63,22";
}
else{
color = "208,36,14";
}
entity.polygon.material = Cesium.Color.fromCssColorString("rgb("+color+")");;
//Remove the outlines.
entity.polygon.outline = true;
entity.polygon.extrudedHeight = lvalue;
}
const x = 120.9, y = 32.0348739
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(x, y, 3000),
});
})
});
//Reset the scene when switching demos.
Sandcastle.reset = function () {
viewer.dataSources.removeAll();
}
Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
window.startup(Cesium).catch((error) => {
"use strict";
console.error(error);
});
}
</script>
</body>
</html>
结果：
开始因为shp数据是从eps中导出的，存在一个建筑导出多个重叠面的情况，还有自相交的拓扑错误，修复之后如下：
参考：
评论（0）
您还未登录，请登录后发表或查看评论