cd-mapgis 1.0.0

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "cd-mapgis",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "private": false,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "cdzd",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "ol": "^8.1.0"
+  }
+}

package/src/LayerUtil.js

@@ -0,0 +1,187 @@
+import XYZ from 'ol/source/XYZ';
+import Tile from 'ol/layer/Tile';
+import Image from 'ol/layer/Image';
+import ImageWMS from 'ol/source/ImageWMS';
+import WMTS from 'ol/source/WMTS';
+import TilegridWMTS from 'ol/tilegrid/WMTS';
+import { get as getProjection } from 'ol/proj';
+import { getWidth } from 'ol/extent';
+import WMTSCapabilities from 'ol/format/WMTSCapabilities';
+
+/**
+ * 图层工具
+ */
+export default class LayerUtil {
+    static _tdt_map = {
+        img_w: '卫星影像图层',
+        cia_w: '卫星影像注记图层',
+        vec_w: '矢量图层',
+        cva_w: '矢量注记图层',
+    };
+    /**
+     * 获取通用Tile-XYZ图层
+     * wrapX:设置为 true（默认）：适用于全球地图、需要无缝水平滚动的场景;
+     *       设置为 false：适用于局部区域地图、不需要全球连续显示的场景
+     * @param {*} p {name,url,projection?}
+     * @returns 
+     */
+    static xyz(p) {
+        let param = {
+            title: p.name,
+            source: new XYZ({
+                url: p.url,
+                wrapX: false
+            })
+        };       
+        return new Tile(param);
+    }
+    /**
+     * nginx中发布的xyz目录瓦片(不能设置projection，设置后地图消失)
+     *  var url = 'http://172.20.2.9:30016/{z}/{x}/{y}.png';
+     * @param {*} p 
+     */
+    static ngXyz(p) {
+        let name = p.name ? p.name : 'ngXyz';
+        let url = p.url + '/{z}/{x}/{y}.png';
+        return LayerUtil.xyz({ name: name, url: url });
+    }
+    /**
+     * 获取在线天地图
+     * @param {*} p {type,tk}
+     * @returns 
+     */
+    static onLineTianditu(p) {
+        let name = LayerUtil._tdt_map[p.type];
+        let url = 'http://t0.tianditu.com/DataServer?T=' + p.type + '_w&x={x}&y={y}&l={z}&tk=' + p.tk;
+        return LayerUtil.xyz({ name: name, url: url });
+    }
+    /**
+     * 获取geoserver图层
+     * @param {*} p {workspace,name,url,mv{cql}?}
+     * @returns 
+     */
+    static geoServerWmsLayer(p) {
+        let params = {
+            LAYERS: p.workspace + ":" + p.name,
+            EXCEPTIONS: 'application/vnd.ogc.se_inimage',
+            FORMAT: 'image/png',
+            VERSION: '1.1.1'
+        };
+        //条件过滤显示图层
+        if (p.mv && p.mv.cql) {
+            params['CQL_FILTER'] = node.mv.cql;
+        }
+        return new Image({
+            source: new ImageWMS({
+                ratio: 1,
+                url: p.url,
+                params: params
+            })
+        });
+    }
+    /**
+     * 获取标准的wmts图层
+     * @param {*} p 
+     * @returns 
+     */
+    static async getWmtsLayer(p) {
+        try {
+            let wmtsUrl = p.url;
+            // 构造 GetCapabilities 请求地址
+            const capabilitiesUrl = wmtsUrl.includes('?')
+                ? `${wmtsUrl}&service=WMTS&request=GetCapabilities`
+                : `${wmtsUrl}?service=WMTS&request=GetCapabilities`;
+            // 获取服务元数据
+            const response = await fetch(capabilitiesUrl);
+            const capabilitiesText = await response.text();
+            // 使用 OpenLayers 的 WMTS 能力文档解析器
+            const wmtsFormat = new WMTSCapabilities();
+            const capabilities = wmtsFormat.read(capabilitiesText);
+            // 提取关键参数
+            const contents = capabilities.Contents;
+            const layers = contents.Layer;
+            const tileMatrixSets = contents.TileMatrixSet;
+            // 获取第一个图层
+            const layer = layers[0];
+            const layerName = layer.Identifier;
+            // 获取图层关联的瓦片矩阵集链接
+            const tileMatrixSetLink = layer.TileMatrixSetLink[0];
+            const matrixSetName = tileMatrixSetLink.TileMatrixSet;
+            // 在 TileMatrixSet 中查找对应的矩阵集以获取 CRS
+            const tileMatrixSet = tileMatrixSets.find(set => set.Identifier === matrixSetName);
+            const supportedCRS = tileMatrixSet.SupportedCRS;
+            const projectionCode = supportedCRS.includes('4490') ? 'EPSG:4326' :
+                supportedCRS.replace('urn:ogc:def:crs:', '').replace('::', ':');
+            // 创建投影对象
+            const proj = getProjection(projectionCode) || getProjection('EPSG:4326');
+            const projExtent = proj.getExtent();
+            // 获取支持的格式
+            const format = layer.Format && layer.Format.length > 0 ? layer.Format[0] : 'tiles';
+            // 获取样式
+            const style = layer.Style && layer.Style.length > 0 ? layer.Style[0].Identifier : 'default';
+            // 构造瓦片网格参数
+            const matrixIds = [];
+            const resolutions = [];
+            const origin = [];
+            // 判断是否为经纬度坐标系
+            const isGeographic = projectionCode.includes('4326') || projectionCode.includes('4490');
+            // 从瓦片矩阵集中提取信息
+            if (tileMatrixSet && tileMatrixSet.TileMatrix) {
+                // 按照矩阵ID排序（确保顺序正确）
+                const sortedMatrices = tileMatrixSet.TileMatrix.sort((a, b) => {
+                    return parseInt(a.Identifier) - parseInt(b.Identifier);
+                });
+                const size = getWidth(projExtent) / 256;
+                sortedMatrices.forEach(matrix => {
+                    matrixIds.push(matrix.Identifier);
+                    // 根据坐标系类型自动选择分辨率计算方式
+                    if (isGeographic) {
+                        // 经纬度坐标系：使用度为单位的分辨率计算
+                        const zoomLevel = parseInt(matrix.Identifier);
+                        // 基于经纬度的分辨率计算（1.40625 度/像素作为起始分辨率）                      
+                        const resolution = size / Math.pow(2, zoomLevel);
+                        resolutions.push(resolution);
+                    } else {
+                        // 米制坐标系：使用标准 WMTS 分辨率计算
+                        resolutions.push(matrix.ScaleDenominator * 0.00028);
+                    }
+                    if (origin.length === 0 && matrix.TopLeftCorner) {
+                        // 处原点坐标
+                        if (isGeographic) {
+                            // 经纬度坐标系的原点处理
+                            origin.push(matrix.TopLeftCorner[1]); // 经度
+                            origin.push(matrix.TopLeftCorner[0]); // 纬度
+                        } else {
+                            // 米制坐标系的原点处理
+                            origin.push(matrix.TopLeftCorner[0]);
+                            origin.push(matrix.TopLeftCorner[1]);
+                        }
+                    }
+                });
+            }
+            // 创建瓦片网格配置
+            const tileGridConfig = new TilegridWMTS({
+                origin: origin.length > 0 ? origin : (isGeographic ? [-180, 90] : [-20037508.342789244, 20037508.342789244]),
+                resolutions: resolutions,
+                matrixIds: matrixIds
+            });
+            // 创建 WMTS 图层
+            const wmtsLayer = new Tile({
+                source: new WMTS({
+                    url: wmtsUrl,
+                    layer: layerName,
+                    matrixSet: matrixSetName,
+                    format: format,
+                    projection: proj,
+                    tileGrid: tileGridConfig,
+                    style: style,
+                    wrapX: true
+                })
+            });
+            return wmtsLayer;
+        } catch (e) {
+            console.error("加载wmts图层失败:" + JSON.stringify(node), e);
+        }
+        return null;
+    }
+}

package/src/OM.js

@@ -0,0 +1,106 @@
+import GeoJSON from 'ol/format/GeoJSON';
+import Feature from 'ol/Feature';
+import VectorSource from 'ol/source/Vector';
+import Style from 'ol/style/Style';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
+import VectorLayer from 'ol/layer/Vector';
+import View from 'ol/View';
+import Map from 'ol/Map';
+
+/**
+ * OM
+ */
+export default class OM {
+    static map = null;//openlayer map对象
+    static view = null;
+    /**
+     * 初始化
+     */
+    static initMap(p) {
+        let target = p.target ? p.target : 'map';//地图div的id
+        let center = p.center ? p.center : [104.0633664, 30.6598344];//地图初始中心点（默认天府广场）
+        let zoom = p.zoom ? p.zoom : 16; //地图初始显示级数
+        let projection = p.projection ? p.projection : 'EPSG:4326';
+        let layers = p.layers ? p.layers : [];
+        OM.view = new View({
+            center: center,
+            zoom: zoom,
+            projection: projection
+        });
+        OM.map = new Map({
+            target: target,
+            controls: [],
+            layers: layers,
+            view: view,
+        });
+    }
+    /**
+     * 高亮显示图斑
+     * @param {*} p 
+     */
+    static viewOnTemplayer(p) {
+        let geometry = new GeoJSON().readGeometry(p.data);
+        let feature = new Feature({
+            geometry: geometry
+        });
+        let vectorSource = new VectorSource({
+            features: [feature]
+        });
+        let style = new Style({
+            stroke: new Stroke({
+                color: '#0af5e6',  // 默认选择色
+                width: 2           // 线宽
+            }),
+            fill: new Fill({
+                color: 'rgba(0, 0, 0, 0)'  // 透明填充
+            })
+        });
+        //移除之前的显示
+        if (window._view_templayer) {
+            window._view_templayer.getSource().clear();//清空图层
+            this.map.removeLayer(window._view_templayer);//移除图层
+        }
+        //重建图层，避免在其他地方全部移除图层后，templayer不为空，但是已经不在地图中的情况
+        window._view_templayer = new VectorLayer({
+            source: vectorSource,
+            style: style
+        });
+        // 添加到地图
+        this.map.addLayer(window._view_templayer);
+        // fit方法 - 自动适应范围    
+        let extent = geometry.getExtent();
+        let extent2 = OM.expandExtent(extent);
+        this.map.getView().fit(extent2, {
+            size: this.map.getSize()
+        });
+    }
+    /**
+     * 扩大一倍extent
+     * @param {*} extent 
+     */
+    static expandExtent(extent) {
+        if (!extent || extent.length !== 4) {
+            return extent;
+        }
+        var minX = extent[0];
+        var minY = extent[1];
+        var maxX = extent[2];
+        var maxY = extent[3];
+        // 计算中心点
+        var centerX = (minX + maxX) / 2;
+        var centerY = (minY + maxY) / 2;
+        // 计算原始宽度和高度
+        var width = maxX - minX;
+        var height = maxY - minY;
+        // 扩大一倍（乘以2）
+        var newWidth = width * 2;
+        var newHeight = height * 2;
+        // 计算新的边界
+        var newMinX = centerX - newWidth / 2;
+        var newMinY = centerY - newHeight / 2;
+        var newMaxX = centerX + newWidth / 2;
+        var newMaxY = centerY + newHeight / 2;
+        return [newMinX, newMinY, newMaxX, newMaxY];
+    }
+}

package/src/index.d.ts

@@ -0,0 +1,4 @@
+declare module 'cd-mapgis' {
+  export const add: (a: number, b: number) => number;
+}
+