From f996c7437b0a7d4e7bafeb7c71b7c86b7170c8bd Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 27 二月 2025 17:15:13 +0800
Subject: [PATCH] 地图图标展示
---
customer_list/common/static/fonts/ywiconfont/iconfont.ttf | 0
customer_list/common/static/fonts/ywiconfont/iconfont.woff | 0
src/model/map/OLMap.ts | 57 ++++++++++++++++++++++++++++
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue | 10 +++++
customer_list/common/static/fonts/ywiconfont/iconfont.css | 10 +++-
customer_list/common/static/fonts/ywiconfont/iconfont.woff2 | 0
6 files changed, 74 insertions(+), 3 deletions(-)
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.css b/customer_list/common/static/fonts/ywiconfont/iconfont.css
index 1aad52e..ea31c8d 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.css
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "ywifont"; /* Project id 4655417 */
- src: url('iconfont.woff2?t=1740644250620') format('woff2'),
- url('iconfont.woff?t=1740644250620') format('woff'),
- url('iconfont.ttf?t=1740644250620') format('truetype');
+ src: url('iconfont.woff2?t=1740647460693') format('woff2'),
+ url('iconfont.woff?t=1740647460693') format('woff'),
+ url('iconfont.ttf?t=1740647460693') format('truetype');
}
.ywifont {
@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
+.ywicon-qingchu:before {
+ content: "\e747";
+}
+
.ywicon-position-fill:before {
content: "\e642";
}
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
index be39ae9..32b6468 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
index 918037b..441a9a3 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2 b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
index 2577663..872db61 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
Binary files differ
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue
index eb56e62..53f905e 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue
@@ -26,6 +26,13 @@
<div class="mt-auto mb-32 flex gap-2 flex-col">
<div
class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin"
+ title="娓呴櫎鏍囪"
+ @click="clearMarker"
+ >
+ <span class="ywifont ywicon !text-[26px] ywicon-qingchu" ></span>
+ </div>
+ <div
+ class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin"
:title="fullScreenTitle"
@click="toggleFullScreen"
>
@@ -118,6 +125,9 @@
activeMapToolPanel.value = type;
};
+const clearMarker = () => {
+ props.olMap.clearMarker();
+};
const locationLoading = ref(false);
const locationCurrent = async () => {
locationLoading.value = true;
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index 5769df6..1666f55 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -407,6 +407,7 @@
const zoom = that.map.getView().getZoom(); //鑾峰彇褰撳墠鍦板浘鐨勭缉鏀剧骇鍒�
Logger.info('褰撳墠鍦板浘缂╂斁绾у埆涓猴細' + zoom);
});
+ this.pointermove();
}
hightLightColor: '0000FFFF';
@@ -769,8 +770,11 @@
layers.push(layer);
});
const feature = features[0];
+ feature?.get('click')?.(event);
+
const layer = layers[0];
if (layer === this.drawLayer) return;
+ this.labelOverlay?.setVisible(false);
if (feature !== this.activeFeature.value) {
this.emit('featureChange', feature, layer);
@@ -1392,6 +1396,32 @@
}
}
+ private labelOverlay: MarkerOverlay = null;
+ private initLabelOverlay() {
+ if (this.labelOverlay) return;
+ // 鍒涘缓涓�涓� div 鍏冪礌鐢ㄤ簬鏄剧ず鏍囩
+ const labelElement = document.createElement('div');
+ labelElement.className = 'ol-label-overlay';
+ labelElement.style.position = 'relative';
+ labelElement.style.background = 'rgba(0,0,0,0.6)';
+ labelElement.style.borderRadius = '4px';
+ labelElement.style.color = '#fff';
+ labelElement.style.padding = '4px 8px';
+ labelElement.style.whiteSpace = 'nowrap';
+ labelElement.style.fontSize = '12px';
+ labelElement.style.transform = 'translate(-50%, -100%)';
+ labelElement.style.marginBottom = '8px';
+
+ // 鍒涘缓 overlay
+ this.labelOverlay = new MarkerOverlay({
+ element: labelElement,
+ offset: [0, 0],
+ positioning: 'bottom-center',
+ });
+
+ // 娣诲姞鍒板湴鍥�
+ this.map.addOverlay(this.labelOverlay);
+ }
private preSearchHighlightFeatures: Feature[] = [];
highlightSearch(features) {
if (!Array.isArray(features)) {
@@ -1408,6 +1438,18 @@
});
// 璁剧疆瀛椾綋鍥炬爣鏍峰紡
+ // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉
+ // iconFeature.set('click', (event) => {
+ // // 鍒濆鍖� labelOverlay
+ // this.initLabelOverlay();
+ // // 鑾峰彇鐐瑰嚮浣嶇疆鐨勫潗鏍�
+ // const coordinate = event.coordinate;
+ // // 璁剧疆 labelOverlay 鐨勫唴瀹瑰拰浣嶇疆
+ // const element = this.labelOverlay.getElement();
+ // element.innerHTML = `绗�${index + 1}涓綅缃甡;
+ // this.labelOverlay.setPosition(coordinate);
+ // });
+
iconFeature.setStyle([
new Style({
text: new Text({
@@ -1454,6 +1496,21 @@
}
this.preSearchHighlightFeatures = positionFeatures;
}
+
+ pointermove() {
+ this.map.on('pointermove', (e) => {
+ if (this.map.hasFeatureAtPixel(e.pixel)) {
+ this.map.getViewport().style.cursor = 'pointer';
+ } else {
+ this.map.getViewport().style.cursor = 'inherit';
+ }
+ });
+ }
+
+ clearMarker() {
+ this.clearObjectSearch();
+ }
+
getWMTS = () => {
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
--
Gitblit v1.9.3