@v2coding/ui 0.1.0 → 0.1.5

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

@@ -0,0 +1,856 @@
+<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,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAABMJJREFUaN7tlmtMVEcUx89cYKVAQF1KiBQCEkBEJZTXnbl771oxaosPEl1p1NZtbULTQsUmkn4okXbF0NgWeURdtUKNxiJYMBaQRyjZKlgwFBWqJNJKLg0sYvEBIuju6YcN/WCzaWVBjL2/r+fMmfn/5+TMACgoKCgoKCj8XyFTVYiXeZmX585VWbhdsFSvh3TYRwJDQzGJJGFxR4dr1P3XH3xXVFQXeWXnlZ0jIzMtfMoMWPY2L/Oyn9/jWC4YoKkJvsTL0OPpCflkiJzt7IQMjMDUyEisIYlk/s2brneH143s4fnnxQjO0QKPorkdcMVggDN4jFywWB57kWTug7Aw07om1vyFRmMp5FqcrkdEkEZAeMXH5+FZd+JOMjJmWviUIQ6wZBp27Zp4gDbQhuxse3lSLT1Ojx84IA7RNtpWWzvT557A4Q4gjbAelpjNEE384Fh4uN3EO0QFZ8LDiZqoYHtf37MSqNFoNBrNnDliMS/zclzck3HnyRa23aQkAY/B+HJ0NNERA8l1dxfTmYqp9u9HA/ZgT0MD50Vuw8Y1a9ATr0OyKHI+XIk1rq0N+gEgYPqEazFWF6vz9bX2WPssFXV18DsBqB4etkUpnch76g6QIpiBGVasICZSCSXV1VBDdgCcO0cMUEvqN20ievCwdi9bxiUQAeJOngQTOqM+MhJDuBT4Jj8f38NRbl96upTDivlSg2GqhYstYkvMA39/FF3ecY41mcgd+BV/c3HhlloeWl/T6SZdWPMtTaAJq1dLkcyNwuio5MWGacqJE1rUohad7XQS+ccrI8qCmk/YvFmKY/Op/6NH0nL2C/UuLLSX/1/RYjzGY2Cg9BUd4E3d3dIuWkErOjsFtaAW1PPmOeAo64rvT06WMthbNHl8XOxnubxsNNqi3KRniPS5kMN/vXHj33U/Y0v43YcOPW1dLVIjNS5YIDayd2lCb6/UQGtozaVLWtRi9Kve3v+23q7jYjzbzrZv2UIQzuL3RUXgCadh1Gg01TdFNQ+mpdmyECft7MQ+6UzFVImJ5EdwxvGyMsyCXPAqL39gGDOOB2/d6uGhUqlUSUnWD6ESKmNiIIX8jOm9vUQGN25bezu8j4I1+PRpfBMukptdXWMLLL4W38TElpCWkJaQe/ee2gAt8jIvr1qFmVweya2qAg9YhDQ72/RJk/6iLjPTUcH2mJgtsAcAh8vLoQBDIMpsho/JXRjw8wNXDISwq1ehnxyGPUFB+BJKsN7DA34gMfBHa6vrR8MXRrxXrnT4gyXUCXVCXUCA5j7to30bNkyXYLtG5LBiVmwwiOU0n987NqZFQS2oY2Im4raZM3u2dF5Q0+vt7dJe4RhbUlHxrM85bYh5bANfefSoKNNSWlpVZdeo+XQhXZiSInawApo5ODjZ/Rz+CE05vmgk/K1bMIuUwadBQTqdTqfTOTk9mYYHyRAZCg0lpegP0WbzC2MAOWxNtaYeOUKaYREkBQSYL/fqe/WnTkmbBXV869q1IlKkmJVF6mE5Smlp6MZtw9sFBZPeb6YF20O6zxpZoyjCbnDHy4WF4AIl0LN4Ma6FWfDnwAAMYgmcz8n56Y3mG8038vJsqxx/lZ5bbMPP1XWmz6GgoKCgoPAC8RdSzuO8/nibaAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0xMS0xOVQxNTo0NToxMiswODowMKyVy4oAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMTEtMTlUMTU6NDU6MTIrMDg6MDDdyHM2AAAASnRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl91MGIzMGY4YzJtL1BvbHlsaW5lLnN2Zxzpp5AAAAAASUVORK5CYII=);
+      }
+
+      &.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>