@supermapgis/vue-iclient-leaflet 11.2.0

package/src/leaflet/components.ts

@@ -0,0 +1,206 @@
+import { registerProjection } from 'vue-iclient/src/common/_utils/epsg-define';
+import { lang, setLocale, initi18n } from 'vue-iclient/src/common/_lang/index';
+import * as commontypes from 'vue-iclient/src/leaflet/_types/index';
+import { setTheme } from 'vue-iclient/src/common/_utils/style/theme/set-theme';
+
+/** common */
+import { default as Avatar } from 'vue-iclient/src/common/avatar/index.js';
+import { default as Border } from 'vue-iclient/src/common/border/index.js';
+import { default as Breadcrumb } from 'vue-iclient/src/common/breadcrumb/index.js';
+import { default as Button } from 'vue-iclient/src/common/button/index.js';
+import { default as Card } from 'vue-iclient/src/common/card/index.js';
+import { default as Checkbox } from 'vue-iclient/src/common/checkbox/index.js';
+import { default as Collapse } from 'vue-iclient/src/common/collapse/index.js';
+import { default as CollapseCard } from 'vue-iclient/src/common/collapse-card/index.js';
+import { default as ColorPicker } from 'vue-iclient/src/common/color-picker/index.js';
+import { default as DatePicker } from 'vue-iclient/src/common/date-picker/index.js';
+import { default as Dropdown } from 'vue-iclient/src/common/dropdown/index.js';
+import { default as Empty } from 'vue-iclient/src/common/empty/index.js';
+import { default as Icon } from 'vue-iclient/src/common/icon/index.js';
+import { default as Iframe } from 'vue-iclient/src/common/iframe/index.js';
+import { default as Image } from 'vue-iclient/src/common/image/index.js';
+import { default as Indicator } from 'vue-iclient/src/common/indicator/index.js';
+import { default as Input } from 'vue-iclient/src/common/input/index.js';
+import { default as InputNumber } from 'vue-iclient/src/common/input-number/index.js';
+import { default as Layout } from 'vue-iclient/src/common/layout/index.js';
+import { default as LiquidFill } from 'vue-iclient/src/common/liquid-fill/index.js';
+import { default as Menu } from 'vue-iclient/src/common/menu/index.js';
+import { default as Message } from 'vue-iclient/src/common/message/index.js';
+import { default as Modal } from 'vue-iclient/src/common/modal/index.js';
+import { default as Notification } from 'vue-iclient/src/common/notification/index.js';
+import { default as Pagination } from 'vue-iclient/src/common/pagination/index.js';
+import { default as Progress } from 'vue-iclient/src/common/progress/index.js';
+import { default as Radio } from 'vue-iclient/src/common/radio/index.js';
+import { default as Select } from 'vue-iclient/src/common/select/index.js';
+import { default as Slider } from 'vue-iclient/src/common/slider/index.js';
+import { default as Slideshow } from 'vue-iclient/src/common/slideshow/index.js';
+import { default as Spin } from 'vue-iclient/src/common/spin/index.js';
+import { default as Steps } from 'vue-iclient/src/common/steps/index.js';
+import { default as Switch } from 'vue-iclient/src/common/switch/index.js';
+import { default as Table } from 'vue-iclient/src/common/table/index.js';
+import { default as TablePopup } from 'vue-iclient/src/common/table-popup/index.js';
+import { default as Tabs } from 'vue-iclient/src/common/tabs/index.js';
+import { default as Text } from 'vue-iclient/src/common/text/index.js';
+import { default as TimeLine } from 'vue-iclient/src/common/time-line/index.js';
+import { default as TimeRange } from 'vue-iclient/src/common/time-range/index.js';
+import { default as TimeSlider } from 'vue-iclient/src/common/time-slider/index.js';
+import { default as TimeText } from 'vue-iclient/src/common/time-text/index.js';
+import { default as TimePicker } from 'vue-iclient/src/common/time-picker/index.js';
+import { default as Tooltip } from 'vue-iclient/src/common/tooltip/index.js';
+import { default as Transfer } from 'vue-iclient/src/common/transfer/index.js';
+import { default as Tree } from 'vue-iclient/src/common/tree/index.js';
+import { default as TreeSelect } from 'vue-iclient/src/common/tree-select/index.js';
+import { default as VideoPlayer } from 'vue-iclient/src/common/video-player/index.js';
+
+/** layer */
+import { default as TileLayer } from 'vue-iclient/src/leaflet/web-map/layer/tile/index.js';
+
+import { default as Chart } from 'vue-iclient/src/leaflet/chart/index.js';
+import { default as Identify } from 'vue-iclient/src/leaflet/identify/index.js';
+import { default as Marker } from 'vue-iclient/src/leaflet/marker/index.js';
+import { default as Popup } from 'vue-iclient/src/leaflet/popup/index.js';
+import { default as WebMap } from 'vue-iclient/src/leaflet/web-map/index.js';
+
+const components = {
+  Avatar,
+  Border,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  Collapse,
+  CollapseCard,
+  ColorPicker,
+  DatePicker,
+  Dropdown,
+  Empty,
+  Icon,
+  Iframe,
+  Image,
+  Indicator,
+  Input,
+  InputNumber,
+  Layout,
+  LiquidFill,
+  Menu,
+  Message,
+  Modal,
+  Notification,
+  Pagination,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  Slideshow,
+  Spin,
+  Steps,
+  Switch,
+  Table,
+  TablePopup,
+  Tabs,
+  Text,
+  TimeLine,
+  TimeRange,
+  TimeSlider,
+  TimeText,
+  TimePicker,
+  Tooltip,
+  Transfer,
+  Tree,
+  TreeSelect,
+  VideoPlayer,
+  Chart,
+  Identify,
+  Marker,
+  Popup,
+  WebMap,
+  TileLayer
+};
+
+const install = function (Vue, opts: any = {}) {
+  Vue.prototype.$message = components.Message;
+  Vue.prototype.$notification = components.Notification;
+  Vue.prototype.$info = (components.Modal as any).info;
+  Vue.prototype.$success = (components.Modal as any).success;
+  Vue.prototype.$error = (components.Modal as any).error;
+  Vue.prototype.$warning = (components.Modal as any).warning;
+  Vue.prototype.$confirm = (components.Modal as any).confirm;
+  Vue.prototype.$destroyAll = (components.Modal as any).destroyAll;
+  for (let component in components) {
+    if (!['Notification', 'Message'].includes(component)) {
+      const com = components[component];
+      Vue.use(com, opts);
+    }
+  }
+};
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue, {
+    theme: 'light'
+  });
+}
+export {
+  setTheme,
+  commontypes,
+  lang,
+  initi18n,
+  registerProjection,
+  Message as message,
+  Notification as notification,
+  Avatar,
+  Border,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  Collapse,
+  CollapseCard,
+  ColorPicker,
+  DatePicker,
+  Dropdown,
+  Empty,
+  Icon,
+  Iframe,
+  Image,
+  Indicator,
+  Input,
+  InputNumber,
+  Layout,
+  LiquidFill,
+  Menu,
+  Modal,
+  Pagination,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  Slideshow,
+  Spin,
+  Steps,
+  Switch,
+  Table,
+  TablePopup,
+  Tabs,
+  Text,
+  TimeLine,
+  TimeRange,
+  TimeSlider,
+  TimeText,
+  Tooltip,
+  Transfer,
+  Tree,
+  TreeSelect,
+  VideoPlayer,
+  Chart,
+  Identify,
+  Marker,
+  Popup,
+  WebMap,
+  TileLayer
+};
+export default {
+  setTheme,
+  commontypes,
+  lang,
+  locale: setLocale,
+  install
+};

package/src/leaflet/css.js

@@ -0,0 +1,3 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/theme/antd.less';
+import 'vue-iclient/src/leaflet/style.scss';

package/src/leaflet/entrys.json

@@ -0,0 +1,106 @@
+{
+  "init": "vue-iclient/src/init.js",
+  "avatar": "vue-iclient/src/common/avatar/index.js",
+  "border": "vue-iclient/src/common/border/index.js",
+  "breadcrumb": "vue-iclient/src/common/breadcrumb/index.js",
+  "button": "vue-iclient/src/common/button/index.js",
+  "card": "vue-iclient/src/common/card/index.js",
+  "checkbox": "vue-iclient/src/common/checkbox/index.js",
+  "collapse": "vue-iclient/src/common/collapse/index.js",
+  "collapse-card": "vue-iclient/src/common/collapse-card/index.js",
+  "color-picker": "vue-iclient/src/common/color-picker/index.js",
+  "date-picker": "vue-iclient/src/common/date-picker/index.js",
+  "dropdown": "vue-iclient/src/common/dropdown/index.js",
+  "empty": "vue-iclient/src/common/empty/index.js",
+  "icon": "vue-iclient/src/common/icon/index.js",
+  "iframe": "vue-iclient/src/common/iframe/index.js",
+  "image": "vue-iclient/src/common/image/index.js",
+  "indicator": "vue-iclient/src/common/indicator/index.js",
+  "input": "vue-iclient/src/common/input/index.js",
+  "input-number": "vue-iclient/src/common/input-number/index.js",
+  "layout": "vue-iclient/src/common/layout/index.js",
+  "liquid-fill": "vue-iclient/src/common/liquid-fill/index.js",
+  "menu": "vue-iclient/src/common/menu/index.js",
+  "message": "vue-iclient/src/common/message/index.js",
+  "modal": "vue-iclient/src/common/modal/index.js",
+  "notification": "vue-iclient/src/common/notification/index.js",
+  "pagination": "vue-iclient/src/common/pagination/index.js",
+  "progress": "vue-iclient/src/common/progress/index.js",
+  "radio": "vue-iclient/src/common/radio/index.js",
+  "select": "vue-iclient/src/common/select/index.js",
+  "slider": "vue-iclient/src/common/slider/index.js",
+  "slideshow": "vue-iclient/src/common/slideshow/index.js",
+  "spin": "vue-iclient/src/common/spin/index.js",
+  "steps": "vue-iclient/src/common/steps/index.js",
+  "switch": "vue-iclient/src/common/switch/index.js",
+  "table": "vue-iclient/src/common/table/index.js",
+  "table-popup": "vue-iclient/src/common/table-popup/index.js",
+  "tabs": "vue-iclient/src/common/tabs/index.js",
+  "text": "vue-iclient/src/common/text/index.js",
+  "time-line": "vue-iclient/src/common/time-line/index.js",
+  "time-range": "vue-iclient/src/common/time-range/index.js",
+  "time-slider": "vue-iclient/src/common/time-slider/index.js",
+  "time-text": "vue-iclient/src/common/time-text/index.js",
+  "time-picker": "vue-iclient/src/common/time-picker/index.js",
+  "tooltip": "vue-iclient/src/common/tooltip/index.js",
+  "transfer": "vue-iclient/src/common/transfer/index.js",
+  "tree": "vue-iclient/src/common/tree/index.js",
+  "tree-select": "vue-iclient/src/common/tree-select/index.js",
+  "video-player": "vue-iclient/src/common/video-player/index.js",
+  "chart": "vue-iclient/src/leaflet/chart/index.js",
+  "identify": "vue-iclient/src/leaflet/identify/index.js",
+  "marker": "vue-iclient/src/leaflet/marker/index.js",
+  "popup": "vue-iclient/src/leaflet/popup/index.js",
+  "web-map": "vue-iclient/src/leaflet/web-map/index.js",
+  "tile-layer": "vue-iclient/src/leaflet/web-map/layer/tile/index.js",
+  "_mixin/AntdRender": "vue-iclient/src/common/_mixin/AntdRender.ts",
+  "_mixin/Card": "vue-iclient/src/common/_mixin/Card.ts",
+  "_mixin/Theme": "vue-iclient/src/common/_mixin/Theme.ts",
+  "_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",
+  "_mixin/Options": "vue-iclient/src/leaflet/_mixin/Options.js",
+  "_mixin/Popper": "vue-iclient/src/leaflet/_mixin/Popper.js",
+  "_mixin/TileLayer": "vue-iclient/src/leaflet/_mixin/TileLayer.js",
+  "_mixin/map-events": "vue-iclient/src/leaflet/web-map/_mixin/map-events.ts",
+  "_lang/en": "vue-iclient/src/common/_lang/en.js",
+  "_lang/index": "vue-iclient/src/common/_lang/index.js",
+  "_lang/zh": "vue-iclient/src/common/_lang/zh.js",
+  "_types/AddressMatchParameter": "vue-iclient/src/common/_types/AddressMatchParameter.js",
+  "_types/GeoJSONParamter": "vue-iclient/src/common/_types/GeoJSONParamter.ts",
+  "_types/iPortalDataParameter": "vue-iclient/src/common/_types/iPortalDataParameter.js",
+  "_types/iServerBaseParameter": "vue-iclient/src/common/_types/iServerBaseParameter.ts",
+  "_types/iServerDataParameter": "vue-iclient/src/common/_types/iServerDataParameter.ts",
+  "_types/iServerMapParameter": "vue-iclient/src/common/_types/iServerMapParameter.ts",
+  "_types/RestDataParameter": "vue-iclient/src/common/_types/RestDataParameter.js",
+  "_types/RestMapParameter": "vue-iclient/src/common/_types/RestMapParameter.js",
+  "_types/RestParameter": "vue-iclient/src/common/_types/RestParameter.js",
+  "_types/event/BaseTypes": "vue-iclient/src/common/_types/event/BaseTypes.js",
+  "_types/event/Event": "vue-iclient/src/common/_types/event/Event.js",
+  "_types/event/Events": "vue-iclient/src/common/_types/event/Events.js",
+  "_types/event/Pixel": "vue-iclient/src/common/_types/event/Pixel.js",
+  "_types/event/Util": "vue-iclient/src/common/_types/event/Util.js",
+  "_utils/EchartsDataService": "vue-iclient/src/common/_utils/EchartsDataService.js",
+  "_utils/epsg-define": "vue-iclient/src/common/_utils/epsg-define.js",
+  "_utils/get-features": "vue-iclient/src/common/_utils/get-features.js",
+  "_utils/global-event": "vue-iclient/src/common/_utils/global-event.js",
+  "_utils/iPortalDataService": "vue-iclient/src/common/_utils/iPortalDataService.js",
+  "_utils/iServerRestService": "vue-iclient/src/common/_utils/iServerRestService.js",
+  "_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",
+  "_utils/style/theme/set-theme": "vue-iclient/src/common/_utils/style/theme/set-theme.ts",
+  "_utils/style/color/colorPalette": "vue-iclient/src/common/_utils/style/color/colorPalette.ts",
+  "_utils/style/color/serialColors": "vue-iclient/src/common/_utils/style/color/serialColors.ts",
+  "_types/index": "vue-iclient/src/leaflet/_types/index.js",
+  "_types/map-event": "vue-iclient/src/leaflet/_types/map-event.js",
+  "_utils/props-binder": "vue-iclient/src/leaflet/_utils/props-binder.js"
+}

package/src/leaflet/identify/Identify.vue

@@ -0,0 +1,233 @@
+<template>
+  <ul v-show="false" ref="Popup" :style="[getTextColorStyle]" :class="['sm-component-identify']">
+    <li v-for="(value, key, index) in popupProps" :key="index" class="sm-component-identify__body">
+      <div class="sm-component-identify__left" :title="key">{{ key }}</div>
+      <div class="sm-component-identify__right" :title="value">{{ value }}</div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import MapGetter from 'vue-iclient/src/leaflet/_mixin/map-getter';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import IdentifyViewModel from './IdentifyViewModel';
+import isEqual from 'lodash.isequal';
+import { getFeatureCenter } from 'vue-iclient/src/common/_utils/util';
+import Message from 'vue-iclient/src/common/message/index.js';
+
+export default {
+  name: 'SmIdentify',
+  mixins: [MapGetter, Theme],
+  props: {
+    layerNames: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    fields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    layerStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      popupProps: {},
+      layers: [],
+      layerType: false,
+      popupLayers: []
+    };
+  },
+  watch: {
+    layerNames(val, oldval) {
+      if (val && !isEqual(val, oldval)) {
+        this.$options.removed.call(this);
+        this.setLayers();
+      }
+    },
+    getBackground() {
+      this.changeStyle();
+    }
+  },
+  loaded() {
+    this.setViewModel();
+    this.setLayers();
+  },
+  removed() {
+    // 清除点击事件和popup
+    this.popupLayers &&
+      this.popupLayers.forEach(layer => {
+        layer.closePopup();
+        layer.off('click');
+        layer.off('popupclose');
+      });
+    this.layers &&
+      this.layers.forEach(layer => {
+        layer.off('click');
+      });
+    // 清除高亮的图层
+    this.viewModel && this.viewModel.removed();
+    // 重置
+    this.popupLayers = [];
+    this.layers = [];
+  },
+  beforeDestroy() {
+    this.$options.removed.call(this);
+  },
+  methods: {
+    setViewModel() {
+      this.viewModel = new IdentifyViewModel(this.map, {
+        mapTarget: this.getTargetName(),
+        layerNames: this.layerNames,
+        layerStyle: this.layerStyle
+      });
+    },
+    // 通过layerName设置layers
+    setLayers() {
+      // 重置layers
+      this.layers = [];
+      this.layerNames.forEach(layerName => {
+        let layer = this.getLayerByName(layerName);
+        layer && this.layers.push(layer);
+      });
+      if (this.layers && this.layers.length > 0) {
+        this.layers.forEach(layer => {
+          let layerType = this.viewModel.getLayerType(layer);
+          this.bindLayerClick(layer, layerType);
+        });
+      }
+    },
+    // 通过layerName获取layer
+    getLayerByName(layerName) {
+      let layer = this.viewModel.getLayerByName(layerName);
+      if (!layer) {
+        // @ts-ignore
+        Message.error(this.$t('identify.layerNotExit', { layer: layerName }));
+      }
+      return layer;
+    },
+    // 给选中图层绑定click
+    bindLayerClick(layer, layerType) {
+      if (layerType) {
+        // 如果是geojson
+        this.bindGeojsonLayer(layer);
+      } else if (layer.TFEvents) {
+        // 如果是客户端专题图
+        this.bindThemeLayer(layer);
+      } else {
+        // 如果是其他的图层(marker,polygon,polyline,隐藏的客户端专题图)
+        this.bindOtherLayer(layer);
+      }
+    },
+    // geojsonlayer绑定click事件
+    bindGeojsonLayer(geojsonLayer) {
+      geojsonLayer.on('click', e => {
+        // e.layer是被选中的某个要素
+        this.bindPopupLayer(e.layer.feature, e.layer);
+      });
+    },
+    // 给客户端专题图绑定click事件
+    bindThemeLayer(themeLayer) {
+      themeLayer.on('click', e => {
+        if (e.target && e.target.refDataID) {
+          let themeFeature = themeLayer.getFeatureById(e.target.refDataID);
+          // 将矢量要素转换成geojson
+          let feature = this.viewModel.formatGeoJSON(themeFeature);
+          // 因为线坐标等要素不准确，所以用地图的点击的坐标点
+          this.bindPopupLayer(feature, themeLayer);
+        }
+      });
+    },
+    // 其他layer(layergroup等)绑定click事件
+    bindOtherLayer(otherLayer) {
+      if (otherLayer._layers) {
+        for (let key in otherLayer._layers) {
+          let layer = otherLayer._layers[key];
+          if (layer.TFEvents) {
+            // 说明是客户端专题图
+            this.bindThemeLayer(otherLayer._layers[key]);
+          } else if (this.viewModel.getLayerType(layer)) {
+            this.bindGeojsonLayer(layer);
+          } else {
+            // 普通图层
+            let popupLayer;
+            let feature;
+            layer.on('click', e => {
+              // geojson点线面图层marker,image-marker、 RANK_SYMBOL:等级符号专题图(返回的是layergroup);
+              let coordinates =
+                (e.sourceTarget && e.sourceTarget._point && this.map.layerPointToLatLng(e.sourceTarget._point)) ||
+                (e.target && e.target._latlng) ||
+                e.latlng;
+              feature = {
+                type: 'Feature',
+                properties: coordinates,
+                geometry: { type: 'Point', coordinates: [coordinates.lng, coordinates.lat] }
+              };
+              e.sourceTarget.feature = feature;
+              popupLayer = e.sourceTarget;
+              this.bindPopupLayer(feature, popupLayer);
+            });
+          }
+        }
+      }
+    },
+    // 绑定popup
+    bindPopupLayer(feature, popupLayer) {
+      if (!feature) {
+        return;
+      }
+      this.filterFeature(feature);
+      const latlng = (getFeatureCenter(feature) || []).reverse();
+      this.$nextTick(() => {
+        // 这个定时器是避免和专题图的点击事件（要清空popup）冲突
+        setTimeout(() => {
+          let popupDom = this.$refs.Popup;
+          popupDom.style.display = 'block';
+          popupLayer.bindPopup(popupDom);
+          popupLayer.openPopup(latlng);
+          // popupclose(点击地图的时候，清除最后一次的高亮)
+          popupLayer.on('popupclose', () => this.viewModel.removed());
+          if (!popupLayer.feature) {
+            popupLayer.feature = feature;
+          }
+          this.viewModel.addOverlayToMap(popupLayer, feature, this.layerStyle);
+          this.popupLayers.push(popupLayer);
+        }, 0);
+      });
+    },
+    // 过滤用户传入的字段
+    filterFeature(feature) {
+      // 重置popupProps
+      this.popupProps = {};
+      if (feature.properties) {
+        // 过滤字段
+        if (this.fields.length > 0) {
+          this.fields.forEach(field => {
+            if (Object.prototype.hasOwnProperty.call(feature.properties, field)) {
+              this.popupProps[field] = feature.properties[field];
+            }
+          });
+        } else {
+          // 默认是读取layer的全部字段
+          this.popupProps = feature.properties;
+        }
+      }
+    },
+    // 根据主题改变样式
+    changeStyle() {
+      const wrapper = document.querySelector('.leaflet-popup-content-wrapper');
+      const tip = document.querySelector('.leaflet-popup-tip');
+      wrapper && (wrapper.style.background = this.getBackground);
+      tip && (tip.style.background = this.getBackground);
+    }
+  }
+};
+</script>

package/src/leaflet/identify/IdentifyViewModel.js

@@ -0,0 +1,114 @@
+import L from 'vue-iclient/src/leaflet/leaflet-wrapper';
+import 'vue-iclient/static/libs/iclient-leaflet/iclient-leaflet.min';
+import cloneDeep from 'lodash.clonedeep';
+/**
+ * @class IdentifyViewModel
+ * @description 点选 viewModel.
+ * @param {Object} map - map 对象。
+ * @param {String} [options.layerName] - 图层名。
+ * @param {Object} [options.layerStyle] - 查询结果图层样式配置。
+ * @extends L.Evented
+ */
+
+export default class IdentifyViewModel extends L.Evented {
+  constructor(map, options) {
+    super();
+    this.map = map;
+    this.layerNames = options.layerNames;
+    this.layerStyle = options.layerStyle || {};
+    this.popup = null;
+    this.lastLayerName = '';
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.getLayerByName
+   * @desc 获取。
+   * @param {Array} name - 图层名。
+   */
+  getLayerByName(name) {
+    return this.map.getLayerByName(name);
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.getLayerById
+   * @desc 获取。
+   * @param {Array} id - 图层名。
+   */
+  getLayerById(id) {
+    return this.map.getLayerById(id);
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.getLayerType
+   * @desc 判断是否是geojson
+   * @param {Array} layer - 图层名。
+   */
+  getLayerType(layer) {
+    return layer instanceof L.GeoJSON;
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.addOverlayToMap
+   * @desc 添加高亮图层。
+   * @param {Object} layer - layer。
+   * @param {Object} feature - geojson
+   * @param {Object} customStyle - 用户自定义样式
+   */
+  addOverlayToMap(layer, feature, customStyle = this.layerStyle) {
+    // 高亮前，清除之前的高亮
+    this.lastLayerName && this.removed(this.lastLayerName);
+    // 默认样式
+    let defaultStyle = {
+      color: '#409eff',
+      fillColor: '#409eff',
+      fillOpacity: 1,
+      opacity: 0.6,
+      renderer: L.svg()
+    };
+
+    // new layer
+    let styleOptions = Object.assign(cloneDeep(layer.options), defaultStyle, customStyle);
+    let overlayer;
+    let type = feature.geometry.type;
+    if (type === 'Point' || type === 'MultiPoint') {
+      let geoCoordinates = cloneDeep(feature.geometry.coordinates);
+      overlayer = L.circleMarker(geoCoordinates.reverse(), styleOptions);
+    } else {
+      overlayer = L.geoJSON(feature, {
+        style: function() {
+          return styleOptions;
+        }
+      });
+    }
+
+    // 上图，记录图层名
+    this.map.addLayer(overlayer, layer.name + '-SM-highlighted');
+    this.lastLayerName = layer.name;
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.removed
+   * @desc 将客户端专题图的矢量要素转换成geojson。
+   * @param {Object} themeFeature - themeFeature。
+   */
+  formatGeoJSON(themeFeature) {
+    let formatObj = new SuperMap.Format.GeoJSON();
+    let serverGeometry = SuperMap.ServerGeometry.fromGeometry(themeFeature.geometry);
+    let geojson = formatObj.toGeoJSON(serverGeometry);
+    geojson.properties = themeFeature.attributes;
+    return geojson;
+  }
+
+  /**
+   * @function IdentifyViewModel.prototype.removed
+   * @desc 清除高亮图层。
+   * @param {String} lastLayerName - 图层名。
+   */
+  removed(lastLayerName = this.lastLayerName) {
+    // 移除高亮图层
+    if (lastLayerName && this.getLayerByName(lastLayerName + '-SM-highlighted')) {
+      this.map.removeLayer(this.getLayerByName(lastLayerName + '-SM-highlighted'));
+      this.lastLayerName = '';
+    }
+  }
+}

package/src/leaflet/identify/index.js

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