公路和千张场地

This commit is contained in:
BianLzhaoMin 2025-06-10 14:08:28 +08:00
parent 69f04c9a09
commit f36edf99d0
10 changed files with 1031 additions and 87 deletions

View File

@ -225,8 +225,8 @@ function setLonAndLatData() {
obj.points = pointsStr;
openIframeByParamObj2(
"setLonAndLatData",
"配置索道口、中转口、索道终点经纬度",
"../../lineManagement/child/setLonAndLat.html",
"配置千张场地、区域经纬度",
"../../lineManagement/child/setQzSiteLonAndLat.html",
"92%",
"95%",
obj

View File

@ -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); //再执行关闭
}

View File

@ -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); //再执行关闭
}
}

View File

@ -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); //再执行关闭
}

View File

@ -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), // 与实际图片尺寸一致
});

View File

@ -121,7 +121,7 @@
</div>
<div class="btn-box">
<button class="layui-btn layui-btn-normal save" onclick="setLonAndLatData()">配置索道口、中转口、索道终点经纬度</button>
<button class="layui-btn layui-btn-normal save" onclick="setLonAndLatData()">配置公路口、中转口、公路终点经纬度</button>
<button class="layui-btn layui-btn-normal save" onclick="saveData2()">确定</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
</div>

View File

@ -120,7 +120,7 @@
</div>
<div class="btn-box">
<button class="layui-btn layui-btn-normal save" onclick="setLonAndLatData()">配置索道口、中转口、索道终点经纬度</button>
<button class="layui-btn layui-btn-normal save" onclick="setLonAndLatData()">配置千张场地、区域经纬度</button>
<button class="layui-btn layui-btn-normal save" onclick="saveData2()">确定</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
</div>

View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../../js/layui-v2.9.14/layui/css/layui.css">
<link rel="stylesheet" href="../../../../css/font.css">
<link rel="stylesheet" href="../../../../css/synthesisQuery/setLonAndLat.css">
<script src="../../../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../../../js/publicJs.js"></script>
<script src="../../../../js/commonUtils.js"></script>
<script src="../../../../js/openIframe.js"></script>
<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>
<title>配置公路口、中转口经纬度</title>
</head>
<style>
.custom-info-window {
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
border: none;
min-width: 150px;
font-family: Arial, sans-serif;
}
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
</style>
<body>
<div id="main-box" class="layout">
<div id="map-box">
</div>
<div class="btn-box layout">
<p style="color: red;font-size: 16px;font-weight: bold;">提示点1表示公路口最后一个点表示公路终点其余点表示中转口</p>
<div>
<button class="layui-btn layui-btn-norma save" id="viewPoint">预览标点连线</button>
<button class="layui-btn layui-btn-norma save" onclick="saveData()">保存</button>
<button class="layui-btn layui-btn-primary cancel" id="clearMarkers">清空标点</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
</div>
</div>
</div>
</div>
</body>
<script src="../../../../js/basic/lineManagement/child/setHighwayLonAndLat.js" charset="UTF-8"
type="text/javascript"></script>
</html>

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../../js/layui-v2.9.14/layui/css/layui.css">
@ -31,22 +32,24 @@
display: none !important;
}
</style>
<body>
<div id="main-box" class="layout">
<div id="map-box">
</div>
<div class="btn-box layout">
<p style="color: red;font-size: 16px;font-weight: bold;">提示点1表示索道口最后一个点表示索道终点其余点表示中转口</p>
<div>
<button class="layui-btn layui-btn-norma save" id="viewPoint">预览标点连线</button>
<button class="layui-btn layui-btn-norma save" onclick="saveData()">保存</button>
<button class="layui-btn layui-btn-primary cancel" id="clearMarkers">清空标点</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
<body>
<div id="main-box" class="layout">
<div id="map-box">
</div>
<div class="btn-box layout">
<p style="color: red;font-size: 16px;font-weight: bold;">提示点1表示索道口最后一个点表示索道终点其余点表示中转口</p>
<div>
<button class="layui-btn layui-btn-norma save" id="viewPoint">预览标点连线</button>
<button class="layui-btn layui-btn-norma save" onclick="saveData()">保存</button>
<button class="layui-btn layui-btn-primary cancel" id="clearMarkers">清空标点</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../../../js/basic/lineManagement/child/setLonAndLat.js" charset="UTF-8" type="text/javascript"></script>
</html>

View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../../js/layui-v2.9.14/layui/css/layui.css">
<link rel="stylesheet" href="../../../../css/font.css">
<link rel="stylesheet" href="../../../../css/synthesisQuery/setLonAndLat.css">
<script src="../../../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../../../js/publicJs.js"></script>
<script src="../../../../js/commonUtils.js"></script>
<script src="../../../../js/openIframe.js"></script>
<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>
<title>配置千张场地、区域经纬度</title>
</head>
<style>
.custom-info-window {
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
border: none;
min-width: 150px;
font-family: Arial, sans-serif;
}
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
</style>
<body>
<div id="main-box" class="layout">
<div id="map-box">
</div>
<div class="btn-box layout">
<p style="color: red;font-size: 16px;font-weight: bold;">提示点1表示开始点最后一个点表示终点</p>
<div>
<button class="layui-btn layui-btn-norma save" id="viewPoint">预览标点区域</button>
<button class="layui-btn layui-btn-norma save" onclick="saveData()">保存</button>
<button class="layui-btn layui-btn-primary cancel" id="clearMarkers">清空标点</button>
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
</div>
</div>
</div>
</div>
</body>
<script src="../../../../js/basic/lineManagement/child/setQzSiteLonAndLat.js" charset="UTF-8"
type="text/javascript"></script>
</html>