cd-mapgis 1.0.14 → 1.0.15

package/package.json

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

package/src/HttpUtil.js

@@ -0,0 +1,78 @@
+/**
+ * 网络访问工具
+ */
+export default class httpUtil {
+    //获取访问工具
+    static _getUtil() {
+        let xhr
+        if (XMLHttpRequest) {
+            xhr = new XMLHttpRequest();
+        } else {
+            xhr = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+        return xhr;
+    }
+    /**
+     * get请求
+     * @param {*} url 
+     * @returns 
+     */
+    static get(url) {
+        return new Promise((resolve, reject) => {
+            let xhr = httpUtil._getUtil();
+            xhr.overrideMimeType('text/xml');
+            xhr.open("GET", url, true)
+            xhr.onreadystatechange = function () {
+                if (xhr.status === 200) {
+                    if (xhr.readyState == 4) {
+                        resolve(xhr.responseText)
+                    }
+                } else {
+                    console.error('get请求错误:', xhr)
+                    reject({
+                        status: xhr.status,
+                        msg: '请求出错'
+                    })
+                }
+            }
+            xhr.send(null)
+            return
+        });
+    }
+    /**
+     * post请求
+     * @param {*} url 
+     * @param {*} data 
+     * @param {*} headers 
+     */
+    static post(url, data, headers) {
+        return new Promise((resolve, reject) => {
+            data = data || {};
+            let xhr = httpUtil._getUtil();
+            xhr.open("POST", url, true)
+            xhr.setRequestHeader("content-type", "application/json; charset=utf-8")
+            if (headers) {
+                for (let i = 0; i < headers.length; i++) {
+                    let h = headers[i];
+                    xhr.setRequestHeader(h.key, h.value)
+                }
+            }
+            xhr.onreadystatechange = function () {
+                if (xhr.status === 200) {
+                    if (xhr.readyState == 4) {
+                        console.log(url, data, xhr.responseText);
+                        resolve(xhr.responseText)
+                    }
+                } else {
+                    console.error('post请求错误:', xhr)
+                    reject({
+                        status: xhr.status,
+                        msg: '请求出错'
+                    })
+                }
+            }
+            xhr.send(JSON.stringify(data))
+            return
+        });
+    }
+}

package/src/LayerUtil.js

@@ -68,6 +68,7 @@ export default class LayerUtil {
             FORMAT: 'image/png',
             VERSION: '1.1.1'
         };
+        let url = p.url;
         //条件过滤显示图层
         if (p.mv && p.mv.cql) {
             params['CQL_FILTER'] = node.mv.cql;
@@ -75,7 +76,7 @@ export default class LayerUtil {
         return new Image({
             source: new ImageWMS({
                 ratio: 1,
-                url: p.url,
+                url: url,
                 params: params
             })
         });
@@ -87,7 +88,7 @@ export default class LayerUtil {
      */
     static async getWmtsLayer(p) {
         try {
-            let wmtsUrl = p.url;
+            let wmtsUrl = p.urlPre + p.urlNext;
             // 构造 GetCapabilities 请求地址
             const capabilitiesUrl = wmtsUrl.includes('?')
                 ? `${wmtsUrl}&service=WMTS&request=GetCapabilities`

package/src/MapView.js

@@ -0,0 +1,142 @@
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Feature from 'ol/Feature.js';
+import VectorSource from 'ol/source/Vector.js';
+import Style from 'ol/style/Style.js';
+import Stroke from 'ol/style/Stroke.js';
+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';
+
+/**
+ * ol地图显示
+ */
+export default class MapView {
+    static Instance = null;//主地图,一般用于只操作一个地图的情况
+    constructor(p) {
+        this.params = p;
+        this.view = null;
+        this.map = null;
+        //基础图层，一般用于可以只显示其中一个图层的场景,使用layerGroupViewOne切换{group,key,name,layer}
+        //group:分组名 key:组内唯一值 name:图层名称 layer:ol图层对象
+        this.layerGroup = [];
+        //通过OM框架的viewLayers一次性加载的图层
+        this.viewLayers = [];
+        //所有的geoServer图层列表
+        this.geoServerLayers = [];
+
+        this._view_templayer = null;
+        this._init(this.params);
+        MapView.Instance = this;
+    }
+    //初始化地图及其他参数
+    _init(p) {
+        if (p.view) {
+            this.view = p.view;
+        } else {
+            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';
+            this.view = new View({
+                center: center,
+                zoom: zoom,
+                projection: projection
+            });
+        }
+        let target = p.target ? p.target : 'map';//地图div的id
+        let layers = p.layers ? p.layers : [];
+        this.map = new Map({
+            target: target,
+            controls: [],
+            layers: layers,
+            view: this.view
+        });
+    }
+    /**
+     * 显示图层组中的一个图层
+     * @param {*} group 
+     * @param {*} key 
+     * @returns 
+     */
+    layerGroupViewOne(group, key) {
+        if (!this.layerGroup) {
+            console.error("未初始化:layerGroup");
+            return;
+        }
+        for (let i = 0; i < this.layerGroup.length; i++) {
+            let temp = this.layerGroup[i];
+            if (temp.group != group) continue;
+            temp.layer.setVisible(temp.key == key);
+        }
+    }
+    /**
+     * 将数据显示在临时图层上
+     * @param {*} p 
+     */
+    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)'  // 透明填充
+            })
+        });
+        this.clearTemplayer(); //移除之前的显示
+        //重建图层，避免在其他地方全部移除图层后，templayer不为空，但是已经不在地图中的情况
+        this._view_templayer = new VectorLayer({
+            source: vectorSource,
+            style: style
+        });
+        // 添加到地图
+        this.map.addLayer(this._view_templayer);
+        // fit方法 - 自动适应范围    
+        let extent = geometry.getExtent();
+        let extent2 = this.expandExtent(extent);
+        this.map.getView().fit(extent2, {
+            size: this.map.getSize()
+        });
+    }
+    /**
+     * 清除显示在临时图层上的数据
+     */
+    clearTemplayer() {
+        if (this._view_templayer) {
+            this._view_templayer.getSource().clear();//清空图层
+            this.map.removeLayer(this._view_templayer);//移除图层
+        }
+    }
+    /**
+     * 扩大一倍extent矩形范围
+     * @param {*} extent 
+     * @returns 
+     */
+    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/OM.js

@@ -1,119 +1,237 @@
-// 使用 ES 模块系统
-import GeoJSON from 'ol/format/GeoJSON.js';
-import Feature from 'ol/Feature.js';
-import VectorSource from 'ol/source/Vector.js';
-import Style from 'ol/style/Style.js';
-import Stroke from 'ol/style/Stroke.js';
-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 Overlay from './Overlay.js';
+import HttpUtil from './HttpUtil.js';
+import LayerUtil from './LayerUtil.js';
+import MapView from './MapView.js';
 
 /**
- * OM
+ * 服务器交互，地图一张图
  */
-class OM {
-    static map = null;//openlayer map对象
-    static view = null;
+export default class OM {
     /**
-     * 初始化
+     * 初始化,将参数全部缓存
+     * geoServer:地图后端服务地址
+     * headers:接口请求头
+     * layerHost:{} 当需要在不同的网络环境改变访问对应图层的url前缀时，需要配置此参数。
+     *              其中的字段：如果是服务器端配置的字典固定图层，那么以host作为字段，值为替换的url前缀
+     *                         如果是geoServer服务器，那么配置字段固定为:geoServer
+     * @param {*} p 
      */
-    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: OM.view,
-        });
+    static initParam(params) {
+        sessionStorage.setItem("map-params", JSON.stringify(params));
+    }
+    static _getParams() {
+        let paramsStr = sessionStorage.getItem("map-params");
+        return JSON.parse(paramsStr);
     }
     /**
-     * 高亮显示图斑
-     * @param {*} p 
+     * post请求
+     * @param {*} url 
+     * @param {*} data 
+     * @returns 
      */
-    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()
-        });
+    static async post(url, data) {
+        let params = OM._getParams();
+        let headers = params.headers || [];
+        let res = await HttpUtil.post(params.geoServer + url, data, headers);
+        return JSON.parse(res);
+    }
+    /**
+     * 获取字典
+     * @param {*} key
+     */
+    static getDic(key) {
+        return OM.post("/map/getDic", { dicKey: key });
+    }
+    /**
+     * 获取图层属性分页
+     * 返回:对象集合，cdGeoField：为几何对象字段
+     * @param {*} p  {layerName,where}
+     */
+    static getLayerAttrPage(p) {
+        return OM.post("/map/getLayerAttrPage", p);
+    }
+    /**
+     * 裁剪分析
+     * 返回：{resLayer(结果图层),resRowCount(结果条数)}，结果条数为0时，无结果图层
+     * @param {*} p {layerName,clipGeo(裁剪范围 geoJson/wkt)}
+     */
+    static clip(p) {
+        return OM.post("/map/clip", p);
+    }
+    /**
+     * 叠加分析,结果保留图层1的字段
+     * 返回：{resLayer(结果图层),resRowCount(结果条数)}，结果条数为0时，无结果图层
+     * @param {*} p {layerName1,layerName2}
+     */
+    static overlaps(p) {
+        return OM.post("/map/overlaps", p);
     }
     /**
-     * 扩大一倍extent
-     * @param {*} extent 
+     * 统计分析
+     * 返回:对象集合
+     * @param {*} p {layerName,groupFields(分组字段，多个以逗号隔开),totalField(被统计的字段，可以没有)}
      */
-    static expandExtent(extent) {
-        if (!extent || extent.length !== 4) {
-            return extent;
+    static total(p) {
+        return OM.post("/map/total", p);
+    }
+    /**
+     * 缓冲区分析,
+     * 返回：{resGeo(geoJson)}
+     * @param {*} p {geo(geoJson/wkt),distance(米)}
+     */
+    static buffer(p) {
+        return OM.post("/map/buffer", p);
+    }
+    /**
+     * 获取图层的范围
+     * @param {*} p {layers:[]}
+     */
+    static getBound(p) {
+        return OM.post("/map/getBound", p);
+    }
+    /**
+     * 向地图视图添加图层
+     * @param {*} p {mapViews(单个对象或者数组),geoLayer(geoServer固定图层),server(url,data,sort,layerCall)}
+     */
+    static async viewLayers(p) {
+        let params = OM._getParams();
+        let layerHost = params.layerHost ? params.layerHost : {};
+        let mapViews = p.mapViews ? (p.mapViews.length ? p.mapViews : [p.mapViews]) : [MapView.Instance];
+        //先加载后端默认加载的图层     
+        let temp1 = await OM.getDic("def_view_layers");
+        let defViewLayers = temp1.data ? JSON.parse(temp1.data) : [];
+        //遍历每个地图容器
+        for (let k = 0; k < mapViews.length; k++) {
+            let mapView = mapViews[k];
+            let map = mapView.map;
+            for (let i = 0; i < defViewLayers.length; i++) {
+                let obj = defViewLayers[i];
+                if (obj.type == 'ngXyz') {
+                    let layerUrl = obj.host ? layerHost[obj.host] : null;
+                    obj.url = layerUrl ? layerUrl : obj.url;
+                    obj.layer = LayerUtil.ngXyz(obj);
+                } else if (obj.type == 'wmts') {
+                    let host = obj.host ? obj.host : 'wmts';
+                    let layerUrl = layerHost[host];
+                    obj.urlPre = layerUrl ? layerUrl : obj.urlPre;
+                    obj.layer = await LayerUtil.getWmtsLayer(obj);
+                } else if (obj.type == 'geoServer') {
+                    let host = obj.host ? obj.host : 'geoServer';
+                    let layerUrl = layerHost[host];
+                    obj.urlPre = layerUrl ? layerUrl : obj.urlPre;
+                    obj.layer = LayerUtil.geoServerWmsLayer(obj);
+                    mapView.geoServerLayers.push(obj.name);
+                } else {
+                    console.error("图层类型错误：", obj);
+                    continue;
+                }
+                obj.layer.setVisible(!!obj.open);
+                //添加进入地图
+                map.addLayer(obj.layer);
+                //如果有分组
+                if (obj.group) mapView.layerGroup.push(obj);
+                //
+                mapView.viewLayers.push({ type: 'def', name: obj.name, layer: obj.layer });
+            }
+        }
+        //直接加载固定的geoServer图层
+        let geoLayerUrl = layerHost["geoServer"];
+        if (p.geoLayer) {
+            let geoLayer = p.geoLayer;
+            let geoParam = { workspace: geoLayer.workspace, url: geoLayer.wmsUrl };
+            if (geoLayerUrl) {
+                let index = geoParam.url.indexOf('/geoserver');
+                geoParam.url = geoLayerUrl + geoParam.url.substr(index);
+            }
+            for (let k = 0; k < mapViews.length; k++) {
+                let mapView = mapViews[k];
+                let map = mapView.map;
+                for (let i = 0; i < geoLayer.layers.length; i++) {
+                    geoParam.name = geoLayer.layers[i];
+                    let layer = LayerUtil.geoServerWmsLayer(geoParam);
+                    map.addLayer(layer);
+                    mapView.viewLayers.push({ type: 'geoLayer', name: geoParam.name, layer: layer });
+                    mapView.geoServerLayers.push(geoParam.name);
+                }
+            }
+        }
+        //再加载geoServer接口图层
+        if (p.server) {
+            let url = p.server.url ? p.server.url : "/api/getPushLayer";
+            let res = await OM.post(url, p.server.data);
+            let d = res.data;
+            let layerInfos = d.layerInfos;
+            let geoParam = { workspace: d.workspace, url: d.wmsUrl };
+            if (geoLayerUrl) {
+                let index = geoParam.url.indexOf('/geoserver');
+                geoParam.url = geoLayerUrl + geoParam.url.substr(index);
+            }
+            //排序
+            if (p.server.sort) {
+                let a = [];
+                for (let m = 0; m < p.server.sort.length; m++) {
+                    let key = p.server.sort[m].toLowerCase();
+                    for (let n = 0; n < layerInfos.length; n++) {
+                        let name = layerInfos[n].shpNameLower;
+                        if (name.indexOf(key) != -1) {
+                            a.push(layerInfos[n]);
+                            layerInfos.splice(n, 1);
+                            n--;
+                        }
+                    }
+                }
+                for (let i = 0; i < layerInfos.length; i++) {
+                    a.push(layerInfos[i]);
+                }
+                layerInfos = a;
+            }
+            //加载
+            let layerCall = p.server.layerCall;
+            for (let k = 0; k < mapViews.length; k++) {
+                let mapView = mapViews[k];
+                let map = mapView.map;
+                for (let i = 0; i < layerInfos.length; i++) {
+                    let info = layerInfos[i];
+                    geoParam.name = info.tableName;
+                    geoParam.mv = layerCall ? layerCall(info.shpNameLower) : null;
+                    let layer = LayerUtil.geoServerWmsLayer(geoParam);
+                    map.addLayer(layer);
+                    mapView.viewLayers.push({ type: 'fc', name: info.shpName, layer: layer, info: info });
+                    mapView.geoServerLayers.push(geoParam.name);
+                }
+            }
+        }
+        //显示图层范围
+        let geoServerLayers = mapViews[0].geoServerLayers;
+        if (geoServerLayers.length > 0) {
+            let res = await OM.getBound({ layers: geoServerLayers });
+            if (res.data) {
+                var bounds = [res.data.minX, res.data.minY, res.data.maxX, res.data.maxY];
+                for (let k = 0; k < mapViews.length; k++) {
+                    let mapView = mapViews[k];
+                    let map = mapView.map;
+                    map.getView().fit(bounds, map.getSize());
+                }
+            }
+        }
+        //只有一个图层时返回加载的图层
+        if (mapViews.length == 1) {
+            return mapViews[0].viewLayers;
         }
-        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];
     }
     /**
-     * 向地图添加一个覆盖物
-     * 删除所有的覆盖物:OM.map.getOverlays().clear();
+     * 将地图缩放到指定的图层范围
      * @param {*} p 
      */
-    static addOverlay(p) {
-        new Overlay(p).addToMap(OM.map);
+    static async fitToLayers(p) {
+        let map = p.mapView ? p.mapView : MapView.Instance;
+        let url = p.url ? p.url : "/api/getPushLayer";
+        let res = await OM.post(url, p);
+        let d = res.data;
+        if (d.bound) {
+            var bounds = [d.bound.minX, d.bound.minY, d.bound.maxX, d.bound.maxY];
+            map.getView().fit(bounds, map.getSize());
+        } else {
+            console.log("未查询到图层：", p);
+        }
     }
-}
-
-// 导出模块
-export default OM;
+}

package/src/index.d.ts

@@ -1,4 +1,11 @@
 declare module 'cd-mapgis' {
+  export class MapView {
+    constructor(p: any);
+    layerGroupViewOne(group: string, key: string): void;
+    viewOnTemplayer(p: any): void;
+    clearTemplayer(): void;
+    expandExtent(): void;
+  }
   export class OM {
     static map: any;
     static view: any;
@@ -14,6 +21,17 @@ declare module 'cd-mapgis' {
     }): void;
     static expandExtent(extent: number[]): number[];
     static addOverlay(p:{html:string,point:number[],positioning?:string}): void;
+    static initParam(params: any): void;
+    static post(url: string, data: any): Promise<any>;
+    static getDic(key: string): Promise<any>;
+    static getLayerAttrPage(p: any): Promise<any>;
+    static clip(p: any): Promise<any>;
+    static overlaps(p: any): Promise<any>;
+    static total(p: any): Promise<any>;
+    static buffer(p: any): Promise<any>;
+    static getBound(p: any): Promise<any>;
+    static viewLayers(p: any): Promise<any>;
+    static fitToLayers(p: any): void;
   }
   export class LayerUtil {
     static _tdt_map: {
@@ -52,5 +70,9 @@ declare module 'cd-mapgis' {
     addToMap(map: any): void;
     remove(map: any): void;
   }
+  export class httpUtil {
+    static get(url: string): Promise<any>;
+    static post(url: string, data?: any, headers?: Array): Promise<any>;
+  }
 }
 

package/src/index.js

@@ -1,11 +1,15 @@
 // 使用 ES 模块系统
 import OM from './OM.js';
+import MapView from './MapView.js';
 import LayerUtil from './LayerUtil.js';
 import Overlay from './Overlay.js';
+import HttpUtil from './HttpUtil.js';
 
 // 导出模块
 export {
     OM,
+    MapView,
     LayerUtil,
-    Overlay
+    Overlay,
+    HttpUtil
 };