@supermapgis/vue-iclient-leaflet 11.2.0 → 11.3.0

package/src/common/video-player/style/video-player.scss

@@ -226,6 +226,7 @@
   }
 }
 .sm-component-video-player-modal {
+  background: rgba(0, 0, 0, 0.7);
   .sm-component-modal-close {
     color: #a2a3a5;
     right: -5%;
@@ -257,7 +258,6 @@
       }
     }
   }
-  background: rgba(0, 0, 0, 0.7);
 }
 .sm-component-video-full-fill{
   video{

package/src/leaflet/entrys.json

@@ -59,7 +59,6 @@
   "_mixin/ThirdService": "vue-iclient/src/common/_mixin/ThirdService.ts",
   "_mixin/Timer": "vue-iclient/src/common/_mixin/Timer.ts",
   "_mixin/VmUpdater": "vue-iclient/src/common/_mixin/VmUpdater.ts",
-  "_mixin/WebMapBase": "vue-iclient/src/common/web-map/WebMapBase.ts",
   "_mixin/GridLayer": "vue-iclient/src/leaflet/_mixin/GridLayer.js",
   "_mixin/Layer": "vue-iclient/src/leaflet/_mixin/Layer.js",
   "_mixin/map-getter": "vue-iclient/src/leaflet/_mixin/map-getter.ts",
@@ -93,7 +92,6 @@
   "_utils/RestService": "vue-iclient/src/common/_utils/RestService.js",
   "_utils/statistics": "vue-iclient/src/common/_utils/statistics.js",
   "_utils/util": "vue-iclient/src/common/_utils/util.js",
-  "_utils/WebMapService": "vue-iclient/src/common/_utils/WebMapService.ts",
   "_utils/vue-types/index": "vue-iclient/src/common/_utils/vue-types/index.js",
   "_utils/vue-types/utils": "vue-iclient/src/common/_utils/vue-types/utils.js",
   "_utils/style/theme/chart": "vue-iclient/src/common/_utils/style/theme/chart.js",

package/src/leaflet/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@supermapgis/vue-iclient-leaflet",
   "description": "SuperMap iClient for Vue.js",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "homepage": "http://iclient.supermap.io",
   "main": "lib/index",
   "dependencies": {
@@ -13,12 +13,11 @@
     "@turf/length": "^6.0.2",
     "@turf/rhumb-bearing": "^6.0.1",
     "@turf/transform-scale": "^5.1.5",
-    "@turf/meta": "^6.5.0",
     "@types/geojson": "^7946.0.7",
     "@types/leaflet": "^1.5.5",
     "@types/node": "^12.0.3",
     "ant-design-vue": "1.7.2",
-    "axios": "^1.6.2",
+    "axios": "^1.7.4",
     "canvg": "~3.0.10",
     "clipboard": "^2.0.6",
     "colorcolor": "^1.1.1",
@@ -40,14 +39,13 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.isplainobject": "^4.0.6",
     "lodash.max": "^4.0.1",
-    "lodash.min": "^4.0.1",
     "lodash.merge": "^4.6.1",
     "lodash.orderby": "^4.6.0",
     "lodash.tonumber": "^4.0.3",
     "lodash.uniqueid": "^4.0.1",
     "mux.js": "^5.6.7",
     "omit.js": "^2.0.2",
-    "proj4": "^2.6.0",
+    "proj4": "^2.8.0",
     "resize-detector": "^0.2.0",
     "simple-statistics": "^7.8.3",
     "swiper": "^6.8.4",

package/src/leaflet/web-map/WebMap.vue

@@ -165,7 +165,7 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
          */
         this.load({ map: e.map });
       },
-      getmapinfofailed: e => {
+      mapcreatefailed: e => {
         /**
          * @event getMapFailed
          * @desc 获取 WebMap 地图信息失败。
@@ -176,7 +176,7 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
         Message.error(e.error.message);
         this.spinning = false;
       },
-      getlayerdatasourcefailed: e => {
+      layercreatefailed: e => {
         /**
          * @event getLayerDatasourceFailed
          * @desc 获取图层数据失败。
@@ -193,9 +193,9 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
           Message.error(this.$t('webmap.getLayerInfoFailed'));
         }
       },
-      notsupportmvt: () => {
+      mvtnotsupport: () => {
         // @ts-ignore
-        Message.error('暂不支持加载矢量瓦片图层！');
+        Message.error(this.$t('webmap.mvtNotSupport'));
         this.spinning = false;
       }
     });

package/src/leaflet/web-map/WebMapViewModel.ts

@@ -1,12 +1,15 @@
 import L from '../leaflet-wrapper';
+import { Events } from 'vue-iclient/src/common/_types/event/Events';
 import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min';
 // import echarts from 'echarts';  // TODO iclient 拿不到 echarts ???
 import 'vue-iclient/static/libs/geostats/geostats';
 import getCenter from '@turf/center';
-import WebMapBase from 'vue-iclient/src/common/web-map/WebMapBase';
-import { toEpsgCode, getProjection } from 'vue-iclient/src/common/_utils/epsg-define';
+import proj4 from 'proj4';
+import { getProjection, toEpsgCode } from 'vue-iclient/src/common/_utils/epsg-define';
+// @ts-ignore
+import { createWebMapV2BaseExtending } from 'vue-iclient/static/libs/iclient-common/iclient-common-webmapv2base';
 
-interface webMapOptions {
+interface WebMapOptions {
   target?: string;
   serverUrl?: string;
   accessToken?: string;
@@ -17,7 +20,7 @@ interface webMapOptions {
   isSuperMapOnline?: boolean;
 }
 
-interface mapOptions {
+interface MapOptions {
   center?: [number, number] | L.LatLng;
   zoom?: number;
   maxBounds?: [[number, number], [number, number]] | L.Bounds;
@@ -26,19 +29,41 @@ interface mapOptions {
   crs?: L.CRS;
   preferCanvas?: boolean;
 }
+// @ts-ignore
+const WebMapV2Base: InstanceType<any> = createWebMapV2BaseExtending(Events, 'triggerEvent');
 
 // TODO 坐标系 / noWrap
-export default class WebMapViewModel extends WebMapBase {
+export default class WebMapViewModel extends WebMapV2Base {
   map: L.Map;
 
+  mapOptions: MapOptions;
+
+  serverUrl: string;
+
   center: [number, number] | L.LatLng;
 
+  zoom: number;
+
+  target: string;
+
   mapParams: { title?: string; description?: string };
 
   layers: any = {};
 
   crs: L.CRS;
 
+  baseProjection: string;
+
+  triggerEvent: any;
+
+  eventTypes: string[];
+
+  protected _layers: any = [];
+
+  protected layerAdded: number;
+
+  protected expectLayerLen: number;
+
   private _dataFlowLayer: any;
 
   private _dataflowFeatureCache: any;
@@ -53,10 +78,30 @@ export default class WebMapViewModel extends WebMapBase {
 
   private _unprojectCrs;
 
-  constructor(id, options: webMapOptions = {}, mapOptions: mapOptions = {}) {
-    super(id, options, mapOptions);
+  constructor(id, options: WebMapOptions = {}, mapOptions: MapOptions = {}) {
+    super(
+      id,
+      {
+        ...options,
+        credentialKey: (options.accessKey && 'key') || (options.accessToken && 'token'),
+        credentialValue: options.accessKey || options.accessToken,
+        proj4
+      },
+      mapOptions
+    );
     this.center = mapOptions.center;
     this.zoom = mapOptions.zoom;
+    this.eventTypes = [
+      'mapinitialized',
+      'mapcreatesucceeded',
+      'mapcreatefailed',
+      'layercreatefailed',
+      'baidumapnotsupport',
+      'projectionnotmatch',
+      'mapbeforeremove',
+      'addlayerssucceeded',
+      'mvtnotsupport'
+    ];
     this._initWebMap();
   }
 
@@ -176,7 +221,7 @@ export default class WebMapViewModel extends WebMapBase {
         layer = this._createBaiduTileLayer();
         break;
       case 'MAPBOXSTYLE':
-        this.triggerEvent('notsupportmvt', {});
+        this.triggerEvent('mvtnotsupport', {});
         break;
       default:
         break;
@@ -195,7 +240,7 @@ export default class WebMapViewModel extends WebMapBase {
         // TODO  ---  暂不支持 SAMPLE_DATA
         if (type === 'SAMPLE_DATA') {
           this._addLayerSucceeded();
-          this.triggerEvent('getlayerdatasourcefailed', {
+          this.triggerEvent('layercreatefailed', {
             error: 'SAMPLE DATA is not supported',
             layer,
             map: this.map
@@ -298,7 +343,7 @@ export default class WebMapViewModel extends WebMapBase {
     } catch (err) {
       console.error(err);
       this._addLayerSucceeded();
-      this.triggerEvent('getlayerdatasourcefailed', {
+      this.triggerEvent('layercreatefailed', {
         error: err,
         layer: layerInfo,
         map: this.map
@@ -684,9 +729,10 @@ export default class WebMapViewModel extends WebMapBase {
 
   private _createMigrationLayer(layerInfo, features) {
     // window['echarts'] = echarts;
-    let options = this.getEchartsLayerOptions(layerInfo, features, 'leaflet');
+    const options = this.getEchartsLayerOptions(layerInfo, features, 'leaflet');
+    options.GLMap = { roam: true };
     // @ts-ignore
-    let layer = L.supermap.echartsLayer(options);
+    const layer = L.supermap.echartsLayer(options);
     this.echartslayer.push(layer);
     return layer;
   }
@@ -772,8 +818,9 @@ export default class WebMapViewModel extends WebMapBase {
 
   private _addLayerToMap({ layer, type = 'overlays', layerInfo, sendToMap = true }) {
     let { visible, layerID, name, index } = layerInfo;
-
-    sendToMap && (type = 'overlays');
+    if (sendToMap && type !== 'overlays') {
+      type = 'overlays';
+    }
     type === 'overlays' && layer.setZIndex && layer.setZIndex(index + 1);
 
     if (visible === undefined || visible) {
@@ -1076,11 +1123,11 @@ export default class WebMapViewModel extends WebMapBase {
     }
   }
 
-  protected getTransformCoodinatesCRS(epsgCode) {
+  protected getTransformCoodinatesCRS(epsgCode: number) {
     const defName = `EPSG:${epsgCode}`;
     const defValue = getProjection(defName);
     // @ts-ignore
-    return L.Proj.CRS(toEpsgCode(defValue), {
+    return L.Proj.CRS(defName, {
       def: defValue
     });
   }
@@ -1091,7 +1138,7 @@ export default class WebMapViewModel extends WebMapBase {
       this.stopCanvg();
       this.center = null;
       this.zoom = null;
-      this._dataFlowLayer.off('dataupdated', this._updateDataFlowFeaturesCallback);
+      this._dataFlowLayer?.off('dataupdated', this._updateDataFlowFeaturesCallback);
       this._unprojectCrs = null;
     }
   }