diff --git a/src/main/resources/static/js/basic/lineManagement/child/addAndEditHighway.js b/src/main/resources/static/js/basic/lineManagement/child/addAndEditHighway.js index cec239f..1084e80 100644 --- a/src/main/resources/static/js/basic/lineManagement/child/addAndEditHighway.js +++ b/src/main/resources/static/js/basic/lineManagement/child/addAndEditHighway.js @@ -225,8 +225,8 @@ function setLonAndLatData() { obj.points = pointsStr; openIframeByParamObj2( "setLonAndLatData", - "配置索道口、中转口、索道终点经纬度", - "../../lineManagement/child/setLonAndLat.html", + "配置千张场地、区域经纬度", + "../../lineManagement/child/setQzSiteLonAndLat.html", "92%", "95%", obj diff --git a/src/main/resources/static/js/basic/lineManagement/child/setHighwayLonAndLat.js b/src/main/resources/static/js/basic/lineManagement/child/setHighwayLonAndLat.js new file mode 100644 index 0000000..fe81394 --- /dev/null +++ b/src/main/resources/static/js/basic/lineManagement/child/setHighwayLonAndLat.js @@ -0,0 +1,391 @@ +let form, layer; +let objParams = {}; +let map = null; // 地图实例 +let intLng = 116.254; // 初始经度 +let intLat = 39.965; // 初始纬度 +let isMap = true; // 是否是地图模式 +let markerCount = 0; // 标记点计数器 +let markers = []; // 标记点数组 +let polylineView = null; + +function setParams(obj) { + objParams = JSON.parse(obj); + layui.use(["form", "layer"], function () { + form = layui.form; + layer = layui.layer; + table = layui.table; + initData(); + }); +} + +// 地图配置项 +const config = { + polyline: { + strokeWeight: 1, // 线条宽度 + strokeOpacity: 0.9, // 透明度 + strokeStyle: "dashed", // solid(实线)或dashed(虚线) + enableEditing: false, // 是否可编辑 + enableClicking: true, // 是否可点击 + }, +}; + +// 加载工程杆塔数据 +function initData() { + let url = dataUrl + "/backstage/digitalSignage/getTowersPosition"; + let obj = { + id: objParams.id, + }; + let params = { + encryptedData: encryptCBC(JSON.stringify(obj)), + }; + ajaxRequest( + url, + "POST", + params, + true, + function () {}, + function (result) { + if (result.status === 200) { + setData(result.data); + } else { + layer.msg(result.msg, { icon: 2 }); + } + }, + function (xhr) { + error(xhr); + } + ); + + function setData(list) { + if (list && list.length > 0) { + if (objParams.points) { + let points = JSON.parse(objParams.points); + intLng = points[0].lng; + intLat = points[0].lat; + } else { + intLng = list[0].proLon ? list[0].proLon : list[0].lon; + intLat = list[0].proLat ? list[0].proLat : list[0].lat; + } + } + initMap(list); + } +} + +// 百度地图初始化 +function initMap(list) { + 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(); + }); + } else { + // 点击地图添加标记 + map.addEventListener("click", function (e) { + addMarker(e.latlng.lng, e.latlng.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); + + // 创建标签 + // 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); + // 更新计数器 + markerCount++; +} + +// 杆塔连线 +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; + + // 5. 应用3D视角 + map.setTilt(newTilt); + map.setHeading(newHeading); + + // 6. 稍微缩小以确保所有点在3D视角下可见 + setTimeout(function () { + map.setZoom(zoom - 1); + }, 100); +} + +// 清除所有标点 +document.getElementById("clearMarkers").addEventListener("click", function () { + markers.forEach(function (item) { + map.removeOverlay(item.marker); + map.removeOverlay(item.label); + }); + markers = []; + + console.log("markers标点集合", markers); + markerCount = 0; + if (polylineView) { + map.removeOverlay(polylineView); // 移除旧的折线 + polylineView = null; + } + + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; + frameId.contentWindow.clearPointData(); +}); + +// 预览标点连线 +document.getElementById("viewPoint").addEventListener("click", function () { + viewPointLine(); +}); + +function viewPointLine() { + if (markers && markers.length === 0) { + return layer.msg("请先创建点位", { icon: 7 }); + } + 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) { + // addMarker(e.latlng.lng, e.latlng.lat); + // }); +} + +// 保存点位数据 +function saveData() { + if (markers && markers.length === 0) { + return layer.msg("请先创建点位", { icon: 7 }); + } + + if (markers && markers.length < 2) { + return layer.msg("至少创建两个点位", { icon: 7 }); + } + let points = []; + $.each(markers, function (index, item) { + points.push({ + lng: item.point.lng, + lat: item.point.lat, + sort: index + 1, + }); + }); + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; + frameId.contentWindow.savePointData(JSON.stringify(points)); + parent.layer.msg("保存成功", { icon: 1 }); + let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 + parent.layer.close(index); //再执行关闭 +} + +// 关闭页面 +function closePage() { + let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 + parent.layer.close(index); //再执行关闭 +} diff --git a/src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js b/src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js index fdfdfa6..7cf888c 100644 --- a/src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js +++ b/src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js @@ -10,7 +10,7 @@ let polylineView = null; function setParams(obj) { objParams = JSON.parse(obj); - layui.use(['form', 'layer'], function () { + layui.use(["form", "layer"], function () { form = layui.form; layer = layui.layer; table = layui.table; @@ -31,28 +31,35 @@ const config = { // 加载工程杆塔数据 function initData() { - let url = dataUrl + "/backstage/digitalSignage/getTowersPosition" + let url = dataUrl + "/backstage/digitalSignage/getTowersPosition"; let obj = { - id: objParams.id - } + id: objParams.id, + }; let params = { - encryptedData: encryptCBC(JSON.stringify(obj)) - } - ajaxRequest(url, "POST", params, true, function () { - }, function (result) { - if (result.status === 200) { - setData(result.data); - } else { - layer.msg(result.msg, {icon: 2}) + encryptedData: encryptCBC(JSON.stringify(obj)), + }; + ajaxRequest( + url, + "POST", + params, + true, + function () {}, + function (result) { + if (result.status === 200) { + setData(result.data); + } else { + layer.msg(result.msg, { icon: 2 }); + } + }, + function (xhr) { + error(xhr); } - }, function (xhr) { - error(xhr) - }); + ); function setData(list) { if (list && list.length > 0) { if (objParams.points) { - let points = JSON.parse(objParams.points) + let points = JSON.parse(objParams.points); intLng = points[0].lng; intLat = points[0].lat; } else { @@ -64,7 +71,6 @@ function initData() { } } - // 百度地图初始化 function initMap(list) { if (map) { @@ -79,9 +85,9 @@ function initMap(list) { // 设置显示3D建筑物 map.setDisplayOptions({ - building: true, // 显示3D建筑物 + building: true, // 显示3D建筑物 indoor: false, - poi: true + poi: true, }); var navigationControl = new BMapGL.NavigationControl3D(); map.addControl(navigationControl); @@ -93,51 +99,51 @@ function initMap(list) { { featureType: "highway", elementType: "all", - stylers: {visibility: "off"}, + stylers: { visibility: "off" }, }, { featureType: "arterial", elementType: "all", - stylers: {visibility: "off"}, + stylers: { visibility: "off" }, }, { featureType: "local", elementType: "all", - stylers: {visibility: "off"}, + stylers: { visibility: "off" }, }, { featureType: "railway", elementType: "all", - stylers: {visibility: "off"}, + stylers: { visibility: "off" }, }, // 保留背景、水域、绿地等(避免地图变空白) { featureType: "background", elementType: "all", - stylers: {visibility: "on"}, + stylers: { visibility: "on" }, }, { featureType: "water", elementType: "all", - stylers: {visibility: "on"}, + stylers: { visibility: "on" }, }, { featureType: "green", elementType: "all", - stylers: {visibility: "on"}, + stylers: { visibility: "on" }, }, // 保留标点和文字(避免自定义点被隐藏) { featureType: "point", elementType: "all", - stylers: {visibility: "on"}, + stylers: { visibility: "on" }, }, { featureType: "label", elementType: "all", - stylers: {visibility: "on"}, + stylers: { visibility: "on" }, }, ]; @@ -158,7 +164,7 @@ function initMap(list) { { featureType: "background", elementType: "all", - stylers: {color: "#f5f5f5"}, + stylers: { color: "#f5f5f5" }, }, ], }); @@ -171,11 +177,11 @@ function initMap(list) { } initTowerLine(list); if (objParams.points) { - let points = JSON.parse(objParams.points) + let points = JSON.parse(objParams.points); $.each(points, function (i, item) { - addMarker(item.lng, item.lat) + addMarker(item.lng, item.lat); viewPointLine(); - }) + }); } else { // 点击地图添加标记 map.addEventListener("click", function (e) { @@ -186,15 +192,24 @@ function initMap(list) { // 添加点坐标 function addMarker(lng, lat) { + console.log("markers标点集合", markers); var point = new BMapGL.Point(lng, lat); // 创建点标记 var marker = new BMapGL.Marker(point); // 添加到地图 map.addOverlay(marker); + // 创建标签 - var label = new BMapGL.Label("点" + (markerCount + 1), { + // 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) + offset: new BMapGL.Size(10, -30), }); label.setStyle({ color: "#333", @@ -203,16 +218,16 @@ function addMarker(lng, lat) { backgroundColor: "rgba(255,255,255,0.9)", border: "1px solid #ddd", borderRadius: "4px", - padding: "2px 6px" + padding: "2px 6px", }); map.addOverlay(label); // 存储标记和标签 markers.push({ marker: marker, label: label, - point: point + point: point, }); - console.log(markers) + console.log(markers); // 更新计数器 markerCount++; } @@ -226,16 +241,20 @@ function initTowerLine(points) { 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}); + 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) + offset: new BMapGL.Size(20, -60), }); label.setStyle({ color: "#333", @@ -244,15 +263,15 @@ function initTowerLine(points) { backgroundColor: "rgba(255,255,255,0.9)", border: "1px solid #ddd", borderRadius: "4px", - padding: "2px 6px" + padding: "2px 6px", }); map.addOverlay(label); }); // 创建连线 var polyline = new BMapGL.Polyline(linePoints, { - strokeColor: '#FF0305', + strokeColor: "#FF0305", strokeWeight: 6, - strokeOpacity: 0.8 + strokeOpacity: 0.8, }); map.addOverlay(polyline); // 可选:自动调整视图以包含所有点 @@ -262,8 +281,14 @@ function initTowerLine(points) { 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)) + 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(); @@ -287,11 +312,17 @@ document.getElementById("clearMarkers").addEventListener("click", function () { map.removeOverlay(item.label); }); markers = []; + + console.log("markers标点集合", markers); markerCount = 0; if (polylineView) { map.removeOverlay(polylineView); // 移除旧的折线 + polylineView = null; } - let frameId = parent.document.getElementById('addDataRopeway').getElementsByTagName("iframe")[0]; + + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; frameId.contentWindow.clearPointData(); }); @@ -302,49 +333,53 @@ document.getElementById("viewPoint").addEventListener("click", function () { function viewPointLine() { if (markers && markers.length === 0) { - return layer.msg('请先创建点位', {icon: 7}); + return layer.msg("请先创建点位", { icon: 7 }); } 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 // 线透明度 + strokeColor: "#0C14CA", // 线颜色 + strokeWeight: 4, // 线宽 + strokeOpacity: 0.8, // 线透明度 }); polylineView = polyline; map.addOverlay(polyline); // 点击地图添加标记 - map.addEventListener("click", function (e) { - addMarker(e.latlng.lng, e.latlng.lat); - }); + // 2025-06-10 移除点击地图添加标记 解决连线之后 再次标点时标点展示异常问题 + // map.addEventListener("click", function (e) { + // addMarker(e.latlng.lng, e.latlng.lat); + // }); } // 保存点位数据 function saveData() { if (markers && markers.length === 0) { - return layer.msg('请先创建点位', {icon: 7}); + return layer.msg("请先创建点位", { icon: 7 }); } if (markers && markers.length < 2) { - return layer.msg('至少创建两个点位', {icon: 7}); + return layer.msg("至少创建两个点位", { icon: 7 }); } let points = []; $.each(markers, function (index, item) { points.push({ lng: item.point.lng, lat: item.point.lat, - sort: index + 1 + sort: index + 1, }); - }) - let frameId = parent.document.getElementById('addDataRopeway').getElementsByTagName("iframe")[0]; + }); + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; frameId.contentWindow.savePointData(JSON.stringify(points)); - parent.layer.msg('保存成功', {icon: 1}); + parent.layer.msg("保存成功", { icon: 1 }); let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 parent.layer.close(index); //再执行关闭 } @@ -353,4 +388,4 @@ function saveData() { function closePage() { let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 parent.layer.close(index); //再执行关闭 -} \ No newline at end of file +} diff --git a/src/main/resources/static/js/basic/lineManagement/child/setQzSiteLonAndLat.js b/src/main/resources/static/js/basic/lineManagement/child/setQzSiteLonAndLat.js new file mode 100644 index 0000000..31a9fb7 --- /dev/null +++ b/src/main/resources/static/js/basic/lineManagement/child/setQzSiteLonAndLat.js @@ -0,0 +1,403 @@ +let form, layer; +let objParams = {}; +let map = null; // 地图实例 +let intLng = 116.254; // 初始经度 +let intLat = 39.965; // 初始纬度 +let isMap = true; // 是否是地图模式 +let markerCount = 0; // 标记点计数器 +let markers = []; // 标记点数组 +let polylineView = null; + +function setParams(obj) { + objParams = JSON.parse(obj); + layui.use(["form", "layer"], function () { + form = layui.form; + layer = layui.layer; + table = layui.table; + initData(); + }); +} + +// 地图配置项 +const config = { + polyline: { + strokeWeight: 1, // 线条宽度 + strokeOpacity: 0.9, // 透明度 + strokeStyle: "dashed", // solid(实线)或dashed(虚线) + enableEditing: false, // 是否可编辑 + enableClicking: true, // 是否可点击 + }, +}; + +// 加载工程杆塔数据 +function initData() { + let url = dataUrl + "/backstage/digitalSignage/getTowersPosition"; + let obj = { + id: objParams.id, + }; + let params = { + encryptedData: encryptCBC(JSON.stringify(obj)), + }; + ajaxRequest( + url, + "POST", + params, + true, + function () {}, + function (result) { + if (result.status === 200) { + setData(result.data); + } else { + layer.msg(result.msg, { icon: 2 }); + } + }, + function (xhr) { + error(xhr); + } + ); + + function setData(list) { + if (list && list.length > 0) { + if (objParams.points) { + let points = JSON.parse(objParams.points); + intLng = points[0].lng; + intLat = points[0].lat; + } else { + intLng = list[0].proLon ? list[0].proLon : list[0].lon; + intLat = list[0].proLat ? list[0].proLat : list[0].lat; + } + } + initMap(list); + } +} + +// 百度地图初始化 +function initMap(list) { + 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(); + }); + } else { + // 点击地图添加标记 + map.addEventListener("click", function (e) { + addMarker(e.latlng.lng, e.latlng.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); + + // 创建标签 + // 2025-06-10 修改第一个标点名称为索道口 + let markerName = "点" + (markerCount + 1); + // 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); + // 更新计数器 + markerCount++; +} + +// 杆塔连线 +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; + + // 5. 应用3D视角 + map.setTilt(newTilt); + map.setHeading(newHeading); + + // 6. 稍微缩小以确保所有点在3D视角下可见 + setTimeout(function () { + map.setZoom(zoom - 1); + }, 100); +} + +// 清除所有标点和区域 +document.getElementById("clearMarkers").addEventListener("click", function () { + markers.forEach(function (item) { + map.removeOverlay(item.marker); + map.removeOverlay(item.label); + }); + markers = []; + markerCount = 0; + if (polylineView) { + map.removeOverlay(polylineView); // 移除旧的折线 + polylineView = null; + } + if (polygonView) { + map.removeOverlay(polygonView); // 移除旧的区域 + polygonView = null; + } + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; + frameId.contentWindow.clearPointData(); +}); + +// 预览标点连线 成为区域 +document.getElementById("viewPoint").addEventListener("click", function () { + viewPointLine(); +}); + +function viewPointLine() { + if (markers && markers.length === 0) { + return layer.msg("请先创建点位", { icon: 7 }); + } + 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); + + // 绘制区域 + 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) { + // addMarker(e.latlng.lng, e.latlng.lat); + // }); +} + +// 保存点位数据 +function saveData() { + if (markers && markers.length === 0) { + return layer.msg("请先创建点位", { icon: 7 }); + } + + if (markers && markers.length < 2) { + return layer.msg("至少创建两个点位", { icon: 7 }); + } + let points = []; + $.each(markers, function (index, item) { + points.push({ + lng: item.point.lng, + lat: item.point.lat, + sort: index + 1, + }); + }); + let frameId = parent.document + .getElementById("addDataRopeway") + .getElementsByTagName("iframe")[0]; + frameId.contentWindow.savePointData(JSON.stringify(points)); + parent.layer.msg("保存成功", { icon: 1 }); + let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 + parent.layer.close(index); //再执行关闭 +} + +// 关闭页面 +function closePage() { + let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 + parent.layer.close(index); //再执行关闭 +} diff --git a/src/main/resources/static/js/synthesisQuery/digitalSignage.js b/src/main/resources/static/js/synthesisQuery/digitalSignage.js index 27596d1..d89541d 100644 --- a/src/main/resources/static/js/synthesisQuery/digitalSignage.js +++ b/src/main/resources/static/js/synthesisQuery/digitalSignage.js @@ -333,7 +333,7 @@ function addAllMapPoints() { iconUrl, new BMapGL.Size(24, 24), { - anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部 + anchor: new BMapGL.Size(12, 24), // 修正锚点位置为中心底部 imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致 } ); @@ -515,7 +515,7 @@ function addAllMapPoints() { let X = 24; let Y = 24; let anchorX = 12; - let anchorY = 12; + let anchorY = 24; // if ([1, 2, 3, 4, 5, 6, 0].includes(pointData.towerProgress)) { // X = 14; // Y = 33.75; @@ -722,9 +722,9 @@ function addAllMapPoints() { // 4. 添加标签 let offset = new BMapGL.Size(-20, -30); if (index % 2 == 0) { - offset = new BMapGL.Size(-20, -60); + offset = new BMapGL.Size(-26, -60); } else { - offset = new BMapGL.Size(-20, 30); + offset = new BMapGL.Size(-26, 20); } const label = new BMapGL.Label(pointData.towerName, { position: point, @@ -734,7 +734,7 @@ function addAllMapPoints() { overlays.push(label); label.setStyle({ color: "#fff", - fontSize: "11px", + fontSize: "12px", backgroundColor: "rgba(0, 0, 0, 0.5)", border: "none", padding: "0 10px", @@ -773,7 +773,7 @@ function addAllMapPoints() { // 检查图标是否存在,不存在则使用默认图标 const iconUrl = iconTypeList[21]; // 默认使用第一个图标 const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), { - anchor: new BMapGL.Size(10, 10), // 修正锚点位置为中心底部 + anchor: new BMapGL.Size(12, 24), // 修正锚点位置为中心底部 imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致 }); diff --git a/src/main/resources/static/pages/basic/lineManagement/child/addAndEditHighway.html b/src/main/resources/static/pages/basic/lineManagement/child/addAndEditHighway.html index 32c6684..9ffaeb5 100644 --- a/src/main/resources/static/pages/basic/lineManagement/child/addAndEditHighway.html +++ b/src/main/resources/static/pages/basic/lineManagement/child/addAndEditHighway.html @@ -121,7 +121,7 @@
- +
diff --git a/src/main/resources/static/pages/basic/lineManagement/child/addAndEditQzSite.html b/src/main/resources/static/pages/basic/lineManagement/child/addAndEditQzSite.html index c7b3f78..d99d9f0 100644 --- a/src/main/resources/static/pages/basic/lineManagement/child/addAndEditQzSite.html +++ b/src/main/resources/static/pages/basic/lineManagement/child/addAndEditQzSite.html @@ -120,7 +120,7 @@
- +
diff --git a/src/main/resources/static/pages/basic/lineManagement/child/setHighwayLonAndLat.html b/src/main/resources/static/pages/basic/lineManagement/child/setHighwayLonAndLat.html new file mode 100644 index 0000000..3f61394 --- /dev/null +++ b/src/main/resources/static/pages/basic/lineManagement/child/setHighwayLonAndLat.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + 配置公路口、中转口经纬度 + + + + +
+
+ +
+
+

提示:点1表示公路口,最后一个点表示公路终点,其余点表示中转口

+
+ + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/src/main/resources/static/pages/basic/lineManagement/child/setLonAndLat.html b/src/main/resources/static/pages/basic/lineManagement/child/setLonAndLat.html index 0dd5bbd..c13b43b 100644 --- a/src/main/resources/static/pages/basic/lineManagement/child/setLonAndLat.html +++ b/src/main/resources/static/pages/basic/lineManagement/child/setLonAndLat.html @@ -1,5 +1,6 @@ + @@ -31,22 +32,24 @@ display: none !important; } - -
-
-
-
-

提示:点1表示索道口,最后一个点表示索道终点,其余点表示中转口

-
- - - - + +
+
+ +
+
+

提示:点1表示索道口,最后一个点表示索道终点,其余点表示中转口

+
+ + + + +
-
-
+
+ \ No newline at end of file diff --git a/src/main/resources/static/pages/basic/lineManagement/child/setQzSiteLonAndLat.html b/src/main/resources/static/pages/basic/lineManagement/child/setQzSiteLonAndLat.html new file mode 100644 index 0000000..28dd940 --- /dev/null +++ b/src/main/resources/static/pages/basic/lineManagement/child/setQzSiteLonAndLat.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + 配置千张场地、区域经纬度 + + + + +
+
+ +
+
+

提示:点1表示开始点,最后一个点表示终点

+
+ + + + +
+
+
+ + + + + \ No newline at end of file