cesium案例三维钢铁厂园区开发平台附源码下载
目录
cesium案例:三维钢铁厂园区开发平台(附源码下载)
基于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, //地名查找,默认true
homeButton: false, //主页按钮,默认true
navigationHelpButton: false, //导航帮助说明,默认true
navigationInstructionsInitiallyVisible: false,
//关闭地球光环
skyAtmosphere: false,
imageryProvider: image_Source,
});
var utc=Cesium.JulianDate.fromDate(new Date("2019/08/04 06:00:00"));//UTC
viewer.clock.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8
viewer._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) +
"米 海拔高度:" +
height.toFixed(2) +
"米 经度:" +
point[0].toFixed(6) +
" 纬度:" +
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;
}