From 6e2557b3ae3e1b43bc01a5122f5fd4aa9b83d755 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期日, 09 二月 2025 18:51:33 +0800
Subject: [PATCH] 整理绘制
---
src/model/map/OLMap.ts | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 154 insertions(+), 6 deletions(-)
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index e1869c7..810b19e 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -24,6 +24,8 @@
import type { Ref, ShallowRef } from 'vue';
import { markRaw, ref } from 'vue';
import { MarkerOverlay } from './overlay/marker';
+import { Text } from 'ol/style';
+
export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
/** @description 榛樿鍦板浘 */
@@ -80,6 +82,8 @@
/** @description 鍥惧眰鎺у埗淇℃伅 */
layerInfo = ref([] as any[]);
+
+ drawStyles = ref([] as any[]);
/** @description 涓婚淇℃伅 */
themeInfo = ref([] as any[]);
@@ -151,6 +155,150 @@
this.applySourceType(this.activeSourceType.value);
this.listenMapClick();
this.addBasicControl();
+ }
+
+ // 淇濆瓨鐐规牱寮忕紦瀛�
+ pointStyeMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁鐐圭殑閰嶇疆鑾峰彇鏍峰紡
+ * @param config
+ * @returns
+ */
+ getPointStyles(config: { size; color; style }) {
+ const pSize = config.size;
+ if (!pSize) return null;
+
+ const pcolor = config.color;
+ const pstyle = config.style;
+
+ const pkey = `${pstyle}_${pSize}_${pcolor}`;
+
+ if (!this.pointStyeMap[pkey]) {
+ const drawStyle = this.drawStyles.value.find((item) => item.id === pstyle + '');
+ const drawStyleType = drawStyle?.type;
+ const config = drawStyle?.config;
+
+ const drawStyleConfigType = drawStyle?.config?.type;
+ if (drawStyleType === 'POINT') {
+ if (drawStyleConfigType === 'circle') {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ } else if (drawStyleConfigType === 'font') {
+ this.pointStyeMap[pkey] = new Style({
+ text: new Text({
+ font: `${pSize}px "ywifont"`,
+ text: config?.text ?? '',
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ } else {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ }
+ } else {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ }
+ }
+ return this.pointStyeMap[pkey];
+ }
+
+ // 淇濆瓨绾挎牱寮忕紦瀛�
+ lineStyleMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁绾跨殑閰嶇疆鑾峰彇鏍峰紡
+ * @param config
+ */
+ getLineStyles(config: { lsize; lcolor; lstyle }) {
+ const lSize = config.lsize;
+ if (!lSize) return null;
+ const lColor = config.lcolor;
+ const lstyle = config.lstyle;
+
+ const lKey = `${lstyle}_${lSize}_${lColor}`;
+ if (!this.lineStyleMap[lKey]) {
+ const drawStyle = this.drawStyles.value.find((item) => item.id === lstyle + '');
+ const drawStyleType = drawStyle?.type;
+ const config = drawStyle?.config;
+ this.lineStyleMap[lKey] = new Style({
+ // image: new Circle({
+ // radius: lsize,
+ // fill: new Fill({ color: `#${color}` }),
+ // }),
+ stroke: new Stroke({
+ color: `#${lColor}`,
+ width: lSize,
+ }),
+ });
+ }
+ return [this.lineStyleMap[lKey]];
+ }
+
+ private maxTextResolution = 1;
+ getText(textContent, resolution) {
+ let text = `${textContent}`;
+ if (resolution > this.maxTextResolution) {
+ text = '';
+ }
+
+ // else if (type == 'hide') {
+ // text = '';
+ // } else if (type == 'shorten') {
+ // text = text.trunc(12);
+ // } else if (type == 'wrap' && (!dom.placement || dom.placement.value != 'line')) {
+ // text = stringDivider(text, 16, '\n');
+ // }
+
+ return text;
+ }
+
+ createTextStyle(textContent, resolution) {
+ return new Style({
+ text: new Text({
+ text: this.getText(textContent, resolution),
+ font: '14px Arial',
+ fill: new Fill({ color: '#000' }),
+ stroke: new Stroke({ color: '#fff', width: 2 }),
+ offsetX: 10, // 鏂囧瓧鐩稿浜庡嚑浣曚腑蹇冪殑姘村钩鍋忕Щ
+ offsetY: 20, // 鏂囧瓧鐩稿浜庡嚑浣曚腑蹇冪殑鍨傜洿鍋忕Щ
+ }),
+ });
+ }
+
+ // 淇濆瓨鏍囩鏍峰紡缂撳瓨
+ labelStyleMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁鏍囩鐨勯厤缃幏鍙栨牱寮�
+ * @param config
+ */
+ getLabelStyles(config: { textContent; resolution }) {
+ const textContent = config.textContent;
+ if(!textContent) return null;
+ const resolution = config.resolution;
+ if (!textContent) return null;
+ if (!this.labelStyleMap[textContent]) {
+ this.labelStyleMap[textContent] = this.createTextStyle(textContent, resolution);
+ }
+ return this.labelStyleMap[textContent]
+ }
+
+ setDrawStyles(styles: any[]) {
+ this.drawStyles.value = styles;
}
applySourceType(type: GaoDeSourceType = GaoDeSourceType.Vector) {
@@ -276,16 +424,16 @@
if (feature !== this.activeFeature.value) {
this.emit('featureChange', feature, layer);
}
- if(feature){
- console.log("馃殌 ~ feature:", feature);
+ if (feature) {
+ console.log('馃殌 ~ feature:', feature);
const otype = feature.get('otype');
- console.log("馃殌 ~ otype:", otype)
+ console.log('馃殌 ~ otype:', otype);
const oname = feature.get('oname');
- console.log("馃殌 ~ oname:", oname)
+ console.log('馃殌 ~ oname:', oname);
const geometryType = feature.getGeometry().getType();
- console.log("馃殌 ~ geometryType:", geometryType)
+ console.log('馃殌 ~ geometryType:', geometryType);
const properties = feature.getProperties();
- console.log("馃殌 ~ properties:", properties)
+ console.log('馃殌 ~ properties:', properties);
}
this.activeFeature.value = feature;
// this.displayFeatureInfo(feature);
--
Gitblit v1.9.3