@v2coding/ui 0.1.6 → 0.1.10

package/src/components/field/field.fence.vue

@@ -1,856 +0,0 @@
-<template>
-  <div class="ui-field-fence" v-loading="loading">
-    <div class="map"></div>
-    <div class="info" v-show="toolsVisible">
-      <div class="input-item searchbox">
-        <div class="input-item-prepend">
-          <span class="input-item-text">搜索关键字</span>
-        </div>
-        <!--    form="__ignore__" 避免 enter提交表单    -->
-        <input ref="input" type="text" form="__ignore__" placeholder="请在地图上选择位置">
-        <div ref="output" class="search-result"></div>
-      </div>
-    </div>
-    <div class="tools" :class="{disabled: drawing}" v-show="toolsVisible">
-      <div v-if="toolList.length > 0 && help" class="tool help"></div>
-      <div v-for="tool in toolList" :key="tool" class="tool" :class="getToolClass(tool)" @click="draw(tool)"></div>
-      <div v-if="toolList.length > 0 && clear" class="tool clear" @click="handleClear"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import gcoord from 'gcoord';
-import to from 'await-to-js';
-import {getAMap} from '../../config/config.amap';
-import FieldMixin from './field.mixin';
-
-const CoordTypes = {
-  bd09: gcoord.BD09,
-  gcj02: gcoord.GCJ02,
-  wgs84: gcoord.WGS84,
-};
-
-const Types = {
-  marker: 'AMap.Marker',
-  polyline: 'Overlay.Polyline',
-  circle: 'Overlay.Circle',
-  polygon: 'Overlay.Polygon',
-};
-
-export default {
-  name: 'ui-field-fence',
-  mixins: [FieldMixin],
-  props: {
-    /**
-     * value:
-     * {
-     *   markers: [[lng, lat], ...],
-     *   circles: [{center: [lng, lat], radius}, ...],
-     *   polylines: [[[lng,lat], ...], ...],
-     *   polygons: [[[lng,lat], ...], ...],
-     * }
-     */
-    coordType: {
-      type: String,
-      default: 'wgs84',
-      validator: (val) => Object.keys(CoordTypes).includes(val),
-    },
-    /**
-     * 'marker,polyline,circle,polygon'
-     */
-    tools: {
-      type: String,
-      default: 'marker,polyline,circle,polygon',
-    },
-    help: {
-      type: Boolean,
-      default: true,
-    },
-    clear: {
-      type: Boolean,
-      default: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * 0:表示无限制
-     */
-    limit: {
-      type: Number,
-      default: 0,
-    },
-    /**
-     * 地图缩放
-     * 缩放范围 2~20
-     */
-    zoom: {
-      type: Number,
-      default: 15,
-      validator: val => 2 <= val && val <= 20,
-    },
-    /**
-     * 中心点
-     * 'lng,lat' 字符串
-     */
-    center: String,
-    disabled: Boolean,
-  },
-  data () {
-    return {
-      loading: true,
-      keyword: '',
-      drawing: false,
-    };
-  },
-  computed: {
-    toolList () {
-      return (this.tools || '').split(',').filter(tool => Object.keys(Types).includes(tool));
-    },
-    realLimit () {
-      if (this.multiple) {
-        return this.limit;
-      }
-      return 1;
-    },
-    isCurrentCoord () {
-      return this.coordType === 'gcj02';
-    },
-    toolsVisible({disabled, loading}) {
-      return !disabled && !loading;
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler: 'onValueChange'
-    },
-    zoom: 'setMapZoom',
-    center: 'setMapCenter',
-    toolsVisible(visible) {
-      if (visible) {
-        this.toolbarControl?.show();
-        this.geolocationControl?.show();
-      } else {
-        this.mouseTool?.close();
-        this.toolbarControl?.hide();
-        this.geolocationControl?.hide();
-      }
-    },
-  },
-  created () {
-    this.graph = {
-      polylines: [],
-      markers: [],
-      circles: [],
-      polygons: [],
-    };
-    this.editor = {};
-  },
-  methods: {
-    init () {
-      getAMap([
-        'AMap.ToolBar',
-        'AMap.Geolocation',
-        'AMap.AutoComplete',
-        'AMap.MouseTool',
-        'AMap.PolygonEditor',
-        'AMap.PolylineEditor',
-        'AMap.CircleEditor',
-      ]).then((AMap) => {
-        this.initMap(AMap);
-        this.loading = false;
-        this.done();
-      });
-    },
-    initMap (AMap) {
-      this.AMap = AMap;
-      this.map = new AMap.Map(this.$el.querySelector('.map'), {
-        zoom: this.zoom,
-        isHotspot: false,
-      });
-      this.initMapControl(this.map);
-      this.initMapAutoComplete(this.map);
-      this.contextMenu = this.initMapContextMenu(this.map);
-      this.mouseTool = this.initMapMouseTool(this.map);
-
-      // 根据value初始化地图上图形
-      this.onValueChange(this.value);
-
-      // 初始化地图中心点
-      this.setMapCenter();
-    },
-    initMapControl (map) {
-      this.toolbarControl = new this.AMap.ToolBar({ position: 'RT' });
-      this.geolocationControl = new this.AMap.Geolocation({ position: 'RB' });
-      map.addControl(this.toolbarControl);
-      map.addControl(this.geolocationControl);
-      if (!this.toolsVisible) {
-        this.toolbarControl.hide();
-        this.geolocationControl.hide();
-      }
-    },
-    initMapAutoComplete (map) {
-      const auto = new this.AMap.AutoComplete({
-        input: this.$refs.input,
-        output: this.$refs.output,
-      });
-      auto.on('select', (event) => {
-        if (!event.poi || !event.poi.location) {
-          return;
-        }
-        map.setZoomAndCenter(16, event.poi.location);
-      });
-      return auto;
-    },
-    initMapContextMenu () {
-      const contextMenu = new this.AMap.ContextMenu();
-      contextMenu.addItem('删除', () => {
-        const removeObj = this.contextMenuTarget;
-        this.removeGraph(removeObj);
-        removeObj.setMap(null);
-        this.contextMenuTarget = null; // 点击右键菜单子的某一项不会触发 contextMenu 的 close 事件
-      });
-      contextMenu.on('close', () => {
-        this.contextMenuTarget = null;
-      });
-      return contextMenu;
-    },
-    initMapMouseTool (map) {
-      const mouseTool = new this.AMap.MouseTool(map);
-      mouseTool.on('draw', (event) => {
-        mouseTool.close();
-        this.drawing = false;
-        const obj = event.obj;
-        const isAdded = this.addGraph(obj);
-        if (!isAdded) {
-          map.remove(obj);
-          return;
-        }
-        this.initGraphEvent(obj);
-        this.onGraphChange();
-      });
-      return mouseTool;
-    },
-    setMapZoom () {
-      if (!this.zoom || !this.map) {
-        return;
-      }
-      this.map.setZoom(this.zoom);
-    },
-    setMapCenter () {
-      if (!this.center || !this.map) {
-        return;
-      }
-      const [lng, lat] = this.center.split(',');
-      if (!lng || !lat) {
-        return;
-      }
-      this.map.setCenter([+lng, +lat]);
-      this.setMapZoom();
-    },
-    getToolClass (tool) {
-      if (this.realLimit <= 0 || !this.multiple) {
-        return tool;
-      }
-      const { markers, circles, polylines, polygons } = this.value || {};
-      let length = 0;
-      if (tool === 'marker') {
-        length = (markers || []).length;
-      } else if (tool === 'circle') {
-        length = (circles || []).length;
-      } else if (tool === 'polyline') {
-        length = (polylines || []).length;
-      } else if (tool === 'polygon') {
-        length = (polygons || []).length;
-      }
-      if (length >= this.realLimit) {
-        return tool + ' disabled';
-      }
-      return tool;
-    },
-    onValueChange (value) {
-      if (!this.map) {
-        return;
-      }
-      const { markers, circles, polylines, polygons } = value || {};
-
-      const removedMarkers = this.graph.markers.slice((markers || []).length);
-      const removedCircles = this.graph.circles.slice((circles || []).length);
-      const removedPolylines = this.graph.polylines.slice((polylines || []).length);
-      const removedPolygons = this.graph.polygons.slice((polygons || []).length);
-
-      [
-        ...removedMarkers,
-        ...removedCircles,
-        ...removedPolylines,
-        ...removedPolygons,
-      ].forEach(item => item.setMap(null));
-
-      (markers || []).forEach((markerData, index) => {
-        let mapMarker = this.graph.markers[index];
-        const lngLatData = this.getMapLngLatData(markers[index]);
-        const position = new this.AMap.LngLat(lngLatData[0], lngLatData[1]);
-        if (!mapMarker) {
-          mapMarker = new this.AMap.Marker({
-            map: this.map,
-            position: position,
-          });
-          this.addGraph(mapMarker);
-          this.initGraphEvent(mapMarker);
-        } else {
-          mapMarker.setPosition(position);
-        }
-      });
-      (circles || []).forEach((circleData, index) => {
-        let mapCircle = this.graph.circles[index];
-        const lngLatData = this.getMapLngLatData(circleData.center);
-        const lngLat = new this.AMap.LngLat(lngLatData[0], lngLatData[1]);
-        if (!mapCircle) {
-          mapCircle = new this.AMap.Circle({
-            map: this.map,
-            center: lngLat,
-            radius: circleData.radius,
-          });
-          this.map.add(mapCircle);
-          this.addGraph(mapCircle);
-          this.initGraphEvent(mapCircle);
-        } else {
-          mapCircle.setCenter(lngLat);
-          mapCircle.setRadius(circleData.radius);
-        }
-      });
-      (polylines || []).forEach((polylineData, index) => {
-        let mapPolyline = this.graph.polylines[index];
-        const path = polylineData.map(item => this.getMapLngLatData(item)).map(item => new this.AMap.LngLat(item[0], item[1]));
-        if (!mapPolyline) {
-          mapPolyline = new this.AMap.Polyline({ path: path });
-          this.map.add(mapPolyline);
-          this.addGraph(mapPolyline);
-          this.initGraphEvent(mapPolyline);
-        } else {
-          mapPolyline.setPath(path);
-        }
-      });
-      (polygons || []).forEach((polygonData, index) => {
-        let mapPolygon = this.graph.polygons[index];
-        const path = polygonData.map(item => this.getMapLngLatData(item)).map(item => new this.AMap.LngLat(item[0], item[1]));
-        if (!mapPolygon) {
-          mapPolygon = new this.AMap.Polygon({ path });
-          this.map.add(mapPolygon);
-          this.addGraph(mapPolygon);
-          this.initGraphEvent(mapPolygon);
-        } else {
-          mapPolygon.setPath(path);
-        }
-      });
-
-      this.map.setFitView();
-    },
-    onGraphChange () {
-      const { markers, circles, polylines, polygons } = this.graph;
-      const value = {
-        markers: this.getMarkerValue(markers),
-        circles: this.getCircleValue(circles),
-        polylines: this.getPolylineValue(polylines),
-        polygons: this.getPolygonValue(polygons),
-      };
-      const count = Object.values(value).reduce((total, item) => total + item.length, 0);
-      if (count <= 0) {
-        // required 效果
-        this.onChange();
-        return;
-      }
-      this.onChange(Object.freeze(value));
-    },
-    onEditorChange () {
-      if (this.drawing) {
-        return;
-      }
-      this.onGraphChange();
-    },
-    // onEditorAdd(obj) {
-    //   this.initGraphEvent(obj);
-    //   this.addGraph(obj);
-    //   this.drawing = false;
-    // },
-    // 使用 mouseTool 方式添加图形. editor方式添加的图形有bug(PolylineEditor 添加的初始线段无法响应click和rightclick事件)
-    draw (type) {
-      this.closeEditors();
-      if (type === 'marker') {
-        this.drawMarker();
-      } else if (type === 'circle') {
-        this.drawCircle();
-      } else if (type === 'polyline') {
-        this.drawPolyline();
-      } else if (type === 'polygon') {
-        this.drawPolygon();
-      }
-      this.drawing = true;
-    },
-    drawMarker () {
-      this.mouseTool.marker();
-    },
-    drawCircle () {
-      this.mouseTool.circle();
-    },
-    drawPolyline () {
-      this.mouseTool.polyline();
-    },
-    drawPolygon () {
-      this.mouseTool.polygon();
-    },
-    initGraphEvent (graph) {
-      graph.on('rightclick', (e) => {
-        const editor = this.getEditor(graph.className);
-        if (editor && editor.getTarget() === graph) {
-          this.closeEditor(editor);
-        }
-        this.contextMenuTarget = graph;
-        this.contextMenu.open(this.map, e.lnglat);
-      });
-      const editors = ['Overlay.Polyline', 'Overlay.Circle', 'Overlay.Polygon'];
-      if (!editors.includes(graph.className)) {
-        return;
-      }
-      graph.on('click', () => {
-        const editor = this.getEditor(graph.className);
-        const target = editor.getTarget();
-        if (target && target === graph) {
-          this.closeEditor(editor);
-          return;
-        }
-        this.closeEditors();
-        editor.setTarget(graph);
-        editor.open();
-      });
-    },
-    removeGraph (graph) {
-      const extData = graph.getExtData();
-      const { index } = extData || {};
-      let list;
-      if (graph.className === 'AMap.Marker') {
-        list = this.graph.markers;
-      } else if (graph.className === 'Overlay.Circle') {
-        list = this.graph.circles;
-      } else if (graph.className === 'Overlay.Polyline') {
-        list = this.graph.polylines;
-      } else if (graph.className === 'Overlay.Polygon') {
-        list = this.graph.polygons;
-      } else {
-        list = [];
-      }
-      list.splice(index, 1);
-      this.onGraphChange();
-    },
-    addGraph (graph) {
-      if (graph.className === 'Overlay.Polyline') {
-        return this.addPolyline(graph);
-      } else if (graph.className === 'AMap.Marker') {
-        return this.addMarker(graph);
-      } else if (graph.className === 'Overlay.Circle') {
-        return this.addCircle(graph);
-      } else if (graph.className === 'Overlay.Polygon') {
-        return this.addPolygon(graph);
-      }
-    },
-    addMarker (marker) {
-      if (!this.multiple) {
-        this.graph.markers.forEach(item => item.setMap(null));
-        this.graph.markers.length = 0;
-      }
-      const index = this.graph.markers.length;
-      marker.setExtData({ index });
-      this.graph.markers.push(marker);
-      return true;
-    },
-    addCircle (circle) {
-      if (circle.getRadius() <= 0) {
-        return false;
-      }
-      if (!this.multiple) {
-        this.graph.circles.forEach(item => item.setMap(null));
-        this.graph.circles.length = 0;
-      }
-      const index = this.graph.circles.length;
-      circle.setExtData({ index });
-      this.graph.circles.push(circle);
-      return true;
-    },
-    addPolyline (polyline) {
-      if (polyline.getLength() <= 0) {
-        return false;
-      }
-      if (!this.multiple) {
-        this.graph.polylines.forEach(item => item.setMap(null));
-        this.graph.polylines.length = 0;
-      }
-      const index = this.graph.polylines.length;
-      polyline.setExtData({ index });
-      this.graph.polylines.push(polyline);
-      return true;
-    },
-    addPolygon (polygon) {
-      if (polygon.getArea() <= 0) {
-        this.$message.info('绘制多边形时请至少绘制3个点');
-        return false;
-      }
-      if (!this.multiple) {
-        this.graph.polygons.forEach(item => item.setMap(null));
-        this.graph.polygons.length = 0;
-      }
-      const index = this.graph.polygons.length;
-      polygon.setExtData({ index });
-      this.graph.polygons.push(polygon);
-      return true;
-    },
-    getEditor (type) {
-      if (type === 'Overlay.Circle') {
-        return this.editor.circle || this.initCircleEditor();
-      } else if (type === 'Overlay.Polyline') {
-        return this.editor.polyline || this.initPolylineEditor();
-      } else if (type === 'Overlay.Polygon') {
-        return this.editor.polygon || this.initPolygonEditor();
-      }
-    },
-    initCircleEditor () {
-      const circleEditor = new this.AMap.CircleEditor(this.map);
-      this.editor.circle = circleEditor;
-      this.initEditorEvent(circleEditor);
-      return circleEditor;
-    },
-    initPolylineEditor () {
-      const polylineEditor = new this.AMap.PolylineEditor(this.map);
-      this.editor.polyline = polylineEditor;
-      this.initEditorEvent(polylineEditor);
-      return polylineEditor;
-    },
-    initPolygonEditor () {
-      const polygonEditor = new this.AMap.PolygonEditor(this.map);
-      this.editor.polygon = polygonEditor;
-      this.initEditorEvent(polygonEditor);
-      return polygonEditor;
-    },
-    initEditorEvent (editor) {
-      editor.on('addnode', () => this.onEditorChange());
-      editor.on('adjust', () => this.onEditorChange());
-      editor.on('move', () => this.onEditorChange());
-      // editor.on('add', (event) => this.onEditorAdd(event.target));
-    },
-    closeEditor (editor) {
-      editor.setTarget();
-      editor.close();
-    },
-    closeEditors () {
-      Object.values(this.editor).forEach(editor => this.closeEditor(editor));
-    },
-    getMapLngLatData (point) {
-      let [lng, lat] = point
-      if (!this.isCurrentCoord) {
-        [lng, lat] = gcoord.transform([lng, lat], CoordTypes[this.coordType], gcoord.GCJ02);
-      }
-      return [lng, lat];
-    },
-    getPoint (lngLat) {
-      let [lng, lat] = lngLat;
-      if (!this.isCurrentCoord) {
-        [lng, lat] = gcoord.transform([lng, lat], gcoord.GCJ02, CoordTypes[this.coordType]);
-        lng = lng.toFixed(7) / 1;
-        lat = lat.toFixed(7) / 1;
-      }
-      return [lng, lat];
-    },
-    getMarkerValue (markers) {
-      return (markers || []).map(marker => {
-        const lngLat = marker.getPosition();
-        return this.getPoint([lngLat.getLng(), lngLat.getLat()]);
-      });
-    },
-    getCircleValue (circles) {
-      return (circles || []).map(circle => {
-        const radius = circle.getRadius();
-        const lngLat = circle.getCenter();
-        return { center: this.getPoint([lngLat.getLng(), lngLat.getLat()]), radius };
-      });
-    },
-    getPolylineValue (polylines) {
-      return (polylines || []).map(polyline => {
-        const path = polyline.getPath();
-        return path.map(item => this.getPoint([item.getLng(), item.getLat()]));
-      });
-    },
-    getPolygonValue (polygons) {
-      return (polygons || []).map(polygon => {
-        const path = polygon.getPath();
-        return path.map(item => this.getPoint([item.getLng(), item.getLat()]));
-      });
-    },
-    async handleClear () {
-      const [, confirm] = await to(this.$confirm('确认清空地图上所有的图形?', '提示', { type: 'warning' }));
-      if (!confirm) {
-        return;
-      }
-      this.closeEditors();
-      this.contextMenu.close();
-      Object.values(this.graph).forEach((items) => items.forEach(item => item.setMap(null)));
-      this.graph = {
-        polylines: [],
-        markers: [],
-        circles: [],
-        polygons: [],
-      };
-      this.onGraphChange();
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.ui-field-fence {
-  width: 100%;
-  height: 280px;
-  position: relative;
-
-  .map {
-    width: 100%;
-    height: 100%;
-  }
-
-  .info {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-
-    .searchbox {
-      left: 12px;
-      top: 12px;
-      background-color: #fff;
-      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-      pointer-events: initial;
-      border-radius: 3px;
-      padding: 3px;
-
-      .search-result {
-        overflow: auto;
-        position: absolute;
-        top: calc(100% - 2px);
-        left: 0;
-        right: 0;
-        background-color: #fefefe;
-        box-shadow: 0 1px 3px #999;
-        visibility: hidden;
-        border-radius: 0 0 3px 3px;
-
-        .auto-item {
-          white-space: nowrap;
-          font-size: 12px;
-          cursor: pointer;
-          padding: 4px;
-          line-height: 14px;
-        }
-      }
-    }
-  }
-
-  .input-item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 220px;
-    font-size: 12px;
-
-    .input-item-prepend {
-      margin-right: -1px;
-
-      .input-item-text {
-        padding: 0.25em 0.5em;
-        display: block;
-        text-justify: distribute-all-lines;
-        text-align-last: justify;
-        align-items: center;
-        margin-bottom: 0;
-        font-weight: 400;
-        line-height: 1.5;
-        color: #495057;
-        text-align: center;
-        white-space: nowrap;
-        background-color: #e9ecef;
-        border: 1px solid #ced4da;
-        border-radius: 0.25rem 0 0 0.25rem;
-        box-sizing: border-box;
-      }
-    }
-
-    input {
-      position: relative;
-      flex: 1 1 auto;
-      width: 1%;
-      margin: 0;
-      background: #fff;
-      padding: 0.25em 0.5em;
-      display: inline-block;
-      line-height: 1.5;
-      color: #495057;
-      vertical-align: middle;
-      border: 1px solid #ced4da;
-      border-radius: 0 0.25rem 0.25rem 0;
-      appearance: none;
-      box-sizing: border-box;
-
-      &:focus {
-        border-color: #80bdff;
-        outline: 0;
-        box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
-      }
-    }
-  }
-
-  .tools {
-    position: absolute;
-    bottom: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: row;
-    border-radius: 4px;
-    background-color: #fff;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-
-    .tool {
-      width: 32px;
-      height: 32px;
-      box-sizing: border-box;
-      background: #fff center no-repeat;
-      background-size: 18px;
-      cursor: pointer;
-      position: relative;
-
-      &:first-of-type {
-        border-radius: 4px 0 0 4px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 4px 4px 0;
-      }
-
-      &:hover {
-        background-color: #f0f0f0;
-      }
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 50%;
-        transform: translate(-50%, -100%);
-        padding: 4px 8px;
-        border-radius: 4px;
-        background-color: #fff;
-        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-        color: #666;
-        font-size: 12px;
-        line-height: 16px;
-        transition: all 0.2s ease-in-out;
-        opacity: 0;
-        word-break: keep-all;
-        visibility: hidden;
-        pointer-events: none;
-      }
-
-      &:hover::before {
-        top: -4px;
-        opacity: 1;
-        visibility: visible;
-      }
-
-      & + .tool {
-        border-left: 1px solid #eee;
-      }
-
-      &.marker {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      &.circle {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAABmRJREFUaN7tmHtQVOcZxp/vLIsgkbWDQ9UmYiO1BCwKRtjvHDgrSQS2SWYySUHjBXGcAeOlkHEcBw2KikWCyWATR1CmacZhMOC0mpAQBVHYBRZl18vUSbwwI64hEgVMpLBb2PP2D7ob22RbgSXbTPz9d853znve5/mu7wEe8eNk0cXIosiigAAdSRRLCxfqSIwUI+fMGWkcwdtCRkv/1Elpk9JCQ0lHkiCePk1RdJSO7t79kzHAU/zkDfDxVCApSAqSgiZNUmVhk2OrXk9a2icUxcayDqTS1xERRPg9NqlUrI3qMP2LLxoPtmS2ZKan/2gNiM+Oz47PnjYNPUPrh9bn5LAXqVjJW7kS7+BDVhUYyOrwS5oJADgHAAxYgZMALWeHkVhXh4PfHze8MrwyvNLXN4g0z2qe3bXLbQKLFH/FPzgYkxkAgIyshJWEh8d/zLt5d2Ghu9fIhlSkGgzGlS2nWk5VV7MRCz8rXom9vXgxJuKksH//frYWFagLCsJG6CH399NzmIeDR46gh6VTdH09TWY3lJLz56GH3neVzaYyqAwqQ09PA2tgDezevf+M7xpJEfRrZfY333ikmx9kLbuCycXFjUuaultqXn/9oQ2Qs8VEbdTWrbCgj/nl5yMXm7BRUYiwlm0oLqadwixhVn6+0Wg0Go29vaPNT0c60pGPj3Ju8Kqt65VX3PZkH06y7SEhQh4q2KXCQtLRdtKZzXiRzaTsoiJ37wkLcFHVeOVKA2tObU69cOF/C/8dv8FvbNwoy6LIOVF8u1jJS+/dc+6/Hu+hh0TqkrqkrrlznXnJ8/hVfvX48ZHGcbsLyMf5Zr45KgpPslxsLihABPrQef8+lQufKwlJSQ2sibWyM2e8ZYCncLMIMobTTMQ/yspgQSFuqtXIoyIcXL/e+IwxqXV2a6u3Ex83A2SNGClGJiTAgkIyRUfTDvqAVplMhoSWJ0xJhw55O2FP850pQH/BXpq4Zo3rxhL2vPDuvn3/aiVvJ+zEJ9gn2Ce4o4PsWMBiVqxQDORP/m+/PebA8jI+qLV+9ZWcLSbyuP5+577sbcHjjlQr1Uq1M2a4VtVPeSkvNZm8ndd445oCgkYpV8off9zVspgtg6W93dsJ/mAGsGAmMOGBOb6KzFj6/zPnx9+AECQjeWDAeU2ZaEJTYKC3E3SH85wi1/MT/ERbm3xfPKOt2LJl1AZM/JVmi2bLZ5/RcXqX9trtTMtiMH3BAm8LdQd9LpTR7NhY5LEdyJs/H36IQJzPiIs7lwE112uu11y321k4y2XPXLqEudiG0qlTpT3SHmlPRIS3BX+HBGpmhsRE17Uet4S7bW2jNsAJ/QyH6FBFheuB27SNtq1b5229ToarxenT2VHkY+CFF3ARO5F5+/bfe+yr7atra8dsgHBZPW3CivfeQxfVUGVfHwMWUkx6uo54KS8NC/O2AapealDCCwpgQjtuqtXIwS0KKCszW8wWs2VwcMwGOOt0OowslrtjByzog8Pfn15jDtS8/74+VB+qD50w4YcWLmdLL2mjXn4ZccjAUFoaAulNFFmtvrX2Pw4W7N07Tp8VBFktarSnGhtd5bCVV/GqTz4Zrtv9/MZbuI60Vq01OVmeK07kGBiQa8W/8qMOR/zz/Bg/lpQ01viq/95MNNPxpO3nf/voI8x2xAlrkpLYOpbD9sfF0RwlY2hWcvITs2YUhDzV3Gyts9ZZ6+7cGbvg4R8iIV//omXahzk5IKZmfiUl0CMNq9Vq+hjRVJ6ZaTjcojXlVVWNdwf8W2Lzo6dMkReLy7l/Q4NrRPRyi7bJZpOX8SyeVVamIylICnr66YeNG3Mt5lrMtcDA4f08I0Pezo/xY5cvu+J38mpe3dcnH+bz+Ly0NE/rGvE/wWEEQX6OH+FHNmxAJjOieudOvAML2h84OIXiGky9vbiLp+jm+fOUhTdYSnc3e40GkatS4VUMYjAsDHGMMBQWhl0owlvCt2vSZPhQZX29ajcWCX/OyDj9m+bc5lzPH81HacC3DA/Zxx5T3hyaYv/T8uXsDRrCzKVLqYPK2UB0NFvC/oDdAQFuA5iwFr+9dQspdA53T5xQOlRmxXTggNFoNLa2ms2eFuxxA9yRkpKSkpKiUnXWd9Z31oeGCm85LjguaDQ4QAYy2Gzgvmd9z965Yyg2FBuKv/xyvIU+4hHfzz8BhHaoMb4oUvYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMTEtMTlUMTU6NDU6MTIrMDg6MDCslcuKAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTExLTE5VDE1OjQ1OjEyKzA4OjAw3chzNgAAAE50RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fdTBiMzBmOGMybS9kcmF3X2NpcmxjbGUuc3ZnyLB+hgAAAABJRU5ErkJggg==);
-      }
-
-      &.polyline {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      &.polygon {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      &.help {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      &.clear {
-        background-image: url(data:image/png;base64,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);
-      }
-
-      &.marker:before {
-        content: '绘制点标注';
-      }
-
-      &.circle:before {
-        content: '绘制圆形';
-      }
-
-      &.polyline:before {
-        content: '绘制折线';
-      }
-
-      &.polygon:before {
-        content: '绘制多边形';
-      }
-
-      &.help:before {
-        content: '1.点击要绘制的图形\A 2.在地图上进行绘制,其中折线和多边形双击结束绘制\A 3.点击已经绘制好的地图进入编辑模式,再次点击退出编辑模式\A 4.在绘制好了的图形上右键可以删除该图形';
-        white-space: pre;
-      }
-
-      &.clear:before {
-        content: '清空所有图形';
-      }
-    }
-
-    .tool.disabled,
-    &.disabled .tool:not(.help) {
-      filter: opacity(0.3);
-      cursor: none;
-      pointer-events: none;
-    }
-  }
-
-  .close-btn {
-    position: absolute;
-    bottom: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: inline-block;
-    padding: 0 12px;
-    font-size: 12px;
-    line-height: 32px;
-    border-radius: 4px;
-    background-color: #fff;
-    cursor: pointer;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-
-    &:hover {
-      background-color: #f0f0f0;
-    }
-  }
-
-  .amap-logo,
-  .amap-copyright {
-    display: none !important;
-  }
-}
-</style>