bonus
/
gz_digital_signage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

同步地图显示

This commit is contained in:
BianLzhaoMin 2025-07-14 14:35:48 +08:00
parent 475473a109
commit 1906c8174e
12 changed files with 2545 additions and 3449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/resources/static/img/digitalSignage/gl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/main/resources/static/img/digitalSignage/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

815
src/main/resources/static/js/basic/lineManagement/child/setHighwayLonAndLat.js
View File

@ -7,6 +7,171 @@ let isMap = true; // 是否是地图模式
let markerCount = 0; // 标记点计数器
let markers = []; // 标记点数组
let polylineView = null;
let graphicLayer = null;
let lineList = [];
const mapConfig = {
scene: {
center: {
lat: 31.686288,
lng: 117.229619,
// alt: 11333.9,
// heading: 359.2,
// pitch: -39.5,
alt: 12000, // 高度≈缩放级别
heading: 30, // 旋转30度
pitch: -45, // 俯视角45度
},
highDynamicRange: false, // 关闭HDR（可减少模糊）
scene3DOnly: false,
shadows: false,
removeDblClick: true,
sceneMode: 3,
showSun: true,
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: true,
fog: true,
fxaa: false,
requestRenderMode: false,
globe: {
depthTestAgainstTerrain: false,
baseColor: "#546a53",
showGroundAtmosphere: true,
enableLighting: false,
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableTranslate: true,
enableTilt: true,
enableZoom: true,
enableCollisionDetection: true,
minimumCollisionTerrainHeight: 15000,
},
},
control: {
homeButton: true,
baseLayerPicker: true,
sceneModePicker: true,
vrButton: false,
fullscreenButton: true,
navigationHelpButton: true,
animation: false,
timeline: false,
infoBox: false,
geocoder: false,
selectionIndicator: false,
contextmenu: { hasDefault: false },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: "toolbar", left: "5px" },
distanceLegend: { left: "10px", bottom: "2px" },
locationBar: {
fps: true,
crs: "CGCS2000_GK_Zone_3",
crsDecimal: 0,
template:
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
},
},
templateValues: {
dataServer: "//data.mars3d.cn",
gltfServerUrl: "//data.mars3d.cn/gltf",
},
terrain: {
url: "//data.mars3d.cn/terrain",
show: true,
},
basemaps: [
{ id: 10, name: "地图底图", type: "group" },
{
id: 2021,
pid: 10,
name: "天地图影像",
icon: "../../../../img/mars-map-img/tdt_img.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "img_d" },
{ name: "注记", type: "tdt", layer: "img_z" },
],
show: true,
},
{
pid: 10,
name: "天地图电子",
icon: "../../../../img/mars-map-img/tdt_vec.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "vec_d" },
{ name: "注记", type: "tdt", layer: "vec_z" },
],
},
{
pid: 10,
name: "高德影像",
type: "group",
icon: "../../../../img/mars-map-img/gaode_img.png",
layers: [
{ name: "底图", type: "gaode", layer: "img_d" },
{ name: "注记", type: "gaode", layer: "img_z" },
],
},
{
pid: 10,
name: "高德电子",
type: "gaode",
icon: "../../../../img/mars-map-img/gaode_vec.png",
layer: "vec",
},
{
pid: 10,
name: "百度影像",
type: "group",
icon: "../../../../img/mars-map-img/bd-img.png",
layers: [
{ name: "底图", type: "baidu", layer: "img_d" },
{ name: "注记", type: "baidu", layer: "img_z" },
],
},
{
pid: 10,
name: "百度电子",
icon: "../../../../img/mars-map-img/bd-vec.png",
type: "baidu",
layer: "vec",
},
{
pid: 10,
name: "腾讯影像",
icon: "../../../../img/mars-map-img/tencent_img.png",
type: "group",
layers: [
{ name: "底图", type: "tencent", layer: "img_d" },
{ name: "注记", type: "tencent", layer: "img_z" },
],
},
{
pid: 10,
name: "腾讯电子",
icon: "../../../../img/mars-map-img/tencent_vec.png",
type: "tencent",
layer: "vec",
},
{
pid: 10,
name: "ArcGIS影像",
icon: "../../../../img/mars-map-img/esriWorldImagery.png",
type: "xyz",
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
enablePickFeatures: false,
},
],
};
function setParams(obj) {
objParams = JSON.parse(obj);
@ -73,136 +238,192 @@ function initData() {
// 百度地图初始化
function initMap(list) {
if (map) {
map = null;
// if (map) {
// map = null;
// }
// map = new BMapGL.Map("map-box");
// // 以第一个点为中心初始化地图
// map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
// map.setTilt(65); //设置地图的倾斜角度
// map.enableScrollWheelZoom(true); // 启用滚轮缩放
// // 设置显示3D建筑物
// map.setDisplayOptions({
// building: true, // 显示3D建筑物
// indoor: false,
// poi: true,
// });
// var navigationControl = new BMapGL.NavigationControl3D();
// map.addControl(navigationControl);
// // 每次初始化的时候清除所有标点以及线
// map.clearOverlays();
// var styleJson = [
// // 隐藏道路
// {
// featureType: "highway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "arterial",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "local",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "railway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// // 保留背景、水域、绿地等（避免地图变空白）
// {
// featureType: "background",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "water",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "green",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// // 保留标点和文字（避免自定义点被隐藏）
// {
// featureType: "point",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "label",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// ];
// if (isMap) {
// // map.setMapType(BMAP_EARTH_MAP); // 地球模式
// map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
// /*map.setDisplayOptions({
// poiText: false, // 隐藏POI文字
// poiIcon: false, // 隐藏POI图标
// building: false, // 隐藏建筑物
// });*/
// } else {
// map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// // 增加不是纯白的背景色
// map.setMapStyleV2({
// styleJson: [
// {
// featureType: "background",
// elementType: "all",
// stylers: { color: "#f5f5f5" },
// },
// ],
// });
// }
// if (isMap) {
// map.setMapStyleV2({
// styleJson,
// });
// }
// initTowerLine(list);
// if (objParams.points) {
// let points = JSON.parse(objParams.points);
// $.each(points, function (i, item) {
// addMarker(item.lng, item.lat);
// });
// viewPointLine();
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// } else {
// // 点击地图添加标记
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// }
if (!mars3d.Util.webglreport()) {
mars3d.Util.webglerror();
return;
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
map.setTilt(65); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
let intLng = "";
let intLat = "";
if (list.length > 0) {
intLng = list[Math.floor(list.length / 2)].lon;
intLat = list[Math.floor(list.length / 2)].lat;
}
// 设置显示3D建筑物
map.setDisplayOptions({
building: true, // 显示3D建筑物
indoor: false,
poi: true,
// 3. 初始化新地图
mapConfig.scene.center.lat = intLat || 31.686288;
mapConfig.scene.center.lng = intLng || 117.229619;
map = new mars3d.Map("map-box", mapConfig);
// 4. 创建新的图形图层
graphicLayer = new mars3d.layer.GraphicLayer();
// graphicLayer2 = new mars3d.layer.GraphicLayer();
const centerPoint = [intLng, intLat];
map.flyToPoint(centerPoint, {
radius: 5000, // 可视范围半径（米）
duration: 5, // 飞行时间（秒）
heading: 0, // 视角方向（0-360度）
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
});
var navigationControl = new BMapGL.NavigationControl3D();
map.addControl(navigationControl);
// 每次初始化的时候清除所有标点以及线
map.clearOverlays();
var styleJson = [
// 隐藏道路
{
featureType: "highway",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "arterial",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "local",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "railway",
elementType: "all",
stylers: { visibility: "off" },
},
map.addLayer(graphicLayer);
// 保留背景、水域、绿地等（避免地图变空白）
{
featureType: "background",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "water",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "green",
elementType: "all",
stylers: { visibility: "on" },
},
// 保留标点和文字（避免自定义点被隐藏）
{
featureType: "point",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "label",
elementType: "all",
stylers: { visibility: "on" },
},
];
if (isMap) {
// map.setMapType(BMAP_EARTH_MAP); // 地球模式
map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
/*map.setDisplayOptions({
poiText: false, // 隐藏POI文字
poiIcon: false, // 隐藏POI图标
building: false, // 隐藏建筑物
});*/
} else {
map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// 增加不是纯白的背景色
map.setMapStyleV2({
styleJson: [
{
featureType: "background",
elementType: "all",
stylers: { color: "#f5f5f5" },
},
],
});
}
if (isMap) {
map.setMapStyleV2({
styleJson,
});
}
// 先把杆塔进行标点 然后连线
initTowerLine(list);
if (objParams.points) {
let points = JSON.parse(objParams.points);
$.each(points, function (i, item) {
addMarker(item.lng, item.lat);
});
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
} else {
// 点击地图添加标记
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
}
map.on(mars3d.EventType.click, function (event) {
// 1. 获取点击位置的经纬度坐标
const cartesian = event.cartesian; // 笛卡尔坐标
if (!cartesian) return;
// // 将笛卡尔坐标转换为经纬度
const position = mars3d.LngLatPoint.fromCartesian(cartesian);
const lng = position.lng; // 经度
const lat = position.lat; // 纬度
addMarker(lng, lat);
});
}
// 添加点坐标
function addMarker(lng, lat) {
console.log("markers标点集合", markers);
var point = new BMapGL.Point(lng, lat);
// 创建点标记
var marker = new BMapGL.Marker(point);
// 添加到地图
map.addOverlay(marker);
// console.log("markers标点集合", markers);
// var point = new BMapGL.Point(lng, lat);
// // 创建点标记
// var marker = new BMapGL.Marker(point);
// // 添加到地图
// map.addOverlay(marker);
// 创建标签
// // 创建标签
// 2025-06-10 修改第一个标点名称为索道口
let markerName = "";
if (markers.length === 0) {
@ -210,117 +431,231 @@ function addMarker(lng, lat) {
} else {
markerName = "点" + (markerCount + 1);
}
var label = new BMapGL.Label(markerName, {
position: point,
offset: new BMapGL.Size(10, -30),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
// 存储标记和标签
markers.push({
marker: marker,
label: label,
point: point,
});
console.log(markers);
// var label = new BMapGL.Label(markerName, {
// position: point,
// offset: new BMapGL.Size(10, -30),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// // 存储标记和标签
// markers.push({
// marker: marker,
// label: label,
// point: point,
// });
// console.log(markers);
// 更新计数器
markerCount++;
const billboard = new mars3d.graphic.BillboardEntity({
position: [lng, lat, 1000],
style: {
image: "../../../../img/digitalSignage/gl.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: markerCount,
name: markerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [lng, lat],
style: {
html: `<div class="tower-label">${markerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
markers.push({
lng: lng,
lat: lat,
billboard: billboard,
label: label2,
});
}
// 杆塔连线
function initTowerLine(points) {
// 存储所有点的坐标用于连线
var linePoints = [];
// 添加点覆盖物和标签
points.forEach(function (item, index) {
var point = new BMapGL.Point(item.lon, item.lat);
linePoints.push(point); // 添加到连线数组
// 创建点标记
var icon = new BMapGL.Icon(
"../../../../img/synthesisQuery/tower.png",
new BMapGL.Size(30, 66),
{
// 图标定位点
anchor: new BMapGL.Size(15, 66),
}
);
var marker = new BMapGL.Marker(point, { icon: icon });
map.addOverlay(marker);
// 创建标签
var label = new BMapGL.Label(item.towerName, {
position: point,
offset: new BMapGL.Size(20, -60),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
});
// 创建连线
var polyline = new BMapGL.Polyline(linePoints, {
strokeColor: "#FF0305",
strokeWeight: 6,
strokeOpacity: 0.8,
});
map.addOverlay(polyline);
// 可选：自动调整视图以包含所有点
map.setViewport(linePoints);
// 2. 获取视口边界和中心点
var bounds = map.getBounds();
var center = bounds.getCenter();
// 3. 计算视口距离
var viewportDistance = Math.max(
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
),
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
)
);
// 4. 设置3D参数
var zoom = map.getZoom();
var newTilt = 65;
var newHeading = 30;
// // 存储所有点的坐标用于连线
// var linePoints = [];
// // 添加点覆盖物和标签
// points.forEach(function (item, index) {
// var point = new BMapGL.Point(item.lon, item.lat);
// linePoints.push(point); // 添加到连线数组
// // 创建点标记
// var icon = new BMapGL.Icon(
// "../../../../img/synthesisQuery/tower.png",
// new BMapGL.Size(30, 66),
// {
// // 图标定位点
// anchor: new BMapGL.Size(15, 66),
// }
// );
// var marker = new BMapGL.Marker(point, { icon: icon });
// map.addOverlay(marker);
// // 创建标签
// var label = new BMapGL.Label(item.towerName, {
// position: point,
// offset: new BMapGL.Size(20, -60),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// });
// // 创建连线
// var polyline = new BMapGL.Polyline(linePoints, {
// strokeColor: "#FF0305",
// strokeWeight: 6,
// strokeOpacity: 0.8,
// });
// map.addOverlay(polyline);
// // 可选：自动调整视图以包含所有点
// map.setViewport(linePoints);
// // 2. 获取视口边界和中心点
// var bounds = map.getBounds();
// var center = bounds.getCenter();
// // 3. 计算视口距离
// var viewportDistance = Math.max(
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
// ),
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
// )
// );
// // 4. 设置3D参数
// var zoom = map.getZoom();
// var newTilt = 65;
// var newHeading = 30;
// 5. 应用3D视角
map.setTilt(newTilt);
map.setHeading(newHeading);
// // 5. 应用3D视角
// map.setTilt(newTilt);
// map.setHeading(newHeading);
// 6. 稍微缩小以确保所有点在3D视角下可见
setTimeout(function () {
map.setZoom(zoom - 1);
}, 100);
// // 6. 稍微缩小以确保所有点在3D视角下可见
// setTimeout(function () {
// map.setZoom(zoom - 1);
// }, 100);
points.forEach((item, index) => {
const billboard = new mars3d.graphic.BillboardEntity({
position: [item.lon, item.lat, 1000],
style: {
image: "../../../../img/digitalSignage/icon_three_new.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: index,
name: item.towerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [item.lon, item.lat],
style: {
html: `<div class="tower-label">${item.towerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
});
for (let i = 0; i < points.length - 1; i++) {
const startPoint = points[i];
const endPoint = points[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lon, startPoint.lat],
[endPoint.lon, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#FF0305", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
}
}
// 清除所有标点
document.getElementById("clearMarkers").addEventListener("click", function () {
markers.forEach(function (item) {
map.removeOverlay(item.marker);
map.removeOverlay(item.label);
// map.removeOverlay(item.marker);
// map.removeOverlay(item.label);
graphicLayer.removeGraphic(item.billboard);
graphicLayer.removeGraphic(item.label);
});
markers = [];
console.log("markers标点集合", markers);
markerCount = 0;
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let frameId = parent.document
@ -338,22 +673,58 @@ function viewPointLine() {
if (markers && markers.length === 0) {
return layer.msg("请先创建点位", { icon: 7 });
}
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// 移除旧的索道线段 不要影响杆塔线段
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let points = [];
$.each(markers, function (index, item) {
points.push(item.point);
});
// 2. 创建折线连接这些点位
var polyline = new BMapGL.Polyline(points, {
strokeColor: "#0C14CA", // 线颜色
strokeWeight: 4, // 线宽
strokeOpacity: 0.8, // 线透明度
});
polylineView = polyline;
map.addOverlay(polyline);
for (let i = 0; i < markers.length - 1; i++) {
const startPoint = markers[i];
const endPoint = markers[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lng, startPoint.lat],
[endPoint.lng, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#0C14CA", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
lineList.push(polyline);
}
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
// let points = [];
// $.each(markers, function (index, item) {
// points.push(item.point);
// });
// // 2. 创建折线连接这些点位
// var polyline = new BMapGL.Polyline(points, {
// strokeColor: "#0C14CA", // 线颜色
// strokeWeight: 4, // 线宽
// strokeOpacity: 0.8, // 线透明度
// });
// polylineView = polyline;
// map.addOverlay(polyline);
// 点击地图添加标记
// 2025-06-10 移除点击地图添加标记 解决连线之后 再次标点时标点展示异常问题
// map.addEventListener("click", function (e) {
@ -373,8 +744,10 @@ function saveData() {
let points = [];
$.each(markers, function (index, item) {
points.push({
lng: item.point.lng,
lat: item.point.lat,
// lng: item.point.lng,
// lat: item.point.lat,
lng: item.lng,
lat: item.lat,
sort: index + 1,
});
});

826
src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js
View File

@ -7,6 +7,173 @@ let isMap = true; // 是否是地图模式
let markerCount = 0; // 标记点计数器
let markers = []; // 标记点数组
let polylineView = null;
let graphicLayer = null;
let graphicLayer2 = null;
let lineList = [];
const mapConfig = {
scene: {
center: {
lat: 31.686288,
lng: 117.229619,
// alt: 11333.9,
// heading: 359.2,
// pitch: -39.5,
alt: 12000, // 高度≈缩放级别
heading: 30, // 旋转30度
pitch: -45, // 俯视角45度
},
highDynamicRange: false, // 关闭HDR（可减少模糊）
scene3DOnly: false,
shadows: false,
removeDblClick: true,
sceneMode: 3,
showSun: true,
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: true,
fog: true,
fxaa: false,
requestRenderMode: false,
globe: {
depthTestAgainstTerrain: false,
baseColor: "#546a53",
showGroundAtmosphere: true,
enableLighting: false,
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableTranslate: true,
enableTilt: true,
enableZoom: true,
enableCollisionDetection: true,
minimumCollisionTerrainHeight: 15000,
},
},
control: {
homeButton: true,
baseLayerPicker: true,
sceneModePicker: true,
vrButton: false,
fullscreenButton: true,
navigationHelpButton: true,
animation: false,
timeline: false,
infoBox: false,
geocoder: false,
selectionIndicator: false,
contextmenu: { hasDefault: false },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: "toolbar", left: "5px" },
distanceLegend: { left: "10px", bottom: "2px" },
locationBar: {
fps: true,
crs: "CGCS2000_GK_Zone_3",
crsDecimal: 0,
template:
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
},
},
templateValues: {
dataServer: "//data.mars3d.cn",
gltfServerUrl: "//data.mars3d.cn/gltf",
},
terrain: {
url: "//data.mars3d.cn/terrain",
show: true,
},
basemaps: [
{ id: 10, name: "地图底图", type: "group" },
{
id: 2021,
pid: 10,
name: "天地图影像",
icon: "../../../../img/mars-map-img/tdt_img.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "img_d" },
{ name: "注记", type: "tdt", layer: "img_z" },
],
show: true,
},
{
pid: 10,
name: "天地图电子",
icon: "../../../../img/mars-map-img/tdt_vec.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "vec_d" },
{ name: "注记", type: "tdt", layer: "vec_z" },
],
},
{
pid: 10,
name: "高德影像",
type: "group",
icon: "../../../../img/mars-map-img/gaode_img.png",
layers: [
{ name: "底图", type: "gaode", layer: "img_d" },
{ name: "注记", type: "gaode", layer: "img_z" },
],
},
{
pid: 10,
name: "高德电子",
type: "gaode",
icon: "../../../../img/mars-map-img/gaode_vec.png",
layer: "vec",
},
{
pid: 10,
name: "百度影像",
type: "group",
icon: "../../../../img/mars-map-img/bd-img.png",
layers: [
{ name: "底图", type: "baidu", layer: "img_d" },
{ name: "注记", type: "baidu", layer: "img_z" },
],
},
{
pid: 10,
name: "百度电子",
icon: "../../../../img/mars-map-img/bd-vec.png",
type: "baidu",
layer: "vec",
},
{
pid: 10,
name: "腾讯影像",
icon: "../../../../img/mars-map-img/tencent_img.png",
type: "group",
layers: [
{ name: "底图", type: "tencent", layer: "img_d" },
{ name: "注记", type: "tencent", layer: "img_z" },
],
},
{
pid: 10,
name: "腾讯电子",
icon: "../../../../img/mars-map-img/tencent_vec.png",
type: "tencent",
layer: "vec",
},
{
pid: 10,
name: "ArcGIS影像",
icon: "../../../../img/mars-map-img/esriWorldImagery.png",
type: "xyz",
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
enablePickFeatures: false,
},
],
};
function setParams(obj) {
objParams = JSON.parse(obj);
@ -73,254 +240,426 @@ function initData() {
// 百度地图初始化
function initMap(list) {
if (map) {
map = null;
// if (map) {
// map = null;
// }
// map = new BMapGL.Map("map-box");
// // 以第一个点为中心初始化地图
// map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
// map.setTilt(65); //设置地图的倾斜角度
// map.enableScrollWheelZoom(true); // 启用滚轮缩放
// // 设置显示3D建筑物
// map.setDisplayOptions({
// building: true, // 显示3D建筑物
// indoor: false,
// poi: true,
// });
// var navigationControl = new BMapGL.NavigationControl3D();
// map.addControl(navigationControl);
// // 每次初始化的时候清除所有标点以及线
// map.clearOverlays();
// var styleJson = [
// // 隐藏道路
// {
// featureType: "highway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "arterial",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "local",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "railway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// // 保留背景、水域、绿地等（避免地图变空白）
// {
// featureType: "background",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "water",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "green",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// // 保留标点和文字（避免自定义点被隐藏）
// {
// featureType: "point",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "label",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// ];
// if (isMap) {
// // map.setMapType(BMAP_EARTH_MAP); // 地球模式
// map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
// /*map.setDisplayOptions({
// poiText: false, // 隐藏POI文字
// poiIcon: false, // 隐藏POI图标
// building: false, // 隐藏建筑物
// });*/
// } else {
// map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// // 增加不是纯白的背景色
// map.setMapStyleV2({
// styleJson: [
// {
// featureType: "background",
// elementType: "all",
// stylers: { color: "#f5f5f5" },
// },
// ],
// });
// }
// if (isMap) {
// map.setMapStyleV2({
// styleJson,
// });
// }
// initTowerLine(list);
// if (objParams.points) {
// let points = JSON.parse(objParams.points);
// $.each(points, function (i, item) {
// addMarker(item.lng, item.lat);
// });
// viewPointLine();
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// } else {
// // 点击地图添加标记
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// }
if (!mars3d.Util.webglreport()) {
mars3d.Util.webglerror();
return;
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
map.setTilt(65); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
let intLng = "";
let intLat = "";
if (list.length > 0) {
intLng = list[Math.floor(list.length / 2)].lon;
intLat = list[Math.floor(list.length / 2)].lat;
}
// 设置显示3D建筑物
map.setDisplayOptions({
building: true, // 显示3D建筑物
indoor: false,
poi: true,
// 3. 初始化新地图
mapConfig.scene.center.lat = intLat || 31.686288;
mapConfig.scene.center.lng = intLng || 117.229619;
map = new mars3d.Map("map-box", mapConfig);
// 4. 创建新的图形图层
graphicLayer = new mars3d.layer.GraphicLayer();
// graphicLayer2 = new mars3d.layer.GraphicLayer();
const centerPoint = [intLng, intLat];
map.flyToPoint(centerPoint, {
radius: 5000, // 可视范围半径（米）
duration: 5, // 飞行时间（秒）
heading: 0, // 视角方向（0-360度）
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
});
var navigationControl = new BMapGL.NavigationControl3D();
map.addControl(navigationControl);
// 每次初始化的时候清除所有标点以及线
map.clearOverlays();
var styleJson = [
// 隐藏道路
{
featureType: "highway",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "arterial",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "local",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "railway",
elementType: "all",
stylers: { visibility: "off" },
},
map.addLayer(graphicLayer);
// 保留背景、水域、绿地等（避免地图变空白）
{
featureType: "background",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "water",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "green",
elementType: "all",
stylers: { visibility: "on" },
},
// 保留标点和文字（避免自定义点被隐藏）
{
featureType: "point",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "label",
elementType: "all",
stylers: { visibility: "on" },
},
];
if (isMap) {
// map.setMapType(BMAP_EARTH_MAP); // 地球模式
map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
/*map.setDisplayOptions({
poiText: false, // 隐藏POI文字
poiIcon: false, // 隐藏POI图标
building: false, // 隐藏建筑物
});*/
} else {
map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// 增加不是纯白的背景色
map.setMapStyleV2({
styleJson: [
{
featureType: "background",
elementType: "all",
stylers: { color: "#f5f5f5" },
},
],
});
}
if (isMap) {
map.setMapStyleV2({
styleJson,
});
}
// 先把杆塔进行标点 然后连线
initTowerLine(list);
if (objParams.points) {
let points = JSON.parse(objParams.points);
$.each(points, function (i, item) {
addMarker(item.lng, item.lat);
});
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
} else {
// 点击地图添加标记
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
}
map.on(mars3d.EventType.click, function (event) {
// 1. 获取点击位置的经纬度坐标
const cartesian = event.cartesian; // 笛卡尔坐标
if (!cartesian) return;
// // 将笛卡尔坐标转换为经纬度
const position = mars3d.LngLatPoint.fromCartesian(cartesian);
const lng = position.lng; // 经度
const lat = position.lat; // 纬度
console.log("点击位置坐标-----：", lng, lat);
addMarker(lng, lat);
});
}
// 添加点坐标
function addMarker(lng, lat) {
console.log("markers标点集合", markers);
var point = new BMapGL.Point(lng, lat);
// 创建点标记
var marker = new BMapGL.Marker(point);
// 添加到地图
map.addOverlay(marker);
// console.log("markers标点集合", markers);
// var point = new BMapGL.Point(lng, lat);
// // 创建点标记
// var marker = new BMapGL.Marker(point);
// // 添加到地图
// map.addOverlay(marker);
// 创建标签
// 2025-06-10 修改第一个标点名称为索道口
// // 创建标签
// // 2025-06-10 修改第一个标点名称为索道口
let markerName = "";
if (markers.length === 0) {
markerName = "索道口";
} else {
markerName = "点" + (markerCount + 1);
}
var label = new BMapGL.Label(markerName, {
position: point,
offset: new BMapGL.Size(10, -30),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
// 存储标记和标签
markers.push({
marker: marker,
label: label,
point: point,
});
console.log(markers);
// 更新计数器
// var label = new BMapGL.Label(markerName, {
// position: point,
// offset: new BMapGL.Size(10, -30),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// // 存储标记和标签
// markers.push({
// marker: marker,
// label: label,
// point: point,
// });
// console.log(markers);
// // 更新计数器
markerCount++;
const billboard = new mars3d.graphic.BillboardEntity({
position: [lng, lat, 1000],
style: {
image: "../../../../img/digitalSignage/sd.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: markerCount,
name: markerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [lng, lat],
style: {
html: `<div class="tower-label">${markerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
markers.push({
lng: lng,
lat: lat,
billboard: billboard,
label: label2,
});
}
// 杆塔连线
function initTowerLine(points) {
// 存储所有点的坐标用于连线
var linePoints = [];
// 添加点覆盖物和标签
points.forEach(function (item, index) {
var point = new BMapGL.Point(item.lon, item.lat);
linePoints.push(point); // 添加到连线数组
// 创建点标记
var icon = new BMapGL.Icon(
"../../../../img/synthesisQuery/tower.png",
new BMapGL.Size(30, 66),
{
// 图标定位点
anchor: new BMapGL.Size(15, 66),
}
);
var marker = new BMapGL.Marker(point, { icon: icon });
map.addOverlay(marker);
// 创建标签
var label = new BMapGL.Label(item.towerName, {
position: point,
offset: new BMapGL.Size(20, -60),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
});
// 创建连线
var polyline = new BMapGL.Polyline(linePoints, {
strokeColor: "#FF0305",
strokeWeight: 6,
strokeOpacity: 0.8,
});
map.addOverlay(polyline);
// 可选：自动调整视图以包含所有点
map.setViewport(linePoints);
// 2. 获取视口边界和中心点
var bounds = map.getBounds();
var center = bounds.getCenter();
// 3. 计算视口距离
var viewportDistance = Math.max(
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
),
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
)
);
// 4. 设置3D参数
var zoom = map.getZoom();
var newTilt = 65;
var newHeading = 30;
// // 存储所有点的坐标用于连线
// var linePoints = [];
// // 添加点覆盖物和标签
// points.forEach(function (item, index) {
// var point = new BMapGL.Point(item.lon, item.lat);
// linePoints.push(point); // 添加到连线数组
// // 创建点标记
// var icon = new BMapGL.Icon(
// "../../../../img/synthesisQuery/tower.png",
// new BMapGL.Size(30, 66),
// {
// // 图标定位点
// anchor: new BMapGL.Size(15, 66),
// }
// );
// var marker = new BMapGL.Marker(point, { icon: icon });
// map.addOverlay(marker);
// // 创建标签
// var label = new BMapGL.Label(item.towerName, {
// position: point,
// offset: new BMapGL.Size(20, -60),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// });
// // 创建连线
// var polyline = new BMapGL.Polyline(linePoints, {
// strokeColor: "#FF0305",
// strokeWeight: 6,
// strokeOpacity: 0.8,
// });
// map.addOverlay(polyline);
// // 可选：自动调整视图以包含所有点
// map.setViewport(linePoints);
// // 2. 获取视口边界和中心点
// var bounds = map.getBounds();
// var center = bounds.getCenter();
// // 3. 计算视口距离
// var viewportDistance = Math.max(
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
// ),
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
// )
// );
// // 4. 设置3D参数
// var zoom = map.getZoom();
// var newTilt = 65;
// var newHeading = 30;
// 5. 应用3D视角
map.setTilt(newTilt);
map.setHeading(newHeading);
// // 5. 应用3D视角
// map.setTilt(newTilt);
// map.setHeading(newHeading);
// 6. 稍微缩小以确保所有点在3D视角下可见
setTimeout(function () {
map.setZoom(zoom - 1);
}, 100);
// // 6. 稍微缩小以确保所有点在3D视角下可见
// setTimeout(function () {
// map.setZoom(zoom - 1);
// }, 100);
points.forEach((item, index) => {
const billboard = new mars3d.graphic.BillboardEntity({
position: [item.lon, item.lat, 1000],
style: {
image: "../../../../img/digitalSignage/icon_three_new.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: index,
name: item.towerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [item.lon, item.lat],
style: {
html: `<div class="tower-label">${item.towerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
});
for (let i = 0; i < points.length - 1; i++) {
const startPoint = points[i];
const endPoint = points[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lon, startPoint.lat],
[endPoint.lon, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#FF0305", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
}
}
// 清除所有标点
document.getElementById("clearMarkers").addEventListener("click", function () {
markers.forEach(function (item) {
map.removeOverlay(item.marker);
map.removeOverlay(item.label);
// map.removeOverlay(item.marker);
// map.removeOverlay(item.label);
graphicLayer.removeGraphic(item.billboard);
graphicLayer.removeGraphic(item.label);
});
markers = [];
console.log("markers标点集合", markers);
markerCount = 0;
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let frameId = parent.document
@ -338,22 +677,58 @@ function viewPointLine() {
if (markers && markers.length === 0) {
return layer.msg("请先创建点位", { icon: 7 });
}
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// 移除旧的索道线段 不要影响杆塔线段
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let points = [];
$.each(markers, function (index, item) {
points.push(item.point);
});
// 2. 创建折线连接这些点位
var polyline = new BMapGL.Polyline(points, {
strokeColor: "#0C14CA", // 线颜色
strokeWeight: 4, // 线宽
strokeOpacity: 0.8, // 线透明度
});
polylineView = polyline;
map.addOverlay(polyline);
for (let i = 0; i < markers.length - 1; i++) {
const startPoint = markers[i];
const endPoint = markers[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lng, startPoint.lat],
[endPoint.lng, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#0C14CA", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
lineList.push(polyline);
}
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
// let points = [];
// $.each(markers, function (index, item) {
// points.push(item.point);
// });
// // 2. 创建折线连接这些点位
// var polyline = new BMapGL.Polyline(points, {
// strokeColor: "#0C14CA", // 线颜色
// strokeWeight: 4, // 线宽
// strokeOpacity: 0.8, // 线透明度
// });
// polylineView = polyline;
// map.addOverlay(polyline);
// 点击地图添加标记
// 2025-06-10 移除点击地图添加标记 解决连线之后 再次标点时标点展示异常问题
// map.addEventListener("click", function (e) {
@ -372,9 +747,14 @@ function saveData() {
}
let points = [];
$.each(markers, function (index, item) {
// points.push({
// lng: item.point.lng,
// lat: item.point.lat,
// sort: index + 1,
// });
points.push({
lng: item.point.lng,
lat: item.point.lat,
lng: item.lng,
lat: item.lat,
sort: index + 1,
});
});

826
src/main/resources/static/js/basic/lineManagement/child/setQzSiteLonAndLat.js
View File

@ -7,6 +7,171 @@ let isMap = true; // 是否是地图模式
let markerCount = 0; // 标记点计数器
let markers = []; // 标记点数组
let polylineView = null;
let graphicLayer = null;
let lineList = [];
let graphicLayerList = [];
const mapConfig = {
scene: {
center: {
lat: 31.686288,
lng: 117.229619,
// alt: 11333.9,
// heading: 359.2,
// pitch: -39.5,
alt: 12000, // 高度≈缩放级别
heading: 30, // 旋转30度
pitch: -45, // 俯视角45度
},
highDynamicRange: false, // 关闭HDR（可减少模糊）
scene3DOnly: false,
shadows: false,
removeDblClick: true,
sceneMode: 3,
showSun: true,
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: true,
fog: true,
fxaa: false,
requestRenderMode: false,
globe: {
depthTestAgainstTerrain: false,
baseColor: "#546a53",
showGroundAtmosphere: true,
enableLighting: false,
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableTranslate: true,
enableTilt: true,
enableZoom: true,
enableCollisionDetection: true,
minimumCollisionTerrainHeight: 15000,
},
},
control: {
homeButton: true,
baseLayerPicker: true,
sceneModePicker: true,
vrButton: false,
fullscreenButton: true,
navigationHelpButton: true,
animation: false,
timeline: false,
infoBox: false,
geocoder: false,
selectionIndicator: false,
contextmenu: { hasDefault: false },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: "toolbar", left: "5px" },
distanceLegend: { left: "10px", bottom: "2px" },
locationBar: {
fps: true,
crs: "CGCS2000_GK_Zone_3",
crsDecimal: 0,
template:
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
},
},
templateValues: {
dataServer: "//data.mars3d.cn",
gltfServerUrl: "//data.mars3d.cn/gltf",
},
terrain: {
url: "//data.mars3d.cn/terrain",
show: true,
},
basemaps: [
{ id: 10, name: "地图底图", type: "group" },
{
id: 2021,
pid: 10,
name: "天地图影像",
icon: "../../../../img/mars-map-img/tdt_img.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "img_d" },
{ name: "注记", type: "tdt", layer: "img_z" },
],
show: true,
},
{
pid: 10,
name: "天地图电子",
icon: "../../../../img/mars-map-img/tdt_vec.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "vec_d" },
{ name: "注记", type: "tdt", layer: "vec_z" },
],
},
{
pid: 10,
name: "高德影像",
type: "group",
icon: "../../../../img/mars-map-img/gaode_img.png",
layers: [
{ name: "底图", type: "gaode", layer: "img_d" },
{ name: "注记", type: "gaode", layer: "img_z" },
],
},
{
pid: 10,
name: "高德电子",
type: "gaode",
icon: "../../../../img/mars-map-img/gaode_vec.png",
layer: "vec",
},
{
pid: 10,
name: "百度影像",
type: "group",
icon: "../../../../img/mars-map-img/bd-img.png",
layers: [
{ name: "底图", type: "baidu", layer: "img_d" },
{ name: "注记", type: "baidu", layer: "img_z" },
],
},
{
pid: 10,
name: "百度电子",
icon: "../../../../img/mars-map-img/bd-vec.png",
type: "baidu",
layer: "vec",
},
{
pid: 10,
name: "腾讯影像",
icon: "../../../../img/mars-map-img/tencent_img.png",
type: "group",
layers: [
{ name: "底图", type: "tencent", layer: "img_d" },
{ name: "注记", type: "tencent", layer: "img_z" },
],
},
{
pid: 10,
name: "腾讯电子",
icon: "../../../../img/mars-map-img/tencent_vec.png",
type: "tencent",
layer: "vec",
},
{
pid: 10,
name: "ArcGIS影像",
icon: "../../../../img/mars-map-img/esriWorldImagery.png",
type: "xyz",
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
enablePickFeatures: false,
},
],
};
function setParams(obj) {
objParams = JSON.parse(obj);
@ -73,134 +238,184 @@ function initData() {
// 百度地图初始化
function initMap(list) {
if (map) {
map = null;
// if (map) {
// map = null;
// }
// map = new BMapGL.Map("map-box");
// // 以第一个点为中心初始化地图
// map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
// map.setTilt(65); //设置地图的倾斜角度
// map.enableScrollWheelZoom(true); // 启用滚轮缩放
// // 设置显示3D建筑物
// map.setDisplayOptions({
// building: true, // 显示3D建筑物
// indoor: false,
// poi: true,
// });
// var navigationControl = new BMapGL.NavigationControl3D();
// map.addControl(navigationControl);
// // 每次初始化的时候清除所有标点以及线
// map.clearOverlays();
// var styleJson = [
// // 隐藏道路
// {
// featureType: "highway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "arterial",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "local",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "railway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// // 保留背景、水域、绿地等（避免地图变空白）
// {
// featureType: "background",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "water",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "green",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// // 保留标点和文字（避免自定义点被隐藏）
// {
// featureType: "point",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "label",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// ];
// if (isMap) {
// // map.setMapType(BMAP_EARTH_MAP); // 地球模式
// map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
// /*map.setDisplayOptions({
// poiText: false, // 隐藏POI文字
// poiIcon: false, // 隐藏POI图标
// building: false, // 隐藏建筑物
// });*/
// } else {
// map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// // 增加不是纯白的背景色
// map.setMapStyleV2({
// styleJson: [
// {
// featureType: "background",
// elementType: "all",
// stylers: { color: "#f5f5f5" },
// },
// ],
// });
// }
// if (isMap) {
// map.setMapStyleV2({
// styleJson,
// });
// }
// initTowerLine(list);
// if (objParams.points) {
// let points = JSON.parse(objParams.points);
// $.each(points, function (i, item) {
// addMarker(item.lng, item.lat);
// });
// viewPointLine();
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// } else {
// // 点击地图添加标记
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// }
if (!mars3d.Util.webglreport()) {
mars3d.Util.webglerror();
return;
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
map.setTilt(65); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
let intLng = "";
let intLat = "";
if (list.length > 0) {
intLng = list[Math.floor(list.length / 2)].lon;
intLat = list[Math.floor(list.length / 2)].lat;
}
// 设置显示3D建筑物
map.setDisplayOptions({
building: true, // 显示3D建筑物
indoor: false,
poi: true,
// 3. 初始化新地图
mapConfig.scene.center.lat = intLat || 31.686288;
mapConfig.scene.center.lng = intLng || 117.229619;
map = new mars3d.Map("map-box", mapConfig);
// 4. 创建新的图形图层
graphicLayer = new mars3d.layer.GraphicLayer();
// graphicLayer2 = new mars3d.layer.GraphicLayer();
const centerPoint = [intLng, intLat];
map.flyToPoint(centerPoint, {
radius: 5000, // 可视范围半径（米）
duration: 5, // 飞行时间（秒）
heading: 0, // 视角方向（0-360度）
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
});
var navigationControl = new BMapGL.NavigationControl3D();
map.addControl(navigationControl);
// 每次初始化的时候清除所有标点以及线
map.clearOverlays();
var styleJson = [
// 隐藏道路
{
featureType: "highway",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "arterial",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "local",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "railway",
elementType: "all",
stylers: { visibility: "off" },
},
map.addLayer(graphicLayer);
// 保留背景、水域、绿地等（避免地图变空白）
{
featureType: "background",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "water",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "green",
elementType: "all",
stylers: { visibility: "on" },
},
// 保留标点和文字（避免自定义点被隐藏）
{
featureType: "point",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "label",
elementType: "all",
stylers: { visibility: "on" },
},
];
if (isMap) {
// map.setMapType(BMAP_EARTH_MAP); // 地球模式
map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
/*map.setDisplayOptions({
poiText: false, // 隐藏POI文字
poiIcon: false, // 隐藏POI图标
building: false, // 隐藏建筑物
});*/
} else {
map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// 增加不是纯白的背景色
map.setMapStyleV2({
styleJson: [
{
featureType: "background",
elementType: "all",
stylers: { color: "#f5f5f5" },
},
],
});
}
if (isMap) {
map.setMapStyleV2({
styleJson,
});
}
// 先把杆塔进行标点 然后连线
initTowerLine(list);
if (objParams.points) {
let points = JSON.parse(objParams.points);
$.each(points, function (i, item) {
addMarker(item.lng, item.lat);
});
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
} else {
// 点击地图添加标记
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
}
map.on(mars3d.EventType.click, function (event) {
// 1. 获取点击位置的经纬度坐标
const cartesian = event.cartesian; // 笛卡尔坐标
if (!cartesian) return;
// // 将笛卡尔坐标转换为经纬度
const position = mars3d.LngLatPoint.fromCartesian(cartesian);
const lng = position.lng; // 经度
const lat = position.lat; // 纬度
console.log("点击位置坐标-----：", lng, lat);
addMarker(lng, lat);
});
}
// 添加点坐标
function addMarker(lng, lat) {
console.log("markers标点集合", markers);
var point = new BMapGL.Point(lng, lat);
// 创建点标记
var marker = new BMapGL.Marker(point);
// 添加到地图
map.addOverlay(marker);
// console.log("markers标点集合", markers);
// var point = new BMapGL.Point(lng, lat);
// // 创建点标记
// var marker = new BMapGL.Marker(point);
// // 添加到地图
// map.addOverlay(marker);
// 创建标签
// 2025-06-10 修改第一个标点名称为索道口
@ -210,109 +425,218 @@ function addMarker(lng, lat) {
// } else {
// markerName = "点" + (markerCount + 1);
// }
var label = new BMapGL.Label(markerName, {
position: point,
offset: new BMapGL.Size(10, -30),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
// 存储标记和标签
markers.push({
marker: marker,
label: label,
point: point,
});
console.log(markers);
// var label = new BMapGL.Label(markerName, {
// position: point,
// offset: new BMapGL.Size(10, -30),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// // 存储标记和标签
// markers.push({
// marker: marker,
// label: label,
// point: point,
// });
// console.log(markers);
// 更新计数器
markerCount++;
const billboard = new mars3d.graphic.BillboardEntity({
position: [lng, lat, 1000],
style: {
image: "../../../../img/digitalSignage/location.png",
width: 20,
height: 20,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: markerCount,
name: markerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [lng, lat],
style: {
html: `<div class="tower-label">${markerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
markers.push({
lng: lng,
lat: lat,
billboard: billboard,
label: label2,
});
}
// 杆塔连线
function initTowerLine(points) {
// 存储所有点的坐标用于连线
var linePoints = [];
// 添加点覆盖物和标签
points.forEach(function (item, index) {
var point = new BMapGL.Point(item.lon, item.lat);
linePoints.push(point); // 添加到连线数组
// 创建点标记
var icon = new BMapGL.Icon(
"../../../../img/synthesisQuery/tower.png",
new BMapGL.Size(30, 66),
{
// 图标定位点
anchor: new BMapGL.Size(15, 66),
}
);
var marker = new BMapGL.Marker(point, { icon: icon });
map.addOverlay(marker);
// 创建标签
var label = new BMapGL.Label(item.towerName, {
position: point,
offset: new BMapGL.Size(20, -60),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
});
// 创建连线
var polyline = new BMapGL.Polyline(linePoints, {
strokeColor: "#FF0305",
strokeWeight: 6,
strokeOpacity: 0.8,
});
map.addOverlay(polyline);
// 可选：自动调整视图以包含所有点
map.setViewport(linePoints);
// 2. 获取视口边界和中心点
var bounds = map.getBounds();
var center = bounds.getCenter();
// 3. 计算视口距离
var viewportDistance = Math.max(
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
),
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
)
);
// 4. 设置3D参数
var zoom = map.getZoom();
var newTilt = 65;
var newHeading = 30;
// var linePoints = [];
// // 添加点覆盖物和标签
// points.forEach(function (item, index) {
// var point = new BMapGL.Point(item.lon, item.lat);
// linePoints.push(point); // 添加到连线数组
// // 创建点标记
// var icon = new BMapGL.Icon(
// "../../../../img/synthesisQuery/tower.png",
// new BMapGL.Size(30, 66),
// {
// // 图标定位点
// anchor: new BMapGL.Size(15, 66),
// }
// );
// var marker = new BMapGL.Marker(point, { icon: icon });
// map.addOverlay(marker);
// // 创建标签
// var label = new BMapGL.Label(item.towerName, {
// position: point,
// offset: new BMapGL.Size(20, -60),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// });
// // 创建连线
// var polyline = new BMapGL.Polyline(linePoints, {
// strokeColor: "#FF0305",
// strokeWeight: 6,
// strokeOpacity: 0.8,
// });
// map.addOverlay(polyline);
// // 可选：自动调整视图以包含所有点
// map.setViewport(linePoints);
// // 2. 获取视口边界和中心点
// var bounds = map.getBounds();
// var center = bounds.getCenter();
// // 3. 计算视口距离
// var viewportDistance = Math.max(
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
// ),
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
// )
// );
// // 4. 设置3D参数
// var zoom = map.getZoom();
// var newTilt = 65;
// var newHeading = 30;
// 5. 应用3D视角
map.setTilt(newTilt);
map.setHeading(newHeading);
// // 5. 应用3D视角
// map.setTilt(newTilt);
// map.setHeading(newHeading);
// 6. 稍微缩小以确保所有点在3D视角下可见
setTimeout(function () {
map.setZoom(zoom - 1);
}, 100);
// // 6. 稍微缩小以确保所有点在3D视角下可见
// setTimeout(function () {
// map.setZoom(zoom - 1);
// }, 100);
points.forEach((item, index) => {
const billboard = new mars3d.graphic.BillboardEntity({
position: [item.lon, item.lat, 1000],
style: {
image: "../../../../img/digitalSignage/icon_three_new.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: index,
name: item.towerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [item.lon, item.lat],
style: {
html: `<div class="tower-label">${item.towerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
});
for (let i = 0; i < points.length - 1; i++) {
const startPoint = points[i];
const endPoint = points[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lon, startPoint.lat],
[endPoint.lon, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#FF0305", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
}
}
// 清除所有标点和区域
document.getElementById("clearMarkers").addEventListener("click", function () {
markers.forEach(function (item) {
map.removeOverlay(item.marker);
map.removeOverlay(item.label);
// map.removeOverlay(item.marker);
// map.removeOverlay(item.label);
graphicLayer.removeGraphic(item.billboard);
graphicLayer.removeGraphic(item.label);
});
markers = [];
markerCount = 0;
@ -320,9 +644,16 @@ document.getElementById("clearMarkers").addEventListener("click", function () {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
}
if (polygonView) {
map.removeOverlay(polygonView); // 移除旧的区域
polygonView = null;
// if (polygonView) {
// map.removeOverlay(polygonView); // 移除旧的区域
// polygonView = null;
// }
if (graphicLayerList.length > 0) {
graphicLayerList.forEach((graphic) => {
graphic.remove(); // 移除每个区域
});
graphicLayerList = []; // 清空数组
}
let frameId = parent.document
.getElementById("addDataRopeway")
@ -339,35 +670,67 @@ function viewPointLine() {
if (markers && markers.length === 0) {
return layer.msg("请先创建点位", { icon: 7 });
}
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// 移除旧区域
if (graphicLayerList.length > 0) {
graphicLayerList.forEach((graphic) => {
graphic.remove(); // 移除每个区域
});
graphicLayerList = []; // 清空数组
}
let points = [];
markers.forEach((item) => {
points.push([item.lng, item.lat, 1000]);
lineList.push(item);
});
if (points.length > 0) {
const graphic = new mars3d.graphic.PolygonEntity({
positions: points,
eventParent: false,
style: {
color: "#00FFFF", // 区域填充颜色
opacity: 0.5, // 透明度(0-1)
outline: true, // 是否显示边框
outlineWidth: 2, // 边框宽度(像素)
outlineColor: "#00FFFF", // 边框颜色
clampToGround: true,
},
attr: { remark: "示例区域" },
});
graphicLayer.addGraphic(graphic);
graphicLayerList.push(graphic);
}
console.log("markers", markers);
let points = [];
$.each(markers, function (index, item) {
points.push(item.point);
});
// 2. 创建折线连接这些点位
var polyline = new BMapGL.Polyline(points, {
strokeColor: "#0C14CA", // 线颜色
strokeWeight: 4, // 线宽
strokeOpacity: 0.8, // 线透明度
});
polylineView = polyline;
map.addOverlay(polyline);
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
// 绘制区域
var polygon = new BMapGL.Polygon(points, {
strokeColor: "#00FFFF", // 线颜色
strokeWeight: 4, // 线宽
strokeOpacity: 0.8, // 线透明度
fillColor: "#00FFFF", // 填充颜色
fillOpacity: 0.3, // 填充透明度
});
polygonView = polygon;
map.addOverlay(polygon);
// console.log("markers", markers);
// let points = [];
// $.each(markers, function (index, item) {
// points.push(item.point);
// });
// // 2. 创建折线连接这些点位
// var polyline = new BMapGL.Polyline(points, {
// strokeColor: "#0C14CA", // 线颜色
// strokeWeight: 4, // 线宽
// strokeOpacity: 0.8, // 线透明度
// });
// polylineView = polyline;
// map.addOverlay(polyline);
// // 绘制区域
// var polygon = new BMapGL.Polygon(points, {
// strokeColor: "#00FFFF", // 线颜色
// strokeWeight: 4, // 线宽
// strokeOpacity: 0.8, // 线透明度
// fillColor: "#00FFFF", // 填充颜色
// fillOpacity: 0.3, // 填充透明度
// });
// polygonView = polygon;
// map.addOverlay(polygon);
// 点击地图添加标记
// 2025-06-10 移除点击地图添加标记 解决连线之后 再次标点时标点展示异常问题
// map.addEventListener("click", function (e) {
@ -387,8 +750,11 @@ function saveData() {
let points = [];
$.each(markers, function (index, item) {
points.push({
lng: item.point.lng,
lat: item.point.lat,
// lng: item.point.lng,
// lat: item.point.lat,
lng: item.lng,
lat: item.lat,
sort: index + 1,
});
});

830
src/main/resources/static/js/basic/lineManagement/child/setSpanTowerLonAndLat.js
View File

@ -7,6 +7,171 @@ let isMap = true; // 是否是地图模式
let markerCount = 0; // 标记点计数器
let markers = []; // 标记点数组
let polylineView = null;
let graphicLayer = null;
let lineList = [];
const mapConfig = {
scene: {
center: {
lat: 31.686288,
lng: 117.229619,
// alt: 11333.9,
// heading: 359.2,
// pitch: -39.5,
alt: 12000, // 高度≈缩放级别
heading: 30, // 旋转30度
pitch: -45, // 俯视角45度
},
highDynamicRange: false, // 关闭HDR（可减少模糊）
scene3DOnly: false,
shadows: false,
removeDblClick: true,
sceneMode: 3,
showSun: true,
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: true,
fog: true,
fxaa: false,
requestRenderMode: false,
globe: {
depthTestAgainstTerrain: false,
baseColor: "#546a53",
showGroundAtmosphere: true,
enableLighting: false,
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableTranslate: true,
enableTilt: true,
enableZoom: true,
enableCollisionDetection: true,
minimumCollisionTerrainHeight: 15000,
},
},
control: {
homeButton: true,
baseLayerPicker: true,
sceneModePicker: true,
vrButton: false,
fullscreenButton: true,
navigationHelpButton: true,
animation: false,
timeline: false,
infoBox: false,
geocoder: false,
selectionIndicator: false,
contextmenu: { hasDefault: false },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: "toolbar", left: "5px" },
distanceLegend: { left: "10px", bottom: "2px" },
locationBar: {
fps: true,
crs: "CGCS2000_GK_Zone_3",
crsDecimal: 0,
template:
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
},
},
templateValues: {
dataServer: "//data.mars3d.cn",
gltfServerUrl: "//data.mars3d.cn/gltf",
},
terrain: {
url: "//data.mars3d.cn/terrain",
show: true,
},
basemaps: [
{ id: 10, name: "地图底图", type: "group" },
{
id: 2021,
pid: 10,
name: "天地图影像",
icon: "../../../../img/mars-map-img/tdt_img.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "img_d" },
{ name: "注记", type: "tdt", layer: "img_z" },
],
show: true,
},
{
pid: 10,
name: "天地图电子",
icon: "../../../../img/mars-map-img/tdt_vec.png",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "vec_d" },
{ name: "注记", type: "tdt", layer: "vec_z" },
],
},
{
pid: 10,
name: "高德影像",
type: "group",
icon: "../../../../img/mars-map-img/gaode_img.png",
layers: [
{ name: "底图", type: "gaode", layer: "img_d" },
{ name: "注记", type: "gaode", layer: "img_z" },
],
},
{
pid: 10,
name: "高德电子",
type: "gaode",
icon: "../../../../img/mars-map-img/gaode_vec.png",
layer: "vec",
},
{
pid: 10,
name: "百度影像",
type: "group",
icon: "../../../../img/mars-map-img/bd-img.png",
layers: [
{ name: "底图", type: "baidu", layer: "img_d" },
{ name: "注记", type: "baidu", layer: "img_z" },
],
},
{
pid: 10,
name: "百度电子",
icon: "../../../../img/mars-map-img/bd-vec.png",
type: "baidu",
layer: "vec",
},
{
pid: 10,
name: "腾讯影像",
icon: "../../../../img/mars-map-img/tencent_img.png",
type: "group",
layers: [
{ name: "底图", type: "tencent", layer: "img_d" },
{ name: "注记", type: "tencent", layer: "img_z" },
],
},
{
pid: 10,
name: "腾讯电子",
icon: "../../../../img/mars-map-img/tencent_vec.png",
type: "tencent",
layer: "vec",
},
{
pid: 10,
name: "ArcGIS影像",
icon: "../../../../img/mars-map-img/esriWorldImagery.png",
type: "xyz",
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
enablePickFeatures: false,
},
],
};
function setParams(obj) {
objParams = JSON.parse(obj);
@ -73,254 +238,429 @@ function initData() {
// 百度地图初始化
function initMap(list) {
if (map) {
map = null;
// if (map) {
// map = null;
// }
// map = new BMapGL.Map("map-box");
// // 以第一个点为中心初始化地图
// map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
// map.setTilt(65); //设置地图的倾斜角度
// map.enableScrollWheelZoom(true); // 启用滚轮缩放
// // 设置显示3D建筑物
// map.setDisplayOptions({
// building: true, // 显示3D建筑物
// indoor: false,
// poi: true,
// });
// var navigationControl = new BMapGL.NavigationControl3D();
// map.addControl(navigationControl);
// // 每次初始化的时候清除所有标点以及线
// map.clearOverlays();
// var styleJson = [
// // 隐藏道路
// {
// featureType: "highway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "arterial",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "local",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// {
// featureType: "railway",
// elementType: "all",
// stylers: { visibility: "off" },
// },
// // 保留背景、水域、绿地等（避免地图变空白）
// {
// featureType: "background",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "water",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "green",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// // 保留标点和文字（避免自定义点被隐藏）
// {
// featureType: "point",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// {
// featureType: "label",
// elementType: "all",
// stylers: { visibility: "on" },
// },
// ];
// if (isMap) {
// // map.setMapType(BMAP_EARTH_MAP); // 地球模式
// map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
// /*map.setDisplayOptions({
// poiText: false, // 隐藏POI文字
// poiIcon: false, // 隐藏POI图标
// building: false, // 隐藏建筑物
// });*/
// } else {
// map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// // 增加不是纯白的背景色
// map.setMapStyleV2({
// styleJson: [
// {
// featureType: "background",
// elementType: "all",
// stylers: { color: "#f5f5f5" },
// },
// ],
// });
// }
// if (isMap) {
// map.setMapStyleV2({
// styleJson,
// });
// }
// initTowerLine(list);
// if (objParams.points) {
// let points = JSON.parse(objParams.points);
// if (points.length > 0) {
// $.each(points, function (i, item) {
// addMarker(item.lng || item.lon, item.lat || item.lat);
// });
// viewPointLine();
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// }
// } else {
// // 点击地图添加标记
// map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat);
// });
// }
if (!mars3d.Util.webglreport()) {
mars3d.Util.webglerror();
return;
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
map.centerAndZoom(new BMapGL.Point(intLng, intLat), 16);
map.setTilt(65); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
let intLng = "";
let intLat = "";
if (list.length > 0) {
intLng = list[Math.floor(list.length / 2)].lon;
intLat = list[Math.floor(list.length / 2)].lat;
}
// 设置显示3D建筑物
map.setDisplayOptions({
building: true, // 显示3D建筑物
indoor: false,
poi: true,
// 3. 初始化新地图
mapConfig.scene.center.lat = intLat || 31.686288;
mapConfig.scene.center.lng = intLng || 117.229619;
map = new mars3d.Map("map-box", mapConfig);
// 4. 创建新的图形图层
graphicLayer = new mars3d.layer.GraphicLayer();
// graphicLayer2 = new mars3d.layer.GraphicLayer();
const centerPoint = [intLng, intLat];
map.flyToPoint(centerPoint, {
radius: 5000, // 可视范围半径（米）
duration: 5, // 飞行时间（秒）
heading: 0, // 视角方向（0-360度）
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
});
var navigationControl = new BMapGL.NavigationControl3D();
map.addControl(navigationControl);
// 每次初始化的时候清除所有标点以及线
map.clearOverlays();
var styleJson = [
// 隐藏道路
{
featureType: "highway",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "arterial",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "local",
elementType: "all",
stylers: { visibility: "off" },
},
{
featureType: "railway",
elementType: "all",
stylers: { visibility: "off" },
},
map.addLayer(graphicLayer);
// 保留背景、水域、绿地等（避免地图变空白）
{
featureType: "background",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "water",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "green",
elementType: "all",
stylers: { visibility: "on" },
},
// 保留标点和文字（避免自定义点被隐藏）
{
featureType: "point",
elementType: "all",
stylers: { visibility: "on" },
},
{
featureType: "label",
elementType: "all",
stylers: { visibility: "on" },
},
];
if (isMap) {
// map.setMapType(BMAP_EARTH_MAP); // 地球模式
map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
/*map.setDisplayOptions({
poiText: false, // 隐藏POI文字
poiIcon: false, // 隐藏POI图标
building: false, // 隐藏建筑物
});*/
} else {
map.setMapType(BMAP_NORMAL_MAP); // 普通模式
// 增加不是纯白的背景色
map.setMapStyleV2({
styleJson: [
{
featureType: "background",
elementType: "all",
stylers: { color: "#f5f5f5" },
},
],
});
}
if (isMap) {
map.setMapStyleV2({
styleJson,
});
}
// 先把杆塔进行标点 然后连线
initTowerLine(list);
if (objParams.points) {
let points = JSON.parse(objParams.points);
if (points.length > 0) {
$.each(points, function (i, item) {
addMarker(item.lng || item.lon, item.lat || item.lat);
});
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
}
} else {
// 点击地图添加标记
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
$.each(points, function (i, item) {
addMarker(item.lng, item.lat);
});
viewPointLine();
}
map.on(mars3d.EventType.click, function (event) {
// 1. 获取点击位置的经纬度坐标
const cartesian = event.cartesian; // 笛卡尔坐标
if (!cartesian) return;
// // 将笛卡尔坐标转换为经纬度
const position = mars3d.LngLatPoint.fromCartesian(cartesian);
const lng = position.lng; // 经度
const lat = position.lat; // 纬度
console.log("点击位置坐标-----：", lng, lat);
addMarker(lng, lat);
});
}
// 添加点坐标
function addMarker(lng, lat) {
console.log("markers标点集合", markers);
var point = new BMapGL.Point(lng, lat);
// 创建点标记
var marker = new BMapGL.Marker(point);
// 添加到地图
map.addOverlay(marker);
// console.log("markers标点集合", markers);
// var point = new BMapGL.Point(lng, lat);
// // 创建点标记
// var marker = new BMapGL.Marker(point);
// // 添加到地图
// map.addOverlay(marker);
// 创建标签
// 2025-06-10 修改第一个标点名称为索道口
// let markerName = "";
let markerName = "";
// if (markers.length === 0) {
// markerName = "公路口";
// } else {
// markerName = "点" + (markerCount + 1);
// }
var label = new BMapGL.Label("杆塔" + (markerCount + 1), {
position: point,
offset: new BMapGL.Size(10, -30),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
// 存储标记和标签
markers.push({
marker: marker,
label: label,
point: point,
});
console.log(markers);
markerName = "跨越杆塔" + (markerCount + 1);
// var label = new BMapGL.Label("杆塔" + (markerCount + 1), {
// position: point,
// offset: new BMapGL.Size(10, -30),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// // 存储标记和标签
// markers.push({
// marker: marker,
// label: label,
// point: point,
// });
// console.log(markers);
// 更新计数器
markerCount++;
const billboard = new mars3d.graphic.BillboardEntity({
position: [lng, lat],
style: {
image: "../../../../img/digitalSignage/zt_white.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: markerCount,
name: markerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [lng, lat],
style: {
html: `<div class="tower-label">${markerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
markers.push({
lng: lng,
lat: lat,
billboard: billboard,
label: label2,
});
}
// 杆塔连线
function initTowerLine(points) {
// 存储所有点的坐标用于连线
var linePoints = [];
// 添加点覆盖物和标签
points.forEach(function (item, index) {
var point = new BMapGL.Point(item.lon, item.lat);
linePoints.push(point); // 添加到连线数组
// 创建点标记
var icon = new BMapGL.Icon(
"../../../../img/synthesisQuery/tower.png",
new BMapGL.Size(30, 66),
{
// 图标定位点
anchor: new BMapGL.Size(15, 66),
}
);
var marker = new BMapGL.Marker(point, { icon: icon });
map.addOverlay(marker);
// 创建标签
var label = new BMapGL.Label(item.towerName, {
position: point,
offset: new BMapGL.Size(20, -60),
});
label.setStyle({
color: "#333",
fontSize: "12px",
fontWeight: "bold",
backgroundColor: "rgba(255,255,255,0.9)",
border: "1px solid #ddd",
borderRadius: "4px",
padding: "2px 6px",
});
map.addOverlay(label);
});
// 创建连线
var polyline = new BMapGL.Polyline(linePoints, {
strokeColor: "#FF0305",
strokeWeight: 6,
strokeOpacity: 0.8,
});
map.addOverlay(polyline);
// 可选：自动调整视图以包含所有点
map.setViewport(linePoints);
// 2. 获取视口边界和中心点
var bounds = map.getBounds();
var center = bounds.getCenter();
// 3. 计算视口距离
var viewportDistance = Math.max(
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
),
BMapGL.Map.prototype.getDistance(
center,
new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
)
);
// 4. 设置3D参数
var zoom = map.getZoom();
var newTilt = 65;
var newHeading = 30;
// // 存储所有点的坐标用于连线
// var linePoints = [];
// // 添加点覆盖物和标签
// points.forEach(function (item, index) {
// var point = new BMapGL.Point(item.lon, item.lat);
// linePoints.push(point); // 添加到连线数组
// // 创建点标记
// var icon = new BMapGL.Icon(
// "../../../../img/synthesisQuery/tower.png",
// new BMapGL.Size(30, 66),
// {
// // 图标定位点
// anchor: new BMapGL.Size(15, 66),
// }
// );
// var marker = new BMapGL.Marker(point, { icon: icon });
// map.addOverlay(marker);
// // 创建标签
// var label = new BMapGL.Label(item.towerName, {
// position: point,
// offset: new BMapGL.Size(20, -60),
// });
// label.setStyle({
// color: "#333",
// fontSize: "12px",
// fontWeight: "bold",
// backgroundColor: "rgba(255,255,255,0.9)",
// border: "1px solid #ddd",
// borderRadius: "4px",
// padding: "2px 6px",
// });
// map.addOverlay(label);
// });
// // 创建连线
// var polyline = new BMapGL.Polyline(linePoints, {
// strokeColor: "#FF0305",
// strokeWeight: 6,
// strokeOpacity: 0.8,
// });
// map.addOverlay(polyline);
// // 可选：自动调整视图以包含所有点
// map.setViewport(linePoints);
// // 2. 获取视口边界和中心点
// var bounds = map.getBounds();
// var center = bounds.getCenter();
// // 3. 计算视口距离
// var viewportDistance = Math.max(
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(bounds.getSouthWest().lng, center.lat)
// ),
// BMapGL.Map.prototype.getDistance(
// center,
// new BMapGL.Point(center.lng, bounds.getSouthWest().lat)
// )
// );
// // 4. 设置3D参数
// var zoom = map.getZoom();
// var newTilt = 65;
// var newHeading = 30;
// 5. 应用3D视角
map.setTilt(newTilt);
map.setHeading(newHeading);
// // 5. 应用3D视角
// map.setTilt(newTilt);
// map.setHeading(newHeading);
// 6. 稍微缩小以确保所有点在3D视角下可见
setTimeout(function () {
map.setZoom(zoom - 1);
}, 100);
// // 6. 稍微缩小以确保所有点在3D视角下可见
// setTimeout(function () {
// map.setZoom(zoom - 1);
// }, 100);
points.forEach((item, index) => {
const billboard = new mars3d.graphic.BillboardEntity({
position: [item.lon, item.lat],
style: {
image: "../../../../img/digitalSignage/icon_three_new.png",
width: 30,
height: 30,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
},
// 其他属性
attr: {
id: index,
name: item.towerName,
},
});
const label2 = new mars3d.graphic.DivGraphic({
position: [item.lon, item.lat],
style: {
html: `<div class="tower-label">${item.towerName}</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: true,
offsetY: -60,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
graphicLayer.addGraphic(billboard);
graphicLayer.addGraphic(label2);
});
for (let i = 0; i < points.length - 1; i++) {
const startPoint = points[i];
const endPoint = points[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lon, startPoint.lat],
[endPoint.lon, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#FF0305", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
}
}
// 清除所有标点
document.getElementById("clearMarkers").addEventListener("click", function () {
markers.forEach(function (item) {
map.removeOverlay(item.marker);
map.removeOverlay(item.label);
// map.removeOverlay(item.marker);
// map.removeOverlay(item.label);
graphicLayer.removeGraphic(item.billboard);
graphicLayer.removeGraphic(item.label);
});
markers = [];
markerCount = 0;
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let frameId = parent.document
@ -338,22 +678,57 @@ function viewPointLine() {
if (markers && markers.length === 0) {
return layer.msg("请先创建点位", { icon: 7 });
}
if (polylineView) {
map.removeOverlay(polylineView); // 移除旧的折线
polylineView = null;
// 移除旧的索道线段 不要影响杆塔线段
if (lineList.length > 0) {
lineList.forEach((item) => {
graphicLayer.removeGraphic(item);
});
lineList = [];
}
let points = [];
$.each(markers, function (index, item) {
points.push(item.point);
});
// 2. 创建折线连接这些点位
var polyline = new BMapGL.Polyline(points, {
strokeColor: "#0C14CA", // 线颜色
strokeWeight: 4, // 线宽
strokeOpacity: 0.8, // 线透明度
});
polylineView = polyline;
map.addOverlay(polyline);
for (let i = 0; i < markers.length - 1; i++) {
const startPoint = markers[i];
const endPoint = markers[i + 1];
// 创建线段点数组
const positions = [
[startPoint.lng, startPoint.lat],
[endPoint.lng, endPoint.lat],
];
// const positions2 = positions.map((item) => {
// return mars3d.PointTrans.bd2wgs(item);
// });
const polyline = new mars3d.graphic.PolylineEntity({
positions: positions,
eventParent: false,
style: {
width: 2, // 线宽（像素）
color: "#0C14CA", // 线颜色
clampToGround: true, // 是否贴地（山区建议设为true）
},
});
graphicLayer.addGraphic(polyline);
lineList.push(polyline);
}
// if (polylineView) {
// map.removeOverlay(polylineView); // 移除旧的折线
// polylineView = null;
// }
// let points = [];
// $.each(markers, function (index, item) {
// points.push(item.point);
// });
// // 2. 创建折线连接这些点位
// var polyline = new BMapGL.Polyline(points, {
// strokeColor: "#0C14CA", // 线颜色
// strokeWeight: 4, // 线宽
// strokeOpacity: 0.8, // 线透明度
// });
// polylineView = polyline;
// map.addOverlay(polyline);
// 点击地图添加标记
// 2025-06-10 移除点击地图添加标记 解决连线之后 再次标点时标点展示异常问题
// map.addEventListener("click", function (e) {
@ -378,8 +753,11 @@ function saveData() {
let points = [];
$.each(markers, function (index, item) {
points.push({
lng: item.point.lng,
lat: item.point.lat,
// lng: item.point.lng,
// lat: item.point.lat,
lng: item.lng,
lat: item.lat,
sort: index + 1,
});
});

2596
src/main/resources/static/js/synthesisQuery/digitalSignage-new.js
View File

File diff suppressed because it is too large Load Diff

24
src/main/resources/static/pages/basic/lineManagement/child/setHighwayLonAndLat.html
View File

@ -14,6 +14,23 @@
<script src="../../../../js/my/aes.js"></script>
<script src="../../../../js/ajaxRequest.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<!--引入cesium基础lib-->
<link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库插件lib（按需引入）-->
<script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>
<!--第三方lib，非必须-->
<link rel="stylesheet" href="http://mars3d.cn/lib/fonts/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="http://mars3d.cn/lib/hao/haoutil.js"></script>
<title>配置公路口、中转口经纬度</title>
</head>
<style>
@ -31,6 +48,13 @@
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
.tower-label {
color: #fff;
padding: 1px;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
}
</style>
<body>

24
src/main/resources/static/pages/basic/lineManagement/child/setLonAndLat.html
View File

@ -14,6 +14,23 @@
<script src="../../../../js/my/aes.js"></script>
<script src="../../../../js/ajaxRequest.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<!--引入cesium基础lib-->
<link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库插件lib（按需引入）-->
<script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>
<!--第三方lib，非必须-->
<link rel="stylesheet" href="http://mars3d.cn/lib/fonts/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="http://mars3d.cn/lib/hao/haoutil.js"></script>
<title>配置索道口、中转口经纬度</title>
</head>
<style>
@ -31,6 +48,13 @@
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
.tower-label {
color: #fff;
padding: 1px;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
}
</style>
<body>

22
src/main/resources/static/pages/basic/lineManagement/child/setQzSiteLonAndLat.html
View File

@ -14,6 +14,21 @@
<script src="../../../../js/my/aes.js"></script>
<script src="../../../../js/ajaxRequest.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库插件lib（按需引入）-->
<script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>
<!--第三方lib，非必须-->
<link rel="stylesheet" href="http://mars3d.cn/lib/fonts/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="http://mars3d.cn/lib/hao/haoutil.js"></script>
<title>配置牵张场地、区域经纬度</title>
</head>
<style>
@ -31,6 +46,13 @@
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
.tower-label {
color: #fff;
padding: 1px;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
}
</style>
<body>

23
src/main/resources/static/pages/basic/lineManagement/child/setSpanTowerLonAndLat.html
View File

@ -14,6 +14,22 @@
<script src="../../../../js/my/aes.js"></script>
<script src="../../../../js/ajaxRequest.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<!--引入cesium基础lib-->
<link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库插件lib（按需引入）-->
<script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>
<!--第三方lib，非必须-->
<link rel="stylesheet" href="http://mars3d.cn/lib/fonts/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="http://mars3d.cn/lib/hao/haoutil.js"></script>
<title>配置公路口、中转口经纬度</title>
</head>
<style>
@ -31,6 +47,13 @@
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
.tower-label {
color: #fff;
padding: 1px;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
}
</style>
<body>

8
src/main/resources/static/pages/basic/lineManagement/child/towerFormTemp.html
View File

@ -91,7 +91,7 @@
<label class="layui-form-label"><span class="required-mark">*</span>经度:</label>
<div class="layui-input-inline">
<input type="text" name="longitude" lay-verify="required|longitude" autocomplete="off"
placeholder="请输入经度（大约73.55°E至135.08°E）" maxlength="10" class="layui-input">
placeholder="请输入经度（大约73.55°E至135.08°E）" class="layui-input">
</div>
</div>
@ -99,7 +99,7 @@
<label class="layui-form-label"><span class="required-mark">*</span>纬度:</label>
<div class="layui-input-inline">
<input type="text" name="latitude" lay-verify="required|latitude" autocomplete="off"
placeholder="请输入纬度（大约4°N至53°N）" maxlength="10" class="layui-input">
placeholder="请输入纬度（大约4°N至53°N）" class="layui-input">
</div>
</div>
</div>
@ -118,7 +118,7 @@
<label class="layui-form-label"><span class="required-mark">*</span>经度:</label>
<div class="layui-input-inline">
<input type="text" name="longitude2000" lay-verify="required|longitude" autocomplete="off"
placeholder="请输入经度（大约73.55°E至135.08°E）---" maxlength="10" class="layui-input">
placeholder="请输入经度（大约73.55°E至135.08°E）" class="layui-input">
</div>
</div>
@ -126,7 +126,7 @@
<label class="layui-form-label"><span class="required-mark">*</span>纬度:</label>
<div class="layui-input-inline">
<input type="text" name="latitude2000" lay-verify="required|latitude" autocomplete="off"
placeholder="请输入纬度（大约4°N至53°N）---" maxlength="10" class="layui-input">
placeholder="请输入纬度（大约4°N至53°N）" class="layui-input">
</div>
</div>
</div>