|
|
@@ -87,6 +87,7 @@ export default {
|
|
|
statusIntersections: {},
|
|
|
currentZoomSize: 20, // 保存当前的动态尺寸(与 zoom=15 基准一致)
|
|
|
markerById: {}, // ID → marker 索引,加速 focusById 查找
|
|
|
+ startEndMarkers: [], // 起点/终点 marker 引用,缩放时需重建
|
|
|
subAreaOverlays: [], // 子区蒙层覆盖物
|
|
|
};
|
|
|
},
|
|
|
@@ -141,6 +142,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
this.routeGroups = {};
|
|
|
+ this.startEndMarkers = [];
|
|
|
}
|
|
|
|
|
|
// 4. 清理子区蒙层
|
|
|
@@ -316,6 +318,7 @@ export default {
|
|
|
this.map.on('zoomend', () => {
|
|
|
if (!this.isComponentDestroyed) {
|
|
|
this.currentZoomSize = this.getDotSizeByZoom();
|
|
|
+ this.rebuildStartEndMarkers();
|
|
|
}
|
|
|
});
|
|
|
} catch (err) {
|
|
|
@@ -446,6 +449,7 @@ export default {
|
|
|
});
|
|
|
|
|
|
this.routeGroups = {};
|
|
|
+ this.startEndMarkers = [];
|
|
|
this.dotMarkers = [];
|
|
|
},
|
|
|
|
|
|
@@ -940,6 +944,25 @@ export default {
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
+ * 缩放后重建起点/终点 marker,让高德重新计算 anchor 偏移
|
|
|
+ */
|
|
|
+ rebuildStartEndMarkers() {
|
|
|
+ if (!this.map || this.startEndMarkers.length === 0) return;
|
|
|
+ for (const entry of this.startEndMarkers) {
|
|
|
+ const { marker, position, config, type } = entry;
|
|
|
+ // 生成新的 content HTML(此时 CSS 变量已更新)
|
|
|
+ const size = this.currentZoomSize;
|
|
|
+ const specialSize = Math.max(12, size * 1.2);
|
|
|
+ const newContent = `
|
|
|
+ <div class="pure-light-node start-end-node" style="width: ${specialSize}px; height: ${specialSize + 6}px; background: transparent; border: none; display: flex; justify-content: center; align-items: flex-end; cursor: pointer; transform-origin: bottom center;">
|
|
|
+ <img src="${require(`@/assets/map/${type}.png`)}" style="width: 100%; height: auto; object-fit: contain; pointer-events: none;" />
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ marker.setContent(newContent);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 创建交通信号灯标记
|
|
|
* @param {Array<number>|Object} position - 位置坐标
|
|
|
* @param {Object} config - 配置对象
|
|
|
@@ -1014,6 +1037,11 @@ export default {
|
|
|
if (config.id) this.markerById[config.id] = marker;
|
|
|
if (config['路口编号']) this.markerById[config['路口编号']] = marker;
|
|
|
|
|
|
+ // 记录起点/终点 marker,缩放时需重建以修正 anchor 偏移
|
|
|
+ if (isStartEnd) {
|
|
|
+ this.startEndMarkers.push({ marker, position: [lng, lat], config, type });
|
|
|
+ }
|
|
|
+
|
|
|
marker.on('click', (e) => {
|
|
|
if (this.isComponentDestroyed) return;
|
|
|
const extData = e.target.getExtData();
|