cd-mapgis 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-mapgis",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "type": "module",

package/src/MapRender.js

@@ -1,459 +1,13 @@
-// 动态导入 OpenLayers（避免打包问题）
-let Map, View, TileLayer, XYZ, fromLonLat, toLonLat, Feature, Point, VectorLayer, VectorSource, Style, Circle, Fill, Stroke, Text, Icon;
-
-// 地图实例和标记图层
-let map = null;
-let markerLayer = null;
-let markers = []; // 存储所有添加的标记
+import Index from './index.js';
 
 export default {
-	data() {
-		return {
-			mapConfig: {}
-		}
-	},
-	async mounted() {
-		// 动态加载 OpenLayers
-		await this.loadOpenLayers();
-		this.initMap();
-	},
-	methods: {
-		// 动态加载 OpenLayers 模块
-		async loadOpenLayers() {
-			try {
-
-				// 导入核心模块
-				const mapDefault = await import('ol/Map.js');
-				const viewDefault = await import('ol/View.js');
-				const layerDefault = await import('ol/layer/Tile.js');
-				const sourceDefault = await import('ol/source/XYZ.js');
-				const projDefault = await import('ol/proj.js');
-
-				// 导入要素和矢量相关模块
-				const featureDefault = await import('ol/Feature.js');
-				const geomDefault = await import('ol/geom/Point.js');
-				const layerVectorDefault = await import('ol/layer/Vector.js');
-				const sourceVectorDefault = await import('ol/source/Vector.js');
-				
-				// 导入样式相关模块
-				const styleDefault = await import('ol/style/Style.js');
-				const circleDefault = await import('ol/style/Circle.js');
-				const fillDefault = await import('ol/style/Fill.js');
-				const strokeDefault = await import('ol/style/Stroke.js'); // 添加缺失的Stroke导入
-				const textDefault = await import('ol/style/Text.js'); // 添加缺失的Text导入
-				const iconDefault = await import('ol/style/Icon.js'); // 添加Icon导入
-
-				// 赋值默认导出
-				Map = mapDefault.default;
-				View = viewDefault.default;
-				TileLayer = layerDefault.default;
-				XYZ = sourceDefault.default;
-				fromLonLat = projDefault.fromLonLat; // 修复fromLonLat的导入方式
-				toLonLat = projDefault.toLonLat; // 添加toLonLat导入
-				
-				Feature = featureDefault.default;
-				Point = geomDefault.default;
-				VectorLayer = layerVectorDefault.default;
-				VectorSource = sourceVectorDefault.default;
-				
-				Style = styleDefault.default;
-				Circle = circleDefault.default;
-				Fill = fillDefault.default;
-				Stroke = strokeDefault.default;
-				Text = textDefault.default;
-				Icon = iconDefault.default;
-			} catch (error) {
-				console.error('Failed to load OpenLayers:', error);
-				// 移除备用加载方案，直接抛出错误让上层处理
-				throw error;
-			}
-		},
-
-		// 初始化地图
-		initMap() {
-			const container = document.getElementById('olMap');
-			if (!container) {
-				console.error('Map container not found');
-				return;
-			}
-
-			try {
-				// 创建天地图底图
-				const tdtBaseLayer = new TileLayer({
-					source: new XYZ({
-						url: `http://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.mapConfig.tdtKey}`,
-						projection: 'EPSG:3857',
-						crossOrigin: 'anonymous'
-					}),
-					visible: true
-				});
-
-				// 创建天地图注记层
-				const tdtLabelLayer = new TileLayer({
-					source: new XYZ({
-						url: `http://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.mapConfig.tdtKey}`,
-						projection: 'EPSG:3857',
-						crossOrigin: 'anonymous'
-					}),
-					visible: true
-				});
-
-				// 初始化地图实例
-				map = new Map({
-					target: container,
-					layers: [tdtBaseLayer, tdtLabelLayer],
-					view: new View({
-						center: fromLonLat(this.mapConfig.center || [116.3974, 39.9093]),
-						zoom: this.mapConfig.zoom || 10,
-						minZoom: 3,
-						maxZoom: 18,
-						enableRotation: false
-					}),
-					controls: []
-				});
-
-				// 监听地图视图变化，使用bind确保this上下文正确
-				map.getView().on('change:center', this.handleViewChange.bind(this));
-				map.getView().on('change:resolution', this.handleViewChange.bind(this));
-
-				// 地图初始化完成，通过方法调用通知Vue组件
-
-				// 通知Vue组件地图初始化完成
-				try {
-					if (this.$ownerInstance && typeof this.$ownerInstance.callMethod === 'function') {
-						this.$ownerInstance.callMethod('onMapInitialized');
-					} else if (this.ownerInstance && typeof this.ownerInstance.callMethod === 'function') {
-						this.ownerInstance.callMethod('onMapInitialized');
-					}
-				} catch (error) {
-					console.error('Failed to notify map initialization:', error);
-				}
-			} catch (error) {
-				console.error('Map initialization failed:', error);
-			}
-		},
-
-		// 处理视图变化
-		handleViewChange() {
-			if (!map) {
-				console.warn('Map not initialized in handleViewChange');
-				return;
-			}
-
-			const view = map.getView();
-			if (!view) {
-				console.warn('Map view not available');
-				return;
-			}
-
-			const center = toLonLat(view.getCenter());
-			const zoom = view.getZoom();
-
-			// 确保center和zoom都有有效值
-			if (!center || zoom === undefined) {
-				console.warn('Invalid center or zoom values');
-				return;
-			}
-
-			try {
-				// 确保center数组中的所有元素都是数字类型
-				const numericCenter = center.map(coord => typeof coord === 'string' ? parseFloat(coord) : coord);
-				
-				// 首先尝试使用$ownerInstance（标准方式）
-				if (this.$ownerInstance && typeof this.$ownerInstance.callMethod === 'function') {
-					this.$ownerInstance.callMethod('onMapMove', {
-						center: numericCenter,
-						zoom: zoom
-					});
-				} 
-				// 兼容旧版本的ownerInstance
-				else if (this.ownerInstance && typeof this.ownerInstance.callMethod === 'function') {
-					this.ownerInstance.callMethod('onMapMove', {
-						center: numericCenter,
-						zoom: zoom
-					});
-				}
-				// 如果都不可用，添加额外的日志信息
-				else {
-					console.warn('No valid owner instance found for calling onMapMove');
-				}
-			} catch (error) {
-				// 记录详细错误信息以便调试
-				console.error('Failed to call onMapMove:', error);
-				console.error('Error stack:', error.stack);
-			}
-		},
-
-		// 处理属性变化（从 Vue 组件传递过来的配置更新）
-		onPropChange(newValue, oldValue) {
-			this.mapConfig = newValue;
-			if (map && newValue.center && newValue.zoom !== undefined) {
-				const view = map.getView();
-
-				view.animate({
-					center: fromLonLat(newValue.center),
-					zoom: newValue.zoom,
-					duration: 500
-				})
-			}
-
-			// 处理标记数据变化，添加完整的变更比较逻辑
-			if (map && newValue.markers) {
-				// 确保标记图层存在
-				if (!markerLayer && VectorLayer && VectorSource) {
-					markerLayer = new VectorLayer({
-						source: new VectorSource(),
-						zIndex: 100
-					});
-					map.addLayer(markerLayer);
-				}
-
-				// 只有当标记数据确实发生变化时才处理
-				const markersChanged = !oldValue ||
-					!oldValue.markers ||
-					JSON.stringify(newValue.markers) !== JSON.stringify(oldValue.markers);
-
-				if (markersChanged && Array.isArray(newValue.markers)) {
-					// 先清除现有标记
-					this.clearMarkers();
-					// 添加所有新标记
-					newValue.markers.forEach(markerData => {
-						if (markerData.coordinates && markerData.coordinates.length === 2) {
-							this.addMarker(markerData.coordinates, {
-								label: markerData.label,
-								fillColor: markerData.fillColor,
-								strokeColor: markerData.strokeColor,
-								radius: markerData.radius || 6,
-								iconSrc: markerData.iconSrc,
-								iconScale:markerData.iconScale,
-								iconAnchor:markerData.iconAnchor
-							});
-						}
-					});
-				}
-			}
-		},
-
-		// 公开方法：设置地图中心
-		setCenter(center) {
-			if (map && center) {
-				const view = map.getView();
-				view.setCenter(fromLonLat(center));
-			}
-		},
-		// 公开方法：设置缩放级别
-		setZoom(zoom) {
-			if (map && zoom !== undefined) {
-				const view = map.getView();
-				view.setZoom(zoom);
-			}
-		},
-		// 公开方法：添加标记点
-		addMarker(lonLat, properties = {}) {
-			// 参数处理：支持两种调用方式
-			// 1. addMarker(lon, lat, label) - 单独参数
-			// 2. addMarker([lon, lat], {label: '...'}) - 数组和属性对象
-			
-			let coordinates;
-			let props = {};
-
-			coordinates = lonLat;
-			props = properties || {};
-
-			try {
-				
-
-				// 创建点几何对象
-				const point = new Point(fromLonLat(coordinates));
-
-				// 创建要素
-				const marker = new Feature({
-					geometry: point
-				});
-
-				// 设置要素属性
-				marker.setProperties(props);
-
-				// 应用样式
-				let styles = [];
-				
-				// 基础点样式
-				if(props.iconSrc && Icon){
-					try {
-						// 验证图标路径是否为相对路径
-						let iconPath = props.iconSrc;
-						console.log('iconScale',props.iconScale);
-						// 调试信息：验证图标路径和配置
-						const iconConfig = {
-							src: iconPath,
-							anchor: props.iconAnchor || [0.5, 1], // 默认锚点在底部中心
-							scale: props.iconScale || 1,
-							crossOrigin: 'anonymous',
-							// 添加额外的配置以优化显示
-							anchorXUnits: 'fraction',
-							anchorYUnits: 'fraction',
-							// 添加图标加载重试和超时处理
-							imgSize: props.iconSize || undefined // 如果知道尺寸可以直接指定以提高性能
-						};
-						
-						console.log('Icon configuration:', iconConfig);
-						
-						// 创建图标样式
-						const icon = new Icon(iconConfig);
-						
-						// 添加图片加载状态监听
-						icon.getImage().onload = function() {
-							console.log('Icon image loaded successfully:', iconPath);
-							// 图片加载成功后触发地图更新
-							if (map) {
-								map.render();
-							}
-						};
-						
-						icon.getImage().onerror = function(error) {
-							console.error('Failed to load icon image:', iconPath);
-							// 尝试使用默认样式作为回退
-							if (Circle && Fill && Stroke) {
-								const fallbackStyle = new Style({
-									image: new Circle({
-										radius: 8,
-										fill: new Fill({ color: 'rgba(255, 0, 0, 0.8)' }),
-										stroke: new Stroke({ color: '#ff0000', width: 2 })
-									})
-								});
-								marker.setStyle(fallbackStyle);
-							}
-						};
-						
-						const pointStyle = new Style({
-							image: icon
-						});
-						styles.push(pointStyle);
-						console.log('Icon style created and applied');
-					} catch (error) {
-						console.error('Error creating icon style:', error);
-					}
-				} else if (Circle && Fill && Stroke) {
-					// 如果没有提供图标，则使用默认的圆形标记
-					styles.push(new Style({
-						image: new Circle({
-							radius: props.radius || 8,
-							fill: new Fill({
-								color: props.fillColor || 'rgba(255, 0, 0, 0.5)'
-							}),
-							stroke: new Stroke({
-								color: props.strokeColor || '#ff0000',
-								width: props.strokeWidth || 2
-							})
-						})
-					}));
-				}
-
-				// 添加文本标签
-				if (props.label && Text) {
-					styles.push(new Style({
-						text: new Text({
-							text: props.label,
-							font: '12px Arial',
-							fill: new Fill({ color: props.labelColor || '#000' }),
-							stroke: new Stroke({ color: props.labelStrokeColor || '#fff', width: 2 }),
-							offsetY: props.labelOffsetY || -20
-						})
-					}));
-				}
-
-				// 应用样式到要素
-				if (styles.length > 0) {
-					marker.setStyle(styles);
-					console.log('Styles applied to marker:', styles.length);
-				}
-
-				// 如果标记图层存在，将标记添加到图层
-				if (markerLayer && markerLayer.getSource()) {
-					const source = markerLayer.getSource();
-					source.addFeature(marker);
-					console.log('Marker added to layer source');
-					
-					// 调试：检查图层中的要素数量
-					const featureCount = source.getFeatures().length;
-					console.log('Current features in marker layer:', featureCount);
-					
-					// 保存标记引用
-					markers.push(marker);
-				} else {
-					console.error('Marker layer or its source is not available');
-				}
-
-				// 可选：如果需要，将地图视图移动到标记位置
-				if (props.fitToView) {
-					map.getView().fit(marker.getGeometry().getExtent(), {
-						padding: [50, 50, 50, 50],
-						duration: 500
-					});
-				}
-
-				return marker; // 返回添加的标记，以便进一步操作
-			} catch (error) {
-				console.error('Failed to add marker:', error);
-				return null;
-			}
-		},
-
-		// 处理标记数据更新的专用方法
-		processMarkers(markersData) {
-
-			// 先清除现有标记
-			this.clearMarkers();
-
-			// 添加所有新标记
-			if (markersData && Array.isArray(markersData)) {
-				markersData.forEach(marker => {
-					if (marker.coordinates && marker.coordinates.length === 2) {
-						this.addMarker(marker.coordinates, {
-							label: marker.label || '标记',
-							fillColor: marker.fillColor,
-							strokeColor: marker.strokeColor,
-							radius: marker.radius
-						});
-					}
-				});
-			}
-		},
-
-		// 公开方法：清除所有标记
-		clearMarkers() {
-			try {
-				if (markerLayer && markerLayer.getSource()) {
-					markerLayer.getSource().clear();
-					markers = [];
-				} else {
-					console.warn('No marker layer to clear');
-				}
-			} catch (error) {
-				console.error('Failed to clear markers:', error);
-			}
-		},
-		
-		// 公开方法：将EPSG:3857投影坐标转换为经纬度坐标
-		transformToLonLat(coord3857) {
-			if (!toLonLat || !Array.isArray(coord3857) || coord3857.length !== 2) {
-				console.error('Invalid parameters or toLonLat not available');
-				return null;
-			}
-			
-			// 确保坐标是数字类型
-			const numericCoord = coord3857.map(coord => typeof coord === 'string' ? parseFloat(coord) : coord);
-			
-			// 转换为经纬度
-			return toLonLat(numericCoord);
-		}
-	},
-
-	// 清理资源
-	beforeDestroy() {
-		if (map) {
-			map.setTarget(null);
-			map = null;
-		}
-	}
-};
+    data() {
+        return {           
+        }
+    },
+    methods: {
+        getCls() {
+            return Index;
+        }
+    }
+}

package/src/MapView.js

@@ -7,7 +7,7 @@ import Fill from 'ol/style/Fill.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import View from 'ol/View.js';
 import Map from 'ol/Map.js';
-
+import { fromLonLat } from 'ol/proj.js';
 /**
  * ol地图显示
  */
@@ -139,4 +139,16 @@ export default class MapView {
         var newMaxY = centerY + newHeight / 2;
         return [newMinX, newMinY, newMaxX, newMaxY];
     }
+    setCenter(center,useAnimation){
+        if(useAnimation){
+            this.map.getView().animate({
+                center: fromLonLat(center)
+            });
+        }else{
+            this.map.getView().setCenter(center);
+        }
+    }
+    setZoom(zoom){
+        this.map.getView().setZoom(zoom);
+    }
 }

package/src/index.d.ts

@@ -5,8 +5,9 @@ declare module 'cd-mapgis' {
     viewOnTemplayer(p: any): void;
     clearTemplayer(): void;
     expandExtent(): void;
+    setCenter(center: [number, number], useAnimation?: boolean): void;
+    setZoom(zoom: number): void;
   }
-  export * as MapRender from './MapRender.js';
   export class OM {
     static map: any;
     static view: any;