|
@@ -121,8 +121,10 @@ import {getDataMapList} from "@/api/jobUserManager/jobuser";
|
|
|
import thIcon from "@/assets/images/blueTh.png"
|
|
|
|
|
|
const T = (window as any).T;
|
|
|
-const zoom = 11;
|
|
|
+const zoom = 9;
|
|
|
let map = null;
|
|
|
+// 天地图默认中心点坐标
|
|
|
+const centerLngLat = new T.LngLat(114.416110, 23.111582);
|
|
|
// 地图标记点
|
|
|
let markerList = ref<Array<any>>([]);
|
|
|
let labelList = ref<Array<any>>([]);
|
|
@@ -203,26 +205,14 @@ const initMap = () => {
|
|
|
map = new T.Map('mapDiv');
|
|
|
if (map != null) {
|
|
|
// 设置地图显示中心点为惠州市人民政府
|
|
|
- (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), zoom);
|
|
|
+ (map as any).centerAndZoom(centerLngLat, zoom);
|
|
|
|
|
|
// 地图缩放监听事件
|
|
|
(map as any).addEventListener("zoomend", function () {
|
|
|
let zoomLevel = (map as any).getZoom();
|
|
|
console.log(zoomLevel);
|
|
|
- // 计算新的icon大小
|
|
|
- let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
|
|
|
- console.log(newIconSize);
|
|
|
- // 计算新的icon锚点位置
|
|
|
- let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
|
|
|
- // 计算新的偏移量,保持 label 居中且不超过初始值
|
|
|
- let offsetX = -20 + ((newIconSize - 45) / 3);
|
|
|
- let offsetY = 28 + ((newIconSize - 45) / 3);
|
|
|
- // 确保偏移量不超过初始值
|
|
|
- offsetX = Math.max(offsetX, -20);
|
|
|
- offsetY = Math.min(offsetY, 28);
|
|
|
- // 更新 label 的偏移量
|
|
|
- let newOffset = new T.Point(offsetX, offsetY);
|
|
|
- let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
|
|
|
+ const sizeData = computeMarkerSize(zoomLevel);
|
|
|
+ console.log(sizeData)
|
|
|
|
|
|
if (zoomLevel <= 9) {
|
|
|
// 删除小标点
|
|
@@ -232,13 +222,15 @@ const initMap = () => {
|
|
|
labelList.value.forEach((item: any) => {
|
|
|
(map as any).removeOverLay(item);
|
|
|
});
|
|
|
- // 显示总数标点
|
|
|
- jobUserCountMarker.value.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
|
|
|
- jobUserCountMarker.value.getIcon().setIconAnchor(iconAnchor);
|
|
|
- (map as any).addOverLay(jobUserCountMarker.value);
|
|
|
- jobUserCountLabel.value.setOffset(newOffset);
|
|
|
- jobUserCountLabel.value.setFontSize(fontSize);
|
|
|
- (map as any).addOverLay(jobUserCountLabel.value);
|
|
|
+ if (jobUserCountMarker.value != null) {
|
|
|
+ // 显示总数标点
|
|
|
+ jobUserCountMarker.value.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
|
|
|
+ jobUserCountMarker.value.getIcon().setIconAnchor(sizeData.iconAnchor);
|
|
|
+ (map as any).addOverLay(jobUserCountMarker.value);
|
|
|
+ jobUserCountLabel.value.setOffset(sizeData.labelOffset);
|
|
|
+ jobUserCountLabel.value.setFontSize(sizeData.fontSize);
|
|
|
+ (map as any).addOverLay(jobUserCountLabel.value);
|
|
|
+ }
|
|
|
} else {
|
|
|
// 删除总数标点
|
|
|
(map as any).removeOverLay(jobUserCountMarker.value);
|
|
@@ -246,15 +238,14 @@ const initMap = () => {
|
|
|
|
|
|
markerList.value.forEach((item: any) => {
|
|
|
(map as any).removeOverLay(item);
|
|
|
- item.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
|
|
|
- item.getIcon().setIconAnchor(iconAnchor);
|
|
|
+ item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
|
|
|
+ item.getIcon().setIconAnchor(sizeData.iconAnchor);
|
|
|
(map as any).addOverLay(item);
|
|
|
})
|
|
|
-
|
|
|
labelList.value.forEach((item: any) => {
|
|
|
(map as any).removeOverLay(item);
|
|
|
- item.setOffset(newOffset);
|
|
|
- item.setFontSize(fontSize);
|
|
|
+ item.setOffset(sizeData.labelOffset);
|
|
|
+ item.setFontSize(sizeData.fontSize);
|
|
|
(map as any).addOverLay(item);
|
|
|
})
|
|
|
}
|
|
@@ -283,14 +274,17 @@ function setMapMarker() {
|
|
|
labelNumberCount.value = 0;
|
|
|
|
|
|
// 设置中心点
|
|
|
- (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), 10);
|
|
|
+ (map as any).centerAndZoom(centerLngLat, zoom);
|
|
|
|
|
|
if (jobUserList.value.length > 0) {
|
|
|
+ let zoomLevel = (map as any).getZoom();
|
|
|
+ const sizeData = computeMarkerSize(zoomLevel);
|
|
|
+
|
|
|
// 设置图标
|
|
|
const icon = new T.Icon({
|
|
|
iconUrl: thIcon,
|
|
|
- iconSize: new T.Point(20, 20),
|
|
|
- iconAnchor: new T.Point(10, 20)
|
|
|
+ iconSize: new T.Point(sizeData.iconSize, sizeData.iconSize),
|
|
|
+ iconAnchor: sizeData.iconAnchor
|
|
|
})
|
|
|
|
|
|
// 筛选数据并统计相同点的总数
|
|
@@ -312,17 +306,21 @@ function setMapMarker() {
|
|
|
});
|
|
|
|
|
|
// 设置总数标点
|
|
|
- const marker = new T.Marker(new T.LngLat(114.416110, 23.111582), {icon: icon}); // 创建标注
|
|
|
+ const marker = new T.Marker(centerLngLat, {icon: icon}); // 创建标注
|
|
|
let label = new T.Label({
|
|
|
text: labelNumberCount.value + "", //文本标注的内容
|
|
|
- position: new T.LngLat(114.416110, 23.111582), //文本标注的地理位置
|
|
|
- offset: new T.Point(-20, 23), //文本标注的位置偏移值
|
|
|
+ position: centerLngLat, //文本标注的地理位置
|
|
|
+ offset: sizeData.labelOffset, //文本标注的位置偏移值
|
|
|
});
|
|
|
label.setBackgroundColor("transparent");
|
|
|
label.setBorderColor("transparent");
|
|
|
label.setBorderLine(0);
|
|
|
- label.setFontSize(12);
|
|
|
+ label.setFontSize(sizeData.fontSize);
|
|
|
label.setFontColor("white");
|
|
|
+ if (zoomLevel <= 9) {
|
|
|
+ (map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
+ (map as any).addOverLay(label);// 将标注添加到地图中
|
|
|
+ }
|
|
|
jobUserCountMarker.value = marker;
|
|
|
jobUserCountLabel.value = label;
|
|
|
|
|
@@ -334,15 +332,17 @@ function setMapMarker() {
|
|
|
let label = new T.Label({
|
|
|
text: item.count + "", //文本标注的内容
|
|
|
position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
|
|
|
- offset: new T.Point(-20, 23), //文本标注的位置偏移值
|
|
|
+ offset: sizeData.labelOffset, //文本标注的位置偏移值
|
|
|
});
|
|
|
label.setBackgroundColor("transparent");
|
|
|
label.setBorderColor("transparent");
|
|
|
label.setBorderLine(0);
|
|
|
- label.setFontSize(12);
|
|
|
+ label.setFontSize(sizeData.fontSize);
|
|
|
label.setFontColor("white");
|
|
|
- (map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
- (map as any).addOverLay(label);// 将标注添加到地图中
|
|
|
+ if (zoomLevel >= 10) {
|
|
|
+ (map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
+ (map as any).addOverLay(label);// 将标注添加到地图中
|
|
|
+ }
|
|
|
markerList.value.push(marker);
|
|
|
labelList.value.push(label);
|
|
|
}
|
|
@@ -350,6 +350,30 @@ function setMapMarker() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 天地图按缩放基本计算图标与文本的大小与锚点偏移值
|
|
|
+function computeMarkerSize(zoomLevel: any) {
|
|
|
+ // 计算新的icon大小
|
|
|
+ let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
|
|
|
+ // 计算新的icon锚点位置
|
|
|
+ let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
|
|
|
+ // 计算新的偏移量,保持 label 居中且不超过初始值
|
|
|
+ let offsetX = -20 + ((newIconSize - 45) / 3);
|
|
|
+ let offsetY = 28 + ((newIconSize - 45) / 3);
|
|
|
+ // 确保偏移量不超过初始值
|
|
|
+ offsetX = Math.max(offsetX, -20);
|
|
|
+ offsetY = Math.min(offsetY, 28);
|
|
|
+ // 更新 label 的偏移量
|
|
|
+ let newOffset = new T.Point(offsetX, offsetY);
|
|
|
+ let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
|
|
|
+
|
|
|
+ return {
|
|
|
+ iconSize: newIconSize,
|
|
|
+ iconAnchor,
|
|
|
+ labelOffset: newOffset,
|
|
|
+ fontSize
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 选择站点
|
|
|
function checkJobUser(jobUser: any) {
|
|
|
nowCheckJobUser.value = JSON.parse(JSON.stringify(jobUser))
|