cd-mapgis 1.0.53 → 1.0.55

package/package.json

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

package/src/MapView.js

@@ -3,6 +3,8 @@ import Map from 'ol/Map.js';
 import LayerUtil from './LayerUtil.js';
 import StyleUtil from './StyleUtil.js';
 import MapDrawUtil from './MapDrawUtil.js';
+import SwipeUtil from './SwipeUtil.js';
+import DragPan from 'ol/interaction/DragPan.js';
 
 /**
  * ol地图显示
@@ -13,6 +15,7 @@ export default class MapView {
         this.params = p;
         this.view = null;
         this.map = null;
+        this.target = null;
         //基础图层，一般用于可以只显示其中一个图层的场景,使用layerGroupViewOne切换{group,key,name,layer}
         //group:分组名 key:组内唯一值 name:图层名称 layer:ol图层对象
         this.layerGroup = [];
@@ -26,6 +29,7 @@ export default class MapView {
         MapView.Instance = this;
 
         this.mapDrawUtil = null;//绘制工具
+        this.swipeUtil = null;//卷帘工具
     }
     //初始化地图及其他参数
     _init(p) {
@@ -41,10 +45,10 @@ export default class MapView {
                 projection: projection
             });
         }
-        let target = p.target ? p.target : 'map';//地图div的id
+        this.target = p.target ? p.target : 'map';//地图div的id
         let layers = p.layers ? p.layers : [];
         this.map = new Map({
-            target: target,
+            target: this.target,
             controls: [],
             layers: layers,
             view: this.view
@@ -206,4 +210,25 @@ export default class MapView {
         view.fit(extent);
         return true;
     }
+    //启用或禁用鼠标拖动地图
+    dragPan(flag) {
+        this.map.getInteractions().forEach(function (element, index, array) {
+            if (element instanceof DragPan) {
+                element.setActive(flag);
+            }
+        });
+    }
+    //开启卷帘
+    startSwipe(layer, model) {
+        this.closeSwipe();
+        this.swipeUtil = new SwipeUtil({ mapView: this });
+        this.swipeUtil.start(layer, model);
+    }
+    //关闭卷帘
+    closeSwipe() {
+        if (this.swipeUtil != null) {
+            this.swipeUtil.close();
+            this.swipeUtil = null;
+        }
+    }
 }

package/src/OM.js

@@ -131,7 +131,11 @@ export default class OM {
     }
     /**
      * 向地图视图添加图层
-     * @param {*} p {mapViews(单个对象或者数组),geoLayers(geoServer固定图层),server(url,data,sort,layerCall)}
+     * @param {*} p {mapViews(单个对象或者数组),
+     *               geoLayers(geoServer固定图层),
+     *               server(url,data,sort,layerCall),
+     *               comm{mapKey(dic中的key)}
+     *              }
      */
     static async viewLayers(p) {
         let params = OM._getParams();
@@ -147,7 +151,8 @@ export default class OM {
             });
         }
         //先加载后端默认加载的图层     
-        let postRes = await OM.getDic("def_view_layers");
+        let mapKey = (p.comm && p.comm.mapKey) ? p.comm.mapKey : 'def_view_layers';
+        let postRes = await OM.getDic(mapKey);
         let defViewLayers = postRes.data ? JSON.parse(postRes.data) : [];
         //遍历每个地图容器
         for (let k = 0; k < mapViews.length; k++) {
@@ -198,10 +203,11 @@ export default class OM {
             wmsUrl = InnerUtil.getGeoServerUrl(wmsUrl, geoLayerUrl);
             let geoParam = { workspace: geoserverDic.workspace, url: wmsUrl };
             let _layers = [];
-            let map = {};
+            let layerNames = {};
             for (let i = 0; i < p.geoLayers.length; i++) {
-                _layers.push(p.geoLayers[i].layerName);
-                map[p.geoLayers[i].layerName] = p.geoLayers[i].title;
+                let l = p.geoLayers[i];
+                _layers.push(l.layerName);
+                layerNames[l.layerName] = l.title;
             }
             postRes = await OM.checkPushLayers({ layers: _layers });
             let pushLayers = postRes.data ? postRes.data : [];
@@ -212,7 +218,7 @@ export default class OM {
                     geoParam.name = pushLayers[i];
                     let layer = LayerUtil.geoServerWmsLayer(geoParam);
                     map.addLayer(layer);
-                    mapView.viewLayers.push({ type: 'geoLayer', name: map[geoParam.name], layer: layer });
+                    mapView.viewLayers.push({ type: 'geoLayer', name: layerNames[geoParam.name], layer: layer });
                     mapView.geoServerLayers.push(geoParam.name);
                 }
             }
@@ -278,6 +284,23 @@ export default class OM {
             return mapViews[0].viewLayers;
         }
     }
+    /**
+     * 将地图缩放到指定的图层范围
+     * @param {*} p {layers:[]}
+     */
+    static async viewToLayer(p) {
+        let res = await OM.getBound(p);
+        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());
+            }
+        } else {
+            console.log("未查询到图层：", p);
+        }
+    }
     /**
      * 将地图缩放到指定的图层范围
      * @param {*} p 

package/src/SwipeUtil.js

@@ -0,0 +1,89 @@
+/**
+ * 卷帘工具
+ */
+export default class SwipeUtil {
+    constructor(p) {
+        this.mapView = p.mapView;
+        this.map = p.mapView.map;
+
+        this.map_event_pointerdown = null;//注册鼠标在地图上按下事件
+        this.map_event_pointerup = null;//注册鼠标在地图上弹起事件
+        this.map_event_pointermove = null;//注册鼠标在地图上移动事件
+    }
+    /**
+     * 开始卷帘
+     * @param {*} layer  需要操作的图层
+     * @param {*} model  1保留左边 2保留上面 3保留右边 4保留下面
+     * @returns 
+     */
+    start(layer, model) {
+        if (this.map_event_pointerdown) return;//判断是否开启
+        let _map = this.map;
+        let _mapView = this.mapView;
+        let h = document.getElementById(this.mapView.target).clientHeight;//图形高度
+        let w = document.getElementById(this.mapView.target).clientWidth;//图形宽度
+        let pixel;//鼠标的屏幕像素点    
+        let layer_event_precompose;//图层在地图渲染之前事件
+        let layer_event_postcompose;//图层在地图渲染之后事件       
+        //注册鼠标在地图上按下事件
+        map_event_pointerdown = _map.on('pointerdown', function (e) {
+            pixel = e.pixel;
+            //图层在地图渲染之前触发
+            layer_event_precompose = layer.on('precompose', function (event) {
+                var ctx = event.context;//获得canvas渲染上下文                
+                var dx;
+                if (model == 1 || model == 3) {
+                    dx = ctx.canvas.width * (pixel[0] / w);
+                } else {
+                    dx = ctx.canvas.height * (pixel[1] / h);
+                }
+                ctx.save();// 保存canvas设置
+                ctx.beginPath();// 开始绘制路径
+                //设置绘制矩形
+                if (model == 1) {
+                    ctx.rect(0, 0, dx, ctx.canvas.height);
+                } else if (model == 2) {
+                    ctx.rect(0, 0, ctx.canvas.width, dx);
+                } else if (model == 3) {
+                    ctx.rect(dx, 0, ctx.canvas.width - dx, ctx.canvas.height);
+                } else if (model == 4) {
+                    ctx.rect(0, dx, ctx.canvas.width, ctx.canvas.height - dx);
+                }
+                ctx.clip();// 裁剪Bing地图，以形成卷帘效果
+            });
+            //图层在地图渲染之后触发
+            layer_event_postcompose = layer.on('postcompose', function (event) {
+                var ctx = event.context;
+                ctx.restore();              // 恢复canvas设置
+            });
+            // 立即渲染地图
+            _map.render();
+            //禁用鼠标拖动地图     
+            _mapView.dragPan(false);
+        });
+        //注册鼠标在地图上弹起事件
+        map_event_pointerup = _map.on('pointerup', function (e) {
+            //移除图层的事件
+            layer.un(layer_event_precompose.type, layer_event_precompose.listener);
+            layer.un(layer_event_postcompose.type, layer_event_postcompose.listener);
+            // 渲染地图
+            _map.render();
+            //启用鼠标拖动地图     
+            _mapView.dragPan(true);
+        });
+        //注册鼠标在地图上移动事件
+        map_event_pointermove = _map.on('pointermove', (e) => {
+            pixel = e.pixel;
+            _map.render();
+        });
+    }
+    /**
+     * 关闭卷帘
+     */
+    close() {
+        if (!this.map_event_pointerdown) return;//判断是否开启
+        this.map.un(this.map_event_pointerdown.type, this.map_event_pointerdown.listener);
+        this.map.un(this.map_event_pointerup.type, this.map_event_pointerup.listener);
+        this.map.un(this.map_event_pointermove.type, this.map_event_pointermove.listener);
+    }
+}

package/test-om.js

@@ -1,11 +1,11 @@
-// 导入 OM 类
-import { OM } from './src/index.js';
-
-// 打印 OM 类，检查是否为类而不是字符串
-console.log('OM 类型:', typeof OM);
-console.log('OM 类定义:', OM);
-
-// 测试调用静态方法（不执行实际初始化，只检查方法是否存在）
-console.log('OM.initMap 存在:', typeof OM.initMap === 'function');
-
-console.log('测试完成，请检查输出结果。');
+// 导入 OM 类
+import { OM } from './src/index.js';
+
+// 打印 OM 类，检查是否为类而不是字符串
+console.log('OM 类型:', typeof OM);
+console.log('OM 类定义:', OM);
+
+// 测试调用静态方法（不执行实际初始化，只检查方法是否存在）
+console.log('OM.initMap 存在:', typeof OM.initMap === 'function');
+
+console.log('测试完成，请检查输出结果。');