From 7866aa30bd13dab1fc0662e1baf6675d0dc1b282 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 02 四月 2025 15:42:30 +0800
Subject: [PATCH] 修改意见
---
src/model/map/OLMap.ts | 151 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 142 insertions(+), 9 deletions(-)
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index 93b490b..1666f55 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -3,7 +3,7 @@
import type { Overlay } from 'ol';
import { Feature, Map as OpenLayerMap, View } from 'ol';
import type { Extent } from 'ol/extent';
-import { extend, getTopLeft, getWidth } from 'ol/extent';
+import { extend, getCenter, getTopLeft, getWidth } from 'ol/extent';
import type { FeatureLike } from 'ol/Feature';
import MVT from 'ol/format/MVT.js';
import WKT from 'ol/format/WKT';
@@ -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);
@@ -849,7 +853,7 @@
setThemeById(themeId: string) {
let group;
let theme;
- travelTree(this.themeInfo.value, (item,index,array,parent) => {
+ travelTree(this.themeInfo.value, (item, index, array, parent) => {
if (item.type === 'theme' && item.id === themeId) {
group = parent;
theme = item;
@@ -1137,19 +1141,59 @@
/**
* 鏀惧ぇ鍦板浘
*/
- zoomIn() {
+ zoomIn(offsetLevel = 1) {
const view = this.map.getView();
const zoom = view.getZoom();
- view.setZoom(zoom + 1);
+ view.setZoom(zoom + offsetLevel);
}
/**
* 缂╁皬鍦板浘
*/
- zoomOut() {
+ zoomOut(offsetLevel = 1) {
const view = this.map.getView();
const zoom = view.getZoom();
- view.setZoom(zoom - 1);
+ view.setZoom(zoom - offsetLevel);
+ }
+
+ /**
+ * 鍦板浘宸︾Щ
+ */
+ panLeft(offset = 1000) {
+ const view = this.map.getView();
+ const center = view.getCenter();
+ if (!center) return;
+ view.setCenter([center[0] - offset, center[1]]);
+ }
+
+ /**
+ * 鍦板浘鍙崇Щ
+ */
+ panRight(offset = 1000) {
+ const view = this.map.getView();
+ const center = view.getCenter();
+ if (!center) return;
+ view.setCenter([center[0] + offset, center[1]]);
+ }
+
+ /**
+ * 鍦板浘涓婄Щ
+ */
+ panUp(offset = 1000) {
+ const view = this.map.getView();
+ const center = view.getCenter();
+ if (!center) return;
+ view.setCenter([center[0], center[1] + offset]);
+ }
+
+ /**
+ * 鍦板浘涓嬬Щ
+ */
+ panDown(offset = 1000) {
+ const view = this.map.getView();
+ const center = view.getCenter();
+ if (!center) return;
+ view.setCenter([center[0], center[1] - offset]);
}
private tileUrlFunction(url) {
@@ -1352,11 +1396,85 @@
}
}
+ 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)) {
features = [features];
}
+
+ const positionFeatures = features.map((feature, index, array) => {
+ const geometry = feature.getGeometry();
+ const center = geometry.getExtent ? getCenter(geometry.getExtent()) : geometry.getCoordinates();
+
+ // 鍒涘缓涓�涓柊鐨凢eature鐢ㄤ簬鏄剧ず瀛椾綋鍥炬爣
+ const iconFeature = new Feature({
+ geometry: new Point(center),
+ });
+
+ // 璁剧疆瀛椾綋鍥炬爣鏍峰紡
+ // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉
+ // 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({
+ text: '\ue642', // 浣跨敤瀛椾綋鍥炬爣鐨剈nicode缂栫爜
+ font: '24px "ywifont"', // 璁剧疆瀛椾綋澶у皬鍜屽瓧浣撳悕绉�
+ fill: new Fill({
+ color: '#1677ff',
+ }),
+ offsetY: -20, // 璋冩暣鍥炬爣浣嶇疆
+ }),
+ }),
+ new Style({
+ text: new Text({
+ text: array.length === 1 ? '' : index + 1, // 娣诲姞鏁板瓧
+ font: '14px Arial', // 璁剧疆鏁板瓧瀛椾綋
+ fill: new Fill({
+ color: '#ffffff', // 鏁板瓧棰滆壊璁句负鐧借壊
+ }),
+ offsetY: -20, // 涓庡浘鏍囦繚鎸佺浉鍚岀殑鍋忕Щ
+ }),
+ }),
+ ]);
+
+ return iconFeature;
+ });
// 鍒涘缓楂樹寒鍥惧眰
if (!this.searchHighlightLayer) {
this.searchHighlightLayer = new VectorLayer({
@@ -1373,11 +1491,26 @@
}
// 璁剧疆楂樹寒瑕佺礌
- if (features && features.length > 0) {
- this.searchHighlightLayer.getSource().addFeatures(features);
+ if (positionFeatures && positionFeatures.length > 0) {
+ this.searchHighlightLayer.getSource().addFeatures(positionFeatures);
}
- this.preSearchHighlightFeatures = features;
+ 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