@supermapgis/vue-iclient-leaflet 11.2.0

package/src/leaflet/identify/style/identify.scss

@@ -0,0 +1,30 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+
+@include b(identify) {
+  list-style: none;
+  margin: 0;
+  padding: 10px 15px;
+  max-height: 170px;
+  width: 280px;
+  overflow: auto;
+  font-size: 14px;
+  background: transparent;
+  @include e(body) {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 0;
+  }
+  @include e(left) {
+    width: 40%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @include e(right) {
+    margin-left: 10px;
+    width: calc(60% - 10px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/leaflet/identify/style/index.js

@@ -0,0 +1,4 @@
+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/message/style/index.js';
+import './identify.scss';

package/src/leaflet/index.ts

@@ -0,0 +1,5 @@
+import 'vue-iclient/src/leaflet/style';
+import VueiClient from './components';
+
+export default VueiClient;
+export * from './components';

package/src/leaflet/leaflet-wrapper.js

@@ -0,0 +1,125 @@
+import L from 'leaflet';
+
+// @property lastId: Number
+// Last unique ID used by [`stamp()`](#util-stamp)
+let lastId = 0;
+
+// @function stamp(obj: Object): Number
+// Returns the unique ID of an object, assigning it one if it doesn't have it.
+function stamp(obj) {
+  /*eslint-disable */
+  obj._leaflet_id = obj._leaflet_id || ++lastId;
+  return obj._leaflet_id;
+  /* eslint-enable */
+}
+L.Map.prototype.addLayer = function(layer, name) {
+  if (!layer._layerAdd) {
+    throw new Error('The provided object is not a Layer.');
+  }
+  let id = stamp(layer);
+  // 如果layer已存在，返回this
+  if (this._layers[id] || this._layers[name]) {
+    return this;
+  }
+  // 如果用户没有传入name，就生成一个name
+  if (!name) {
+    name = 'sm-custom' + id;
+  }
+  // 如果该name已存在，就生成新的name
+  if (this._layers[name]) {
+    this.fire('addLayerFailed', 'layer name重复,请输入唯一的name');
+    return this;
+  }
+
+  // 将layer和name添加到layersOnMap
+  layer.name = name;
+  // 不要将featureLayer加入layersOnMap
+  // let _layersId = {};
+  // for (let key in this._layers) {
+  //   if (this._layers[key]._layers) {
+  //     _layersId[key] = [];
+  //     for (let key2 in this._layers[key]._layers) {
+  //       _layersId[key].push(key2);
+  //     }
+  //   }
+  // }
+  // let layersOnMapFlag = true;
+  // for (let key in _layersId) {
+  //   if (_layersId[key].indexOf(id + '') > -1) {
+  //     layersOnMapFlag = false;
+  //   }
+  // }
+  if (!this.layersOnMap) {
+    this.layersOnMap = [];
+  }
+  this.layersOnMap.push({ name, layer });
+  // if (layersOnMapFlag) {
+  //   this.layersOnMap.push({ name, layer });
+  // }
+
+  this._layers[id] = layer;
+  layer._mapToAdd = this;
+  if (layer.beforeAdd) {
+    layer.beforeAdd(this);
+  }
+  this.whenReady(layer._layerAdd, layer);
+  return this;
+};
+L.Map.prototype.removeLayer = function(layer, name) {
+  // 重新构造layersOnMap
+  this.layersOnMap = this.layersOnMap.filter(l => l.name !== (layer.name || name));
+  // 如果是传入图层，就用图层id; 如果传入name,通过name去获取图层id
+  let id = stamp(layer) || this._layers[name].id;
+
+  if (!this._layers[id]) {
+    return this;
+  }
+
+  if (this._loaded) {
+    layer.onRemove(this);
+  }
+
+  if (layer.getAttribution && this.attributionControl) {
+    this.attributionControl.removeAttribution(layer.getAttribution());
+  }
+
+  delete this._layers[id];
+
+  if (this._loaded) {
+    this.fire('layerremove', { layer, name });
+    layer.fire('remove');
+  }
+
+  layer._map = layer._mapToAdd = null;
+
+  return this;
+};
+
+L.Map.include({
+  getLayersOnMap() {
+    return this.layersOnMap;
+  },
+  getLayerById(id) {
+    return this._layers[id];
+  },
+  getLayerByName(name) {
+    for (let key in this._layers) {
+      if (name === this._layers[key].name) {
+        return this._layers[key];
+      }
+    }
+  },
+  getAllLayers() {
+    return this._layers;
+  }
+});
+
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+});
+window.L = L;
+export default L;

package/src/leaflet/marker/Marker.vue

@@ -0,0 +1,46 @@
+
+<script>
+import MapGetter from 'vue-iclient/src/leaflet/_mixin/map-getter';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import MarkerViewModel from './MarkerViewModel';
+import Options from 'vue-iclient/src/leaflet/_mixin/Options.js';
+
+export default {
+  name: 'SmMarker',
+  mixins: [MapGetter, Theme, Options],
+  props: {
+    latLng: {
+      type: [Object, Array],
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      ready: false
+    };
+  },
+  watch: {
+    options() {
+      this.setViewModel();
+    }
+  },
+  loaded() {
+    this.setViewModel();
+    this.mapObject = this.viewModel.getMarker();
+    this.ready = true;
+  },
+  methods: {
+    setViewModel() {
+      this.viewModel = new MarkerViewModel(this.map, {
+        latLng: this.latLng
+      });
+    }
+  },
+  render: function(h) {
+    if (this.ready && this.$slots.default) {
+      return h('div', { style: { display: 'none' } }, this.$slots.default);
+    }
+    return null;
+  }
+};
+</script>

package/src/leaflet/marker/MarkerViewModel.js

@@ -0,0 +1,31 @@
+import L from '../leaflet-wrapper';
+import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min';
+/**
+ * @class MarkerViewModel
+ * @description 点选 viewModel.
+ * @param {Object} map - map 对象。
+ * @param {String} [options.latlng] - 图层名。
+ * @extends L.Evented
+ */
+
+export default class MarkerViewModel extends L.Evented {
+  constructor(map, options) {
+    super();
+    this.map = map;
+    this.latLng = options.latLng;
+    this.marker = null;
+    this.createMarker();
+  }
+
+  createMarker(latLng = this.latLng) {
+    this.marker = L.circleMarker(latLng).addTo(this.map);
+  }
+
+  /**
+   * @function MarkerViewModel.prototype.getMarker
+   * @desc 获取marker
+   */
+  getMarker() {
+    return this.marker;
+  }
+}

package/src/leaflet/marker/index.js

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

package/src/leaflet/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@supermapgis/vue-iclient-leaflet",
+  "description": "SuperMap iClient for Vue.js",
+  "version": "11.2.0",
+  "homepage": "http://iclient.supermap.io",
+  "main": "lib/index",
+  "dependencies": {
+    "@turf/area": "^6.0.1",
+    "@turf/bbox": "^6.0.1",
+    "@turf/center": "^6.0.1",
+    "@turf/envelope": "^5.1.5",
+    "@turf/helpers": "^6.1.4",
+    "@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",
+    "canvg": "~3.0.10",
+    "clipboard": "^2.0.6",
+    "colorcolor": "^1.1.1",
+    "css-element-queries": "^1.2.0",
+    "css-vars-ponyfill": "2.2.1",
+    "echarts": "^4.8.0",
+    "echarts-liquidfill": "^2.0.5",
+    "flv.js": "^1.5.0",
+    "geojson": "^0.5.0",
+    "interactjs": "1.9.7",
+    "js-cookie": "^2.2.0",
+    "leaflet": "1.7.1",
+    "lodash.assignin": "^4.2.0",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.difference": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.intersection": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "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",
+    "resize-detector": "^0.2.0",
+    "simple-statistics": "^7.8.3",
+    "swiper": "^6.8.4",
+    "tinycolor2": "^1.4.2",
+    "utm": "^1.1.1",
+    "video.js": "^7.10.2",
+    "videojs-flash": "^2.1.0",
+    "videojs-flvjs-es6": "^1.0.1",
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-cesium": "^2.1.4",
+    "vue-color": "^2.8.1",
+    "vue-count-to": "^1.0.13",
+    "vue-drag-resize": "^1.3.2",
+    "vue-echarts": "^4.0.2",
+    "vue-i18n": "^8.8.2",
+    "vue-property-decorator": "^8.5.1",
+    "vue-types": "^2.0.2",
+    "vue-videojs7": "^0.1.5",
+    "xml-js": "1.6.11"
+  },
+  "peerDependencies": {
+    "vue": ">=2.5.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 9"
+  ],
+  "author": "SuperMap_FE",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SuperMap/vue-iclient.git"
+  },
+  "keywords": [
+    "SuperMap",
+    "Leaflet",
+    "Vue"
+  ],
+  "scripts": {
+    "postpublish": "git checkout ./package.json ./src/sfc.d.ts ./tsconfig.json && rimraf ./dist"
+  }
+}

package/src/leaflet/popup/Popup.vue

@@ -0,0 +1,93 @@
+<script>
+import Popper from 'vue-iclient/src/leaflet/_mixin/Popper.js';
+import Options from 'vue-iclient/src/leaflet/_mixin/Options.js';
+import VmUpdater from 'vue-iclient/src/common/_mixin/VmUpdater';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import MapGetter from 'vue-iclient/src/leaflet/_mixin/map-getter';
+import PopupViewModel from './PopupViewModel';
+
+export default {
+  name: 'SmPopup',
+  mixins: [Options, VmUpdater, MapGetter, Theme, Popper],
+  viewModelProps: ['latLng', 'content'],
+  props: {
+    latLng: {
+      type: [Object, Array],
+      default: () => []
+    }
+  },
+  watch: {
+    getBackground() {
+      this.changePopupStyle();
+    },
+    options() {
+      this.loaded();
+    }
+  },
+  loaded() {
+    this.setViewModel();
+    this.mapObject = this.viewModel.getPopup();
+    this.parentContainer = this.$parent;
+    // 如果有父组件有mapObject,则可以绑定在上面(默认绑定在map上面)
+    let parentContainerObject = (this.parentContainer && this.parentContainer.mapObject) || this.map;
+    if (parentContainerObject) {
+      // 如果有bindpopup方法的就绑定
+      if (parentContainerObject.bindPopup) {
+        parentContainerObject.bindPopup(this.mapObject);
+        this.$nextTick(() => {
+          this.$emit('ready', this.mapObject);
+        });
+        return;
+      }
+      // 如果是地图，则openOn(this.map)
+      this.isMap = this.viewModel.isMap(parentContainerObject);
+      if (this.isMap) {
+        parentContainerObject.on('click', e => {
+          let latLng = this.map.layerPointToLatLng(e.layerPoint);
+          this.viewModel.setLatLng(latLng);
+          // 通过slot进来的content
+          if (this.$el && this.$el.style) {
+            this.$el.style.display = 'block';
+          }
+          this.$nextTick(() => {
+            this.$emit('ready', this.mapObject);
+          });
+          this.$on('ready', this.viewModel.openOnMap);
+        });
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.parentContainer) {
+      if (this.parentContainer.unbindPopup) {
+        this.parentContainer.unbindPopup();
+      } else if (this.parentContainer.mapObject && this.parentContainer.mapObject.unbindPopup) {
+        this.parentContainer.mapObject.unbindPopup();
+      }
+    }
+  },
+  methods: {
+    setViewModel() {
+      this.viewModel = new PopupViewModel(this.map, {
+        latLng: this.latLng,
+        content: this.content || this.$el,
+        options: this.options
+      });
+    },
+    changePopupStyle() {
+      const popupContent = document.querySelector('.leaflet-popup-content-wrapper');
+      const popupTip = document.querySelector('.leaflet-popup-tip');
+      const popupCloseBtn = document.querySelector('.leaflet-container a.leaflet-popup-close-button:hover');
+      if (popupContent) {
+        popupContent.style.background = this.getBackground;
+      }
+      if (popupTip) {
+        popupTip.style.background = this.getBackground;
+      }
+      if (popupCloseBtn) {
+        popupTip.style.color = this.textColorsData;
+      }
+    }
+  }
+};
+</script>

package/src/leaflet/popup/PopupViewModel.js

@@ -0,0 +1,75 @@
+import L from '../leaflet-wrapper';
+
+/**
+ * @class PopupViewModel
+ * @description popup viewModel.
+ * @extends leaflet.Evented
+ */
+
+export default class PopupViewModel extends L.Evented {
+  constructor(map, options) {
+    super();
+    this.map = map;
+    this.mapObject = null;
+    this.options = options.options || {};
+    this.latLng = options.latLng;
+    this.content = options.content;
+    this.createPopup();
+  }
+
+  /**
+   * @function PopupViewModel.prototype.createPopup
+   * @desc 创建popup
+   */
+  createPopup() {
+    this.mapObject = L.popup(this.options);
+    this.setLatLng();
+    this.setContent();
+  }
+
+  /**
+   * @function PopupViewModel.prototype.setContent
+   * @desc 设置popup内容
+   * @param {Array} content - 内容。
+   */
+  setContent(content = this.content) {
+    if (this.mapObject && content) {
+      this.mapObject.setContent(content);
+    }
+  }
+
+  /**
+   * @function PopupViewModel.prototype.setLatLng
+   * @desc 设置latlng
+   * @param {Array} latLng - 坐标
+   */
+  setLatLng(latLng = this.latLng) {
+    if (this.mapObject && latLng) {
+      this.mapObject.setLatLng(latLng);
+    }
+  }
+
+  /**
+   * @function PopupViewModel.prototype.getPopup
+   * @desc 获取popup
+   */
+  getPopup() {
+    return this.mapObject;
+  }
+
+  /**
+   * @function PopupViewModel.prototype.openOnMap
+   * @desc openOn MAP
+   */
+  openOnMap() {
+    this.mapObject.openOn(this.map);
+  }
+
+  /**
+   * @function PopupViewModel.prototype.openOnMap
+   * @desc openOn MAP
+   */
+  isMap(mapObject) {
+    return mapObject instanceof L.Map;
+  }
+}

package/src/leaflet/popup/index.js

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

package/src/leaflet/style.js

@@ -0,0 +1,3 @@
+import 'leaflet/dist/leaflet.css';
+import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min.css';
+import 'vue-iclient/src/leaflet/css.js';

package/src/leaflet/style.scss

@@ -0,0 +1,52 @@
+$--pan-assets-path: './web-map/control/pan/assets' !default;
+$--tdt-assets-path: './tdt/_assets' !default;
+@import '../common/_utils/style/common/common.scss';
+/** common */
+@import '../common/indicator/style/indicator.scss';
+@import '../common/text/style/text.scss';
+@import '../common/time-text/style/time-text.scss';
+@import '../common/icon/style/icon.scss';
+@import '../common/collapse-card/style/collapse-card.scss';
+@import '../common/liquid-fill/style/liquid-fill.scss';
+@import '../common/progress/style/progress.scss';
+@import '../common/table-popup/style/table-popup.scss';
+@import '../common/border/style/border.scss';
+@import '../common/image/style/image.scss';
+@import '../common/video-player/style/video-player.scss';
+@import '../common/iframe/style/iframe.scss';
+@import '../common/chart/style/chart.scss';
+@import '../common/button/style/button.scss';
+@import '../common/input/style/input.scss';
+@import '../common/input-number/style/input-number.scss';
+@import '../common/switch/style/switch.scss';
+@import '../common/select/style/select.scss';
+@import '../common/checkbox/style/checkbox.scss';
+@import '../common/avatar/style/avatar.scss';
+@import '../common/empty/style/empty.scss';
+@import '../common/pagination/style/pagination.scss';
+@import '../common/date-picker/style/date-picker.scss';
+@import '../common/radio/style/radio.scss';
+@import '../common/tabs/style/tabs.scss';
+@import '../common/breadcrumb/style/breadcrumb.scss';
+@import '../common/steps/style/steps.scss';
+@import '../common/tooltip/style/tooltip.scss';
+@import '../common/modal/style/modal.scss';
+@import '../common/transfer/style/transfer.scss';
+@import '../common/message/style/message.scss';
+@import '../common/notification/style/notification.scss';
+@import '../common/layout/style/layout.scss';
+@import '../common/spin/style/spin.scss';
+@import '../common/card/style/card.scss';
+@import '../common/collapse/style/collapse.scss';
+@import '../common/table/style/table.scss';
+@import '../common/slider/style/slider.scss';
+@import '../common/tree/style/tree.scss';
+@import '../common/color-picker/style/color-picker.scss';
+@import '../common/time-slider/style/time-slider.scss';
+@import '../common/time-line/style/time-line.scss';
+@import '../common/time-range/style/time-range.scss';
+@import '../common/time-picker/style/time-picker.scss';
+@import '../common/tree-select/style/tree-select.scss';
+
+@import './web-map/style/web-map.scss';
+@import './identify/style/identify.scss';