代码拉取完成，页面将自动刷新
同步操作将从 刘娇951128/cesuim离线地图 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>New York City</title>
<!-- The Cesium library. -->
<script src="/CesiumUnminified/Cesium.js"></script>
<link href="/CesiumUnminified/Widgets/widgets.css" rel="stylesheet">
<script src="/CesiumUnminified/viewerCesiumNavigationMixin.min.js"></script>
<script src="/js/jquery.js"></script>
<!-- <script src="/layui/layui.js"></script> -->
<!-- <link rel="stylesheet" href="./layui/css/layui.css"> -->
<!-- <link rel="stylesheet" href="/css/index.css"> -->
</head>
<style>
html, body, #cesiumContainer {
height: 100%;
width: auto;
box-sizing:border-box;
overflow:hidden
}
.input-card {
width: 200px;
height: 290px;
display: inline;
opacity: 0.8;
z-index: 100;
position: absolute;
bottom: 10px;
right: 0;
background-color: #fff;
border-radius: 3%;
}
.one {
width: 100%;
height: 22px;
float: left;
box-sizing: border-box;
padding-top: 2px;
padding-right: 0px;
padding-left: 1px;
}
.two {
width: 95%;
height: 62px;
float: right;
box-sizing: border-box;
padding-top: 2px;
padding-right: 2px;
padding-left: 0px;
}
.layui-layer-title {
padding: 0 40px 0 20px;
}
.box {
z-index: 100;
position: absolute;
top: 20px;
left: 20px;
}
</style>
<body>
<div id="cesiumContainer"></div>
<div class="input-card" style="padding-left: 15px;">
<div class="one">
<label style="color:black;font-size:14px;margin-bottom:0px">【第一航站楼ESD状态】</label>
</div>
<div class="two">
<div>
<label style="width:38%;color:forestgreen;font-size:13px;margin-bottom:2px;margin-right: 40px;">正常</label>
<label id="onehz1" style="width:50%;color:forestgreen;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:red;font-size:13px;margin-bottom:2px;margin-right: 40px;">报警</label>
<label id="onehz2" style="width:50%;color:red;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:orange;font-size:13px;margin-bottom:2px;margin-right: 40px;">故障</label>
<label id="onehz3" style="width:50%;color:orange;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
</div>
<div class="one">
<label style="color:black;font-size:14px;margin-bottom:0px">【第二航站楼ESD状态】</label>
</div>
<div class="two">
<div>
<label style="width:38%;color:forestgreen;font-size:13px;margin-bottom:2px;margin-right: 40px;">正常</label>
<label id="twohz1" style="width:50%;color:forestgreen;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:red;font-size:13px;margin-bottom:2px;margin-right: 40px;">报警</label>
<label id="twohz2" style="width:50%;color:red;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:orange;font-size:13px;margin-bottom:2px;margin-right: 40px;">故障</label>
<label id="twohz3" style="width:50%;color:orange;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
</div>
<div class="one">
<label style="color:black;font-size:14px;margin-bottom:0px">【卫星厅ESD状态】</label>
</div>
<div class="two">
<div>
<label style="width:38%;color:forestgreen;font-size:13px;margin-bottom:2px;margin-right: 40px;">正常</label>
<label id="threehz1" style="width:50%;color:forestgreen;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:red;font-size:13px;margin-bottom:2px;margin-right: 40px;">报警</label>
<label id="threehz2" style="width:50%;color:red;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
<div>
<label style="width:38%;color:orange;font-size:13px;margin-bottom:2px;margin-right: 40px;">故障</label>
<label id="threehz3" style="width:50%;color:orange;font-size:13px;margin-bottom:2px">--- 处</label>
</div>
</div>
<div class="one">
<input id="addMarker" type="button" class="btn" onclick="updateMarker()" value="重新加载地图" style="border: 1px solid #25A5F7;color:#25A5F7;border-radius:21px;padding:5px;">
</div>
</div>
<div class="box">
<button class="loadIcon">加载标记</button>
<button class="deleteIcon">清除标记</button>
<button class="searchIcon">搜索标记</button>
<button class="changeIcon">更换图标</button>
</div>
<div class="rightClick" style="display:none">
<button class="layui-btn layui-btn-primary layui-border-red">删除</button>
</div>
<script>
// 重新加载地图（按钮）
function updateMarker() {
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(121.80241493095221, 31.160384620628097, 121.81142548997911, 31.1382970761047), // 西 南 东 北
orientation: {
heading: self.Cesium.Math.toRadians(0.0),
pitch: self.Cesium.Math.toRadians(-90), // 初始化角度
roll: self.Cesium.Math.toRadians(90)
},
});
}
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(121.794692, 31.107355, 121.807566, 31.175087);
// 初始化地图
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
infoBox: false, // 隐藏点击要素之后显示的信息窗口
sceneModePicker: false, // 隐藏场景模式选择控件
selectionIndicator: false, // 显示实体对象选择框，默认true
timeline: false, // 隐藏时间线控件
navigationHelpButton: false, // 隐藏帮助按钮
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
shouldAnimate: true, // 开启动画自动播放
sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
requestRenderMode: false, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
// 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
// orderIndependentTranslucency: false, //cesium背景设置为透明
maximumRenderTimeChange: Infinity,
// 混合地图（卫星）
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'gaoDeMap/gaode/mapabc/satellite/{z}/{x}/{y}.jpg',
fileExtension: "jpg",
enablePickFeatures: false,
maximumLevel: 19
}),
});
// 混合地图（路网）
var arcgis_blue = viewer.scene.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url:'gaoDeMap/gaode/mapabc/overlay/{z}/{x}/{y}.png',
fileExtension : "png"
})
);
viewer.cesiumWidget.creditContainer.style.display = 'none';//隐藏ceisum标识
viewer.scene.screenSpaceCameraController.maximumZoomDistance =10000;//最小缩放限制
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH];
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH, Cesium.CameraEventType.RIGHT_DRAG];
// 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(0);
// viewer.camera.twistRight(Cesium.Math.toDegrees(0.1).toFixed(2)); //开场动漫旋转角度
var options = {};
options.defaultResetView = new Cesium.Cartographic(Cesium.Math.toRadians(114), Cesium.Math.toRadians(33), 400);
// Only the compass will show on the map
options.enableCompass = true;
options.enableZoomControls = true;
options.enableDistanceLegend = true;
options.enableCompassOuterRing = false;
viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(121.79910863127935, 31.163669242651107 , 121.81338528273669, 31.127197075410336), // 西 南 东 北
orientation: {
heading: self.Cesium.Math.toRadians(0.0),
pitch: self.Cesium.Math.toRadians(-90), // 初始化角度
roll: self.Cesium.Math.toRadians(90)
},
});
// 鼠标事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// 加载标记
$(document).on('click', '.loadIcon', function () {
set_bj(pos)
})
// 删除标记
$(document).on('click', '.deleteIcon', function () {
del_bj()
})
// 搜索标记
$(document).on('click', '.searchIcon', function () {
search_bj(search)
})
// 更改图标
$(document).on('click', '.changeIcon', function () {
change_bj(change)
})
// 顶部右侧工具栏显隐
$(function () {
$(document).on('click', '.map-tool-btn', function () {
if ($(this).children('.layui-icon').hasClass('layui-icon-right')) {
$(this).children('.layui-icon').attr('class', 'layui-icon layui-icon-left')
$('.map-tool-item').fadeIn()
} else {
$(this).children('.layui-icon').attr('class', 'layui-icon layui-icon-right')
$('.map-tool-item').fadeOut()
}
});
})
// 更改图标
let change = 'esd1001,1' // 数据
function change_bj(change) {
let data = change.split(',')
viewer.entities.values.forEach(item => {
if(item.label.text._value === data[0]){
let list = []
list.push(item)
if (data[1] == '1') {
list[0].billboard.image._value = '/ESD/ESD1.png'
} else if(data[1] == '2') {
list[0].billboard.image._value = '/ESD/ESD2.gif'
} else if(data[1] == '3') {
list[0].billboard.image._value = '/ESD/ESD3.gif'
}
}
})
}
// 搜索标记点
let search = 'esd1001' // 数据
function search_bj(search) {
viewer.entities.values.forEach(item => {
if(item.label.text._value === search){
let list = []
list.push(item)
let position = list[0].position._value
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(lng, lat, 1500.0),
orientation: {
heading: self.Cesium.Math.toRadians(0.0),
pitch: self.Cesium.Math.toRadians(-90), // 初始化角度
roll: self.Cesium.Math.toRadians(90)
},
});
}
})
}
// 删除标记
function del_bj(){
for (var i = viewer.entities.values.length - 1; i >= 0; i--) {
viewer.entities.remove(viewer.entities.values[i])
}
}
// 测试字符串数据
var pos = '121.813301,31.144721R0Resd1001G121.811584,31.14406 R1Resd1002G121.801971,31.15001R2Resd1003G121.851971,31.15201R2Resd1004'
// 加载标记
function set_bj(pos){
let list = pos.split('G')
list.forEach(item => {
let data = []
let listArr = item.split('R')
listArr[0] = listArr[0].split(',').map(Number)
data.push(listArr)
for(let i=0; i<data.length; i++) {
let pos = data[i][0]
let zt = Number(data[i][1])
let name = data[i][2]
var img0='/ESD/ESD2.gif';
var img1='/ESD/ESD1.png';
var img2='/ESD/ESD3.gif';
var postion = {
position: Cesium.Cartesian3.fromDegrees(pos[0],pos[1]),
billboard :{
image: '/img/one.png',
width:40,
height:50,
pixelOffset: new Cesium.Cartesian2(-10, 0),
},
label : {
text : name,
font : '12pt Source Han Sans CN', //字体样式
fillColor:Cesium.Color.BLACK, //字体颜色
backgroundColor:Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
backgroundColor: Cesium.Color.AQUA, // 背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new Cesium.Cartesian2(10,0) //偏移
},
// num:pos[i]
}
if(zt === 0) {
postion.billboard.image = img0
} else if(zt === 1) {
postion.billboard.image = img1
} else if(zt === 2) {
postion.billboard.image = img2
}
// 添加点
viewer.entities.add(postion);
}
})
}
// console.log(viewer.entities.values);
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手