@supermapgis/vue-iclient-leaflet 11.2.0

package/src/leaflet/web-map/_mixin/map-events.ts

@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+const MAP_EVENT_NAMES: string[] = [
+  'zoomlevelschange',
+  'resize',
+  'unload',
+  'viewreset',
+  'load',
+  'zoomstart',
+  'movestart',
+  'zoom',
+  'move',
+  'zoomend',
+  'moveend',
+  'popupopen',
+  'popupclose',
+  'autopanstart',
+  'tooltipopen',
+  'tooltipclose',
+  'locationerror',
+  'locationfound',
+  'click',
+  'dblclick',
+  'mousedown',
+  'mouseup',
+  'mouseover',
+  'mouseout',
+  'mousemove',
+  'contextmenu',
+  'keypress',
+  'keydown',
+  'keyup',
+  'preclick',
+  'zoomanim'
+];
+
+@Component
+export default class MapEvents extends Vue {
+  map: L.Map;
+
+  private mapEventCallback(event, data = {}): void {
+    this.emitMapEvent(event.type, { mapboxEvent: event, ...data });
+  }
+
+  bindMapEvents(): void {
+    Object.keys(this.$listeners).forEach(eventName => {
+      if (MAP_EVENT_NAMES.includes(eventName)) {
+        this.bindMapEvent(eventName, this.mapEventCallback.bind(this));
+      }
+    });
+  }
+
+  private emitMapEvent(name: string, data = {}): void {
+    this.$emit(name, {
+      map: this.map,
+      component: this,
+      ...data
+    });
+  }
+
+  private bindMapEvent(eventName: string, eventCallback) {
+    this.map.on(eventName, eventCallback);
+  }
+}

package/src/leaflet/web-map/index.js

@@ -0,0 +1,9 @@
+import WebMap from './WebMap';
+import init from 'vue-iclient/src/init';
+
+WebMap.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(WebMap.options ? WebMap.options.name : WebMap.name, WebMap);
+};
+
+export default WebMap;

package/src/leaflet/web-map/layer/tile/TileLayer.vue

@@ -0,0 +1,88 @@
+<script>
+import MapGetter from 'vue-iclient/src/leaflet/_mixin/map-getter';
+import TileLayerViewModel from './TileLayerViewModel';
+import { capitalizeFirstLetter } from 'vue-iclient/src/leaflet/_utils/props-binder';
+import TileLayer from 'vue-iclient/src/leaflet/_mixin/TileLayer';
+
+export default {
+  name: 'SmTileLayer',
+  mixins: [MapGetter, TileLayer],
+  props: {
+    layersID: {
+      type: String
+    },
+    redirect: {
+      type: Boolean,
+      default: false
+    },
+    cacheEnabled: {
+      type: Boolean,
+      default: true
+    },
+    clipRegionEnabled: {
+      type: Boolean,
+      default: false
+    },
+    prjCoordSys: {
+      type: Object
+    },
+    overlapDisplayed: {
+      type: Boolean,
+      default: false
+    },
+    overlapDisplayedOptions: {
+      type: String
+    },
+    tileversion: {
+      type: String
+    },
+    serverType: {
+      type: String,
+      default: 'iServer'
+    },
+    tileProxy: {
+      type: String
+    },
+    format: {
+      type: String,
+      default: 'png',
+      validator: function(val) {
+        return ['png', 'jpg', 'bmp', 'gif'].indexOf(val) !== -1;
+      }
+    },
+    tileSize: {
+      type: Number,
+      default: 256
+    },
+    url: {
+      type: String
+    },
+    transparent: {
+      type: Boolean,
+      default: true
+    },
+    clipRegion: {
+      type: Object
+    },
+    crs: {
+      type: Object
+    }
+  },
+  created() {
+    for (let key in this.$props) {
+      const setMethodName = 'set' + capitalizeFirstLetter(key);
+      if (!this[setMethodName]) {
+        this[setMethodName] = function(newValue) {
+          this.viewModel && this.viewModel[setMethodName](newValue);
+        };
+      }
+    }
+    this.viewModel = new TileLayerViewModel(this.$props);
+    this.layer = this.viewModel.getLayer();
+  },
+  loaded() {
+    this.viewModel.addTo(this.map);
+  },
+  render() {}
+};
+</script>

package/src/leaflet/web-map/layer/tile/TileLayerViewModel.js

@@ -0,0 +1,66 @@
+import L from 'leaflet';
+import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min';
+import { capitalizeFirstLetter } from 'vue-iclient/src/leaflet/_utils/props-binder';
+
+export default class RasterTileLayerViewModel extends L.Evented {
+  constructor(options) {
+    super();
+    this.defaultOptions = {
+      minZoom: 0,
+      maxZoom: 22,
+      opacity: 1,
+      tileSize: 256
+    };
+    for (let key in options) {
+      const setMethodName = 'set' + capitalizeFirstLetter(key);
+      this[setMethodName] = function(newVal) {
+        if (this.layer) {
+          this.layer._paramsChanged = true;
+          if (key === 'url') {
+            this.layer.setUrl(newVal);
+          } else if (key === 'bounds') {
+            this.layer.options[key] = this._setBounds(newVal);
+          } else {
+            this.layer.options[key] = newVal;
+            this.layer.redraw();
+          }
+        }
+      };
+    }
+
+    Object.assign(this.defaultOptions, options);
+    this.defaultOptions.bounds && (this.defaultOptions.bounds = this._setBounds(this.defaultOptions.bounds));
+    this._init();
+  }
+
+  _setBounds(bounds) {
+    return L.latLngBounds(
+      L.latLng(bounds[1], bounds[0]),
+      L.latLng(bounds[3], bounds[2])
+    );
+  }
+
+  _init() {
+    this._addLayer();
+  }
+
+  _addLayer() {
+    this.layer = L.supermap.tiledMapLayer(this.defaultOptions.url, this.defaultOptions);
+  }
+
+  getLayer() {
+    return this.layer;
+  }
+
+  addTo(map) {
+    this.map = map;
+    this.map.addLayer(this.layer);
+  }
+
+  clear() {
+    const { map, layer } = this;
+    if (map && layer && map.hasLayer(this.layer)) {
+      map.removeLayer(layer);
+    }
+  }
+}

package/src/leaflet/web-map/layer/tile/index.js

@@ -0,0 +1,9 @@
+import TileLayer from './TileLayer';
+import init from 'vue-iclient/src/init';
+
+TileLayer.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(TileLayer.options ? TileLayer.options.name : TileLayer.name, TileLayer);
+};
+
+export default TileLayer;

package/src/leaflet/web-map/style/index.js

@@ -0,0 +1,7 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import 'vue-iclient/src/common/spin/style/index.js';
+import 'vue-iclient/src/common/message/style/index.js';
+import 'leaflet/dist/leaflet.css';
+import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min.css';
+import './web-map.scss';

package/src/leaflet/web-map/style/web-map.scss

@@ -0,0 +1,32 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+@import '../../../common/spin/style/spin.scss';
+
+@include b(web-map) {
+  width: 100%;
+  height: 100%;
+  & > .#{$ant-prefix}-spin {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+.sm-leaflet-tabel-popup {
+  .leaflet-popup-content {
+    margin: 0;
+  }
+  .leaflet-popup-content-wrapper {
+    border-radius: 3px;
+  }
+  .leaflet-popup-content-wrapper, .leaflet-popup-content, .leaflet-popup-tip {
+    background: transparent;
+  }
+}

package/src/sfc.d.ts

@@ -0,0 +1,50 @@
+// TODO 声明文件待分离
+
+/**
+ * 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
+ * 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
+ * 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件
+ */
+//给配置文件中types：['mapbox-gl']引入的namespace mapboxgl起个别名
+
+
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  export default Vue;
+}
+
+declare module 'vue-echarts';
+declare module 'latlng-conv';
+
+/**
+ * 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错
+ */
+interface Window {
+  Vue: any;
+  convert: any;
+  jsonsql: any;
+  canvg: any;
+  isLocal: boolean;
+  server: string;
+  CSS: any;
+  G6: any;
+}
+
+declare var window: Window;
+
+declare var SuperMap: any;
+// declare var require: any;
+
+// typings.d.ts
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+
+interface mapInfoType {
+  map: mapboxglTypes.Map;
+  webmap: any;
+  mapTarget: string;
+}

package/src/vue-i18n.d.ts

@@ -0,0 +1,26 @@
+import VueI18n, {
+    Path, Values, Locale,
+   } from 'vue-i18n/types'
+   
+   /**
+   * Overloads VueI18n interface to avoid needing to cast return value to string.
+   * @see https://github.com/kazupon/vue-i18n/issues/410
+   */
+   declare module 'vue-i18n/types' {
+    export default class VueI18n {
+      t(key: Path, locale: Locale, values?: Values): string;
+      t(key: Path, values?: Values): string;
+    }
+   }
+   
+   declare module 'vue/types/vue' {
+    interface Vue {
+      $t: typeof VueI18n.prototype.t;
+    }
+   
+    interface VueConstructor<V extends Vue = Vue> {
+      i18n: typeof VueI18n.prototype;
+    }
+   }
+   
+   export default VueI18n

package/src/vue-options.d.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    viewModelProps?: Array<string>;
+    loaded?: Function;
+    removed?: Function;
+    theme?: object;
+    defaultComponent?: object;
+    deleteMap?: Function;
+    deleteWebMap?: Function;
+    setMap?: Function;
+    setWebMap?: Function;
+    getMap?: Function;
+    getAllMaps?: Function;
+    getWebMap?: Function;
+  }
+}