地图样式优化
This commit is contained in:
BianLzhaoMin
parent
80df2afd84
commit
f8addde32d
|
|
@ -1,4 +1,6 @@
|
|||
let map = null; // 地图实例
|
||||
let graphicLayer = null; // 图形图层
|
||||
let graphicLayerList = []; // 图形图层列表
|
||||
let treeData = []; // 组织机构树数据
|
||||
let nodeId = ""; // 当前选中的节点ID
|
||||
let cablewayList = []; // 索道列表
|
||||
|
|
@ -342,28 +344,102 @@ function getLocationInfo(id) {
|
|||
}
|
||||
|
||||
// 百度地图初始化
|
||||
function initMap() {
|
||||
if (map) {
|
||||
map.destroy();
|
||||
map = null;
|
||||
}
|
||||
if (!mars3d.Util.webglreport()) {
|
||||
mars3d.Util.webglerror();
|
||||
}
|
||||
async function initMap() {
|
||||
// if (map) {
|
||||
// map.destroy();
|
||||
// map = null;
|
||||
// }
|
||||
// if (!mars3d.Util.webglreport()) {
|
||||
// mars3d.Util.webglerror();
|
||||
// }
|
||||
|
||||
// try {
|
||||
// mapConfig.scene.center.lat = intLat || 31.686288;
|
||||
// mapConfig.scene.center.lng = intLng || 117.229619;
|
||||
// map = new mars3d.Map("map-box", mapConfig);
|
||||
// let graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
// map.addLayer(graphicLayer);
|
||||
|
||||
// addAllMapPoints(graphicLayer);
|
||||
// addMapLine(graphicLayer);
|
||||
// addMapAThousandFields(graphicLayer);
|
||||
// } catch (error) {
|
||||
// console.log("初始化地图出错", error);
|
||||
// haoutil.alert(error?.message, "出错了");
|
||||
// }
|
||||
|
||||
try {
|
||||
mapConfig.scene.center.lat = intLat || 31.686288;
|
||||
mapConfig.scene.center.lng = intLng || 117.229619;
|
||||
map = new mars3d.Map("map-box", mapConfig);
|
||||
let graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer);
|
||||
// 1. 彻底清理旧地图实例
|
||||
if (map) {
|
||||
// 移除所有自定义图层
|
||||
if (graphicLayer) {
|
||||
graphicLayerList.forEach((e) => {
|
||||
graphicLayer.removeGraphic(e);
|
||||
});
|
||||
// graphicLayer.clear();
|
||||
// map.removeLayer(graphicLayer, true); // true表示彻底销毁
|
||||
// graphicLayer = null;
|
||||
}
|
||||
|
||||
addAllMapPoints(graphicLayer);
|
||||
addMapLine(graphicLayer);
|
||||
addMapAThousandFields(graphicLayer);
|
||||
// 销毁地图实例
|
||||
// map.destroy();
|
||||
// map = null;
|
||||
|
||||
// // 强制垃圾回收（非必要但建议）
|
||||
// if (window.gc) window.gc();
|
||||
|
||||
// 5. 添加内容
|
||||
|
||||
const centerPoint = [intLng, intLat];
|
||||
|
||||
// 方式1：直接飞向目标点
|
||||
map.flyToPoint(centerPoint, {
|
||||
radius: 5000, // 可视范围半径（米）
|
||||
duration: 2, // 飞行时间（秒）
|
||||
heading: 0, // 视角方向（0-360度）
|
||||
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
|
||||
});
|
||||
await addAllMapPoints();
|
||||
await addMapLine();
|
||||
await addMapAThousandFields();
|
||||
} else {
|
||||
// 2. WebGL兼容性检查
|
||||
if (!mars3d.Util.webglreport()) {
|
||||
mars3d.Util.webglerror();
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
const centerPoint = [intLng, intLat];
|
||||
|
||||
// 方式1：直接飞向目标点
|
||||
map.flyToPoint(centerPoint, {
|
||||
radius: 5000, // 可视范围半径（米）
|
||||
duration: 5, // 飞行时间（秒）
|
||||
heading: 0, // 视角方向（0-360度）
|
||||
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
|
||||
});
|
||||
|
||||
map.addLayer(graphicLayer);
|
||||
|
||||
// 5. 添加内容
|
||||
await addAllMapPoints();
|
||||
await addMapLine();
|
||||
await addMapAThousandFields();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("初始化地图出错", error);
|
||||
haoutil.alert(error?.message, "出错了");
|
||||
// 失败时也清理残留
|
||||
if (map) {
|
||||
map.destroy();
|
||||
map = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -436,7 +512,7 @@ function connectPointsWithLine(graphicLayer, points) {
|
|||
}
|
||||
|
||||
// 添加标点
|
||||
function addAllMapPoints(graphicLayer) {
|
||||
async function addAllMapPoints() {
|
||||
const iconTypeList = {
|
||||
// 1: "../../img/digitalSignage/icon_three.png",
|
||||
1: "../../img/digitalSignage/icon_three_new.png",
|
||||
|
|
@ -474,11 +550,15 @@ function addAllMapPoints(graphicLayer) {
|
|||
position: [
|
||||
pointData.cablewaTransPointVoList[0].lng,
|
||||
pointData.cablewaTransPointVoList[0].lat,
|
||||
1000,
|
||||
],
|
||||
style: {
|
||||
image: iconTypeList[12],
|
||||
width: 20,
|
||||
height: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -524,6 +604,8 @@ function addAllMapPoints(graphicLayer) {
|
|||
});
|
||||
|
||||
graphicLayer.addGraphic(billboard);
|
||||
|
||||
graphicLayerList.push(billboard);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -531,11 +613,15 @@ function addAllMapPoints(graphicLayer) {
|
|||
// 绘制项目部
|
||||
if (intLng && intLat) {
|
||||
const billboard = new mars3d.graphic.BillboardEntity({
|
||||
position: [intLng, intLat],
|
||||
position: [intLng, intLat, 1000],
|
||||
style: {
|
||||
image: iconTypeList[20],
|
||||
width: 20,
|
||||
height: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -557,16 +643,27 @@ function addAllMapPoints(graphicLayer) {
|
|||
});
|
||||
|
||||
graphicLayer.addGraphic(billboard);
|
||||
graphicLayerList.push(billboard);
|
||||
}
|
||||
|
||||
// 绘制杆塔
|
||||
if (towerList && towerList.length > 0) {
|
||||
towerList.forEach((pointData, index) => {
|
||||
// const isEven = index % 2 === 0;
|
||||
// const verticalOrigin = isEven
|
||||
// ? Cesium.VerticalOrigin.BOTTOM
|
||||
// : Cesium.VerticalOrigin.TOP;
|
||||
// const pixelOffsetY = isEven ? 60 : -60;
|
||||
|
||||
const isEven = index % 2 === 0;
|
||||
const verticalOrigin = isEven
|
||||
// 标点垂直方向设置
|
||||
const billboardVerticalOrigin = Cesium.VerticalOrigin.BOTTOM; // 标点固定底部对齐
|
||||
|
||||
// 标签位置设置
|
||||
const labelVerticalOrigin = isEven
|
||||
? Cesium.VerticalOrigin.BOTTOM
|
||||
: Cesium.VerticalOrigin.TOP;
|
||||
const pixelOffsetY = isEven ? 60 : -60;
|
||||
const pixelOffsetY = isEven ? 60 : -60; // 调整偏移量（根据标点大小适当调整）
|
||||
|
||||
const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];
|
||||
const billboard = new mars3d.graphic.BillboardEntity({
|
||||
|
|
@ -575,26 +672,12 @@ function addAllMapPoints(graphicLayer) {
|
|||
image: iconUrl,
|
||||
width: 30,
|
||||
height: 30,
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true,
|
||||
// 添加Label
|
||||
label: {
|
||||
text: pointData.towerName,
|
||||
font_size: 12, // 适当增大字号（最小建议12）
|
||||
font_family: "Microsoft YaHei", // 指定清晰字体（如宋体、Arial）
|
||||
color: "#FFFFFF",
|
||||
background: true,
|
||||
backgroundColor: "#000000",
|
||||
backgroundOpacity: 0.7, // 背景透明度（0-1）
|
||||
pixelOffset: new Cesium.Cartesian2(0, pixelOffsetY),
|
||||
verticalOrigin: verticalOrigin,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
outline: true,
|
||||
outlineColor: "#000000", // 轮廓色与背景色一致
|
||||
outlineWidth: 2, // 加粗轮廓
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 强制填充+轮廓
|
||||
scale: 0.8, // 轻微放大（可选）
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 避免被地形遮挡
|
||||
},
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
|
||||
},
|
||||
// 其他属性
|
||||
attr: {
|
||||
|
|
@ -603,6 +686,51 @@ function addAllMapPoints(graphicLayer) {
|
|||
},
|
||||
});
|
||||
|
||||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
position: new mars3d.LngLatPoint(
|
||||
pointData.baiduLon,
|
||||
pointData.baiduLat
|
||||
),
|
||||
style: {
|
||||
// text: pointData.towerName,
|
||||
// font_size: 12,
|
||||
// font_family: "楷体",
|
||||
// color: "#FFFFFF",
|
||||
// background: true,
|
||||
// backgroundColor: "#000000",
|
||||
// backgroundOpacity: 0.8,
|
||||
// // outline: true,
|
||||
// // outlineColor: "#000000",
|
||||
// outlineWidth: 2,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: verticalOrigin,
|
||||
// visibleDepth: false,
|
||||
// clampToGround: true,
|
||||
|
||||
text: pointData.towerName,
|
||||
font_size: 12,
|
||||
font_family: "楷体",
|
||||
color: "#FFFFFF",
|
||||
background: true,
|
||||
backgroundColor: "#000000",
|
||||
backgroundOpacity: 0.8,
|
||||
outlineWidth: 2,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: labelVerticalOrigin, // 动态设置上下位置
|
||||
pixelOffset: new Cesium.Cartesian2(0, pixelOffsetY), // Y轴偏移
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
|
||||
scaleByDistance: new Cesium.NearFarScalar(
|
||||
1000,
|
||||
1.0,
|
||||
100000,
|
||||
0.5
|
||||
), // 随距离缩放
|
||||
},
|
||||
attr: { remark: "示例1" },
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
|
||||
// 添加点击事件
|
||||
billboard.on(mars3d.EventType.click, function (event) {
|
||||
// console.log("点击了标点", event.graphic.attr);
|
||||
|
|
@ -658,6 +786,9 @@ function addAllMapPoints(graphicLayer) {
|
|||
});
|
||||
|
||||
graphicLayer.addGraphic(billboard);
|
||||
|
||||
graphicLayerList.push(billboard);
|
||||
graphicLayerList.push(graphic);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -665,11 +796,14 @@ function addAllMapPoints(graphicLayer) {
|
|||
if (crossingListNew.length > 0) {
|
||||
crossingListNew.forEach((pointData, index) => {
|
||||
const billboard = new mars3d.graphic.BillboardEntity({
|
||||
position: [pointData.baiduLon, pointData.baiduLat],
|
||||
position: [pointData.baiduLon, pointData.baiduLat, 1000],
|
||||
style: {
|
||||
image: iconTypeList[21],
|
||||
width: 20,
|
||||
height: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -780,6 +914,7 @@ function addAllMapPoints(graphicLayer) {
|
|||
});
|
||||
|
||||
graphicLayer.addGraphic(billboard);
|
||||
graphicLayerList.push(billboard);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -799,6 +934,7 @@ function connectPointsWithLine(graphicLayer, points) {
|
|||
attr: { name: "高压线路" },
|
||||
});
|
||||
graphicLayer.addGraphic(polyline);
|
||||
graphicLayerList.push(polyline);
|
||||
}
|
||||
|
||||
function clearAllOverlays() {
|
||||
|
|
@ -823,7 +959,7 @@ function calculateBounds(points) {
|
|||
}
|
||||
|
||||
// 添加标点折线（智能绘制虚实线）
|
||||
function addMapLine(graphicLayer) {
|
||||
async function addMapLine() {
|
||||
// 存储所有线段
|
||||
const segments = [];
|
||||
// 绘制杆塔线
|
||||
|
|
@ -1016,7 +1152,7 @@ function getSegmentColor(startPoint, endPoint) {
|
|||
}
|
||||
|
||||
// 绘制牵张场地区域图
|
||||
function addMapAThousandFields(graphicLayer) {
|
||||
async function addMapAThousandFields() {
|
||||
if (aThousandFieldsList.length > 0) {
|
||||
aThousandFieldsList.forEach((item) => {
|
||||
if (
|
||||
|
|
@ -1057,10 +1193,12 @@ function addMapAThousandFields(graphicLayer) {
|
|||
outline: true, // 是否显示边框
|
||||
outlineWidth: 2, // 边框宽度(像素)
|
||||
outlineColor: "#00FFFF", // 边框颜色
|
||||
clampToGround: true,
|
||||
},
|
||||
attr: { remark: "示例区域" },
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
graphicLayerList.push(graphic);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue