当前位置：首页 > news >正文

cesium案例:三维钢铁厂园区开发平台(附源码下载)

news 2025/9/21 14:51:52

基于cesium的三维钢铁厂园区开发平台案例，覆盖功能点包括图展示、图层管理控制、图层在线编辑（增删改查）、poi兴趣点管理、三维模型单体化以及交互点击高亮弹窗展示、地图点查查询、量算工具等等，适合学习cesium与前端框架结合开发3D可视化项目。

demo源码运行环境以及配置

1.jdk1.8环境配置，geoserver集成在tomcat运行需要
2.geoserver，发布地图服务
3.demo项目工程html+js+css
4.demo里面提供tomcat，里面集成geoserver以及三维模型数据，建议直接用

技术栈

cesium版本相对低
html5
js

示例效果
在这里插入图片描述

核心源码

var viewer;
var tilesets = [];
if (!viewer) viewer = initViewer();
window.viewer = viewer;
window.isClickQuery = true;
function initViewer() {var image_Source = new Cesium.UrlTemplateImageryProvider({//url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',url:"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",//url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",credit: "",});viewer = new Cesium.Viewer("map", {// terrainProvider: new Cesium.CesiumTerrainProvider({//   url: "http://data.marsgis.cn/terrain",//   enablePickFeatures: false,// }),selectionIndicator: false,infoBox: false,sceneModePicker: false,baseLayerPicker: false,fullscreenButton: false,timeline: false,animation: false,geocoder: false, //地名查找,默认truehomeButton: false, //主页按钮，默认truenavigationHelpButton: false, //导航帮助说明,默认truenavigationInstructionsInitiallyVisible: false,//关闭地球光环skyAtmosphere: false,imageryProvider: image_Source,});var utc=Cesium.JulianDate.fromDate(new Date("2019/08/04 06:00:00"));//UTCviewer.clock.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8viewer._cesiumWidget._creditContainer.style.display = "none";//地图范围跳转var cartographicWS = [MapConfig.mapInitParams.extent.xmin,MapConfig.mapInitParams.extent.ymin,];var cartographicEN = [MapConfig.mapInitParams.extent.xmax,MapConfig.mapInitParams.extent.ymax,];var destination = Cesium.Rectangle.fromDegrees(cartographicWS[0],cartographicWS[1],cartographicEN[0],cartographicEN[1]);viewer.camera.setView({// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州destination: new Cesium.Cartesian3(-9572992.58727217, 26560459.994496826, 16289675.895258622),},{duration: 5,});// viewer.camera.flyTo({//   destination: destination,// },{//   duration: 5,//   offset: new Cesium.HeadingPitchRange(//     0.0,//     Cesium.Math.toRadians(-20.0),//     24056907//   )// });//创建地图导航控件viewer.extend(Cesium.viewerCesiumNavigationMixin, {defaultResetView: destination,});//显示地图当前坐标show3DCoordinates();// 禁用默认的实体双击动作。viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//临时测试加载tif的tms瓦片服务/*var layers = viewer.scene.imageryLayers;layers.addImageryProvider(// new Cesium.UrlTemplateImageryProvider({//   url: MapConfig.tmsdomURL// })new Cesium.TileMapServiceImageryProvider({url: MapConfig.tmsdomURL,fileExtension: 'png'}));*///3dtiles单体化模型加载/*var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: MapConfig.Tiles3D.url,modelMatrix: Cesium.Matrix4.fromArray([0.1869180209750189,-0.8523144464483328,0.4884892402195312,0,0.2987505001302249,0.5230194918510269,0.7982472986586509,0,-0.9358470986794386,-0.0032704004901111805,0.352391135492809,0,-23040.115059180185,-69.02736813761294,-15930.330225577112,1,]),}));// var temp = {};// temp[MapConfig.Tiles3D.url] = tileset;tilesets.push(tileset);viewer.flyTo(tileset, {duration: 5,offset: new Cesium.HeadingPitchRange(0.0,Cesium.Math.toRadians(-20.0),700),});*/clickQuery.activate();return viewer;
}
/** 显示地图当前坐标*/
function show3DCoordinates() {//地图底部工具栏显示地图坐标信息var elementbottom = document.createElement("div");$(".cesium-viewer").append(elementbottom);elementbottom.style.width = "100%";elementbottom.style.height = "30px";elementbottom.style.background = "rgba(0,0,0,0.5)";elementbottom.style.position = "absolute";elementbottom.style.bottom = "0px";elementbottom.style.cursor = "default";var coordinatesDiv = document.getElementById("map_coordinates");if (coordinatesDiv) {coordinatesDiv.style.display = "block";} else {coordinatesDiv = document.createElement("div");coordinatesDiv.id = "map_coordinates";//coordinatesDiv.style.zIndex = "50";coordinatesDiv.style.bottom = "1px";coordinatesDiv.style.height = "29px";coordinatesDiv.style.position = "absolute";coordinatesDiv.style.overflow = "hidden";coordinatesDiv.style.textAlign = "center";coordinatesDiv.style.left = "70px";coordinatesDiv.style.lineHeight = "29px";coordinatesDiv.innerHTML ="<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";$(".cesium-viewer").append(coordinatesDiv);var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler3D.setInputAction(function (movement) {var pick = new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);if (pick) {var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick),viewer.scene);if (cartesian) {//世界坐标转地理坐标（弧度）var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);if (cartographic) {//海拔var height = viewer.scene.globe.getHeight(cartographic);//视角海拔高度var he = Math.sqrt(viewer.scene.camera.positionWC.x *viewer.scene.camera.positionWC.x +viewer.scene.camera.positionWC.y *viewer.scene.camera.positionWC.y +viewer.scene.camera.positionWC.z *viewer.scene.camera.positionWC.z);var he2 = Math.sqrt(cartesian.x * cartesian.x +cartesian.y * cartesian.y +cartesian.z * cartesian.z);//地理坐标（弧度）转经纬度坐标var point = [(cartographic.longitude / Math.PI) * 180,(cartographic.latitude / Math.PI) * 180,];if (!height) {height = 0;}if (!he) {he = 0;}if (!he2) {he2 = 0;}if (!point) {point = [0, 0];}coordinatesDiv.innerHTML ="<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>视角高度:" +(he - he2).toFixed(2) +"米&nbsp;&nbsp;&nbsp;&nbsp;海拔高度:" +height.toFixed(2) +"米&nbsp;&nbsp;&nbsp;&nbsp;经度：" +point[0].toFixed(6) +"&nbsp;&nbsp;纬度：" +point[1].toFixed(6) +"</span>";}}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);}
}
function initOverlay() {}
function hideOverlay() {overlay.close();
}
function changeModelStyle(pickedFeature, color) {if (!Cesium.defined(pickedFeature)) {var primitives = viewer.scene._primitives._primitives;if(primitives.length > 0){for (var i = 0; i < primitives.length; i++) {console.log("ddddddddddddddd")if(primitives[i] instanceof Cesium.Cesium3DTileset){primitives[i].style = new Cesium.Cesium3DTileStyle();}}}// for (var i = 0; i < tilesets.length; i++) {//   tilesets[i].style = new Cesium.Cesium3DTileStyle();// }return;}var selectbuilding = pickedFeature.getProperty('id');var selectcontent = "${id} === \'" + selectbuilding + "\'";var transparentStyle = new Cesium.Cesium3DTileStyle({color: {conditions: [[selectcontent, color],["true", "color('#FFFFFF')"]//true表示剩余的显示的对象]},});pickedFeature.tileset.style = transparentStyle;
}
function addModelStyle(selected, moved) {var transparentStyle = new Cesium.Cesium3DTileStyle({color: {conditions: [["${id} === \'" + selected.getProperty('id') + "\'", "color('#ff0000')"],["${id} === \'" + moved.getProperty('id') + "\'", "color('#ff0')"],["true", "color('#FFFFFF')"]//true表示剩余的显示的对象]},});selected.tileset.style = transparentStyle;
}