Cesium GeoJSON 面教程

GeoJSON 面 ·GeoJSON Polygon· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么GeoJsonDataSource.load加载 GeoJSON 面数据统一设置stroke / fill / strokeWidthscene.pick点击 Entity 修改polygon.material封装changeMaterial批量改色效果说明加载广东省 GeoJSON半透明蓝色填充点击某一区域后该区域变为黄色半透明。核心概念GeoJsonDataSourceconst dataSource await Cesium.GeoJsonDataSource.load(url, {stroke: Cesium.Color.RED.withAlpha(0.5), fill: Cesium.Color.BLUE.withAlpha(0.5), strokeWidth: 3, }); viewer.dataSources.add(dataSource); viewer.flyTo(dataSource);加载后每个 Feature 对应一个Entity面要素带polygon图形。点击改色viewer.screenSpaceEventHandler.setInputAction((event) {const picked viewer.scene.pick(event.position); if (Cesium.defined(picked) picked.id) { picked.id.polygon.material Cesium.Color.YELLOW.withAlpha(0.5); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);picked.id即 Entitypolygon.material接受Color或MaterialProperty。批量换肤dataSource.changeMaterial (params) {dataSource.entities.values.forEach(entity { entity.polygon.material Cesium.Color.fromCssColorString(params.fillColor) .withAlpha(params.fillOpacity); entity.polygon.outlineColor ...; }); };实现步骤初始化 Viewer 与底图setGeoPolygon(viewer, geojsonUrl)封装 load add changeMaterialviewer.flyTo(dataSource)定位到数据范围注册 LEFT_CLICKpick 后改 material代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: false, // 不显示默认图层fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const url GLOBAL_CONFIG.getLayerUrl() const layer Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(url))viewer.imageryLayers.add(layer)// 加载geojson数据 const dataSource setGeoPolygon(viewer, https://z2586300277.github.io/three-editor/dist/files/font/guangdong.json)// 看向geojson数据 viewer.flyTo(dataSource)// 点击变色 viewer.screenSpaceEventHandler.setInputAction((event) {const pickedObject viewer.scene.pick(event.position)if (Cesium.defined(pickedObject) pickedObject.id) {pickedObject.id.polygon.material Cesium.Color.fromCssColorString(yellow).withAlpha(0.5)}}, Cesium.ScreenSpaceEventType.LEFT_CLICK)// 创建 面 async function setGeoPolygon(viewer, source, params {}) {const dataSource await Cesium.GeoJsonDataSource.load(source, {stroke: Cesium.Color.fromCssColorString(params.strokeColor || red).withAlpha(params.strokeOpacity || 0.5), // 边界fill: Cesium.Color.fromCssColorString(params.fillColor || blue).withAlpha(params.fillOpacity || 0.5), // 填充strokeWidth: params.strokeWidth || 3,markerSymbol: ?,...params})dataSource.changeMaterial (params) dataSource.entities.values.forEach(entity {entity.polygon.material Cesium.Color.fromCssColorString(params.fillColor || blue).withAlpha(params.fillOpacity || 0.5)entity.polygon.outlineColor Cesium.Color.fromCssColorString(params.strokeColor || red).withAlpha(params.strokeOpacity || 0.5)entity.polygon.outlineWidth params.strokeWidth || 3})viewer.dataSources.add(dataSource)return dataSource}完整源码GitHub小结本文提供GeoJSON 面完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库