修改已知问题

chenzeping

2021-03-10 f21ba60dd8cd2f9f021d579fe52325abd37f4af1

修改已知问题

 src/Sgis.js

@@ -11,7 +11,10 @@
import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'
// 下载
import DownLoad from '@components/plugin/DownLoad'
// 测量
import LeafletMeasurePath from '@components/plugin/leaflet-measure-path/leaflet-measure-path'

let map = null
const L = window.L
@@ -32,6 +35,7 @@
  FullScreen.init(L)
  // 下载
  DownLoad.init(L)
  LeafletMeasurePath.init(L)

  map = L.map(div, MapConfig.mapOptions)


 src/components/panel/LegendPanel.vue

@@ -9,10 +9,12 @@
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
          <ul>
            <li v-for="(ite,inde) in item.items" :key="inde">
              <img :src='ite.legendImage' alt=''>
              <span>{{ ite.legendContent }}</span>
            </li>
            <div v-for="(ite,inde) in item.items" :key="inde">
              <li>
                <img :src='ite.legendImage' alt=''>
                <span>{{ ite.legendContent }}</span>
              </li>
            </div>
          </ul>
          <div :class="index === 5 ? '':'under-line'"></div>
        </div>
@@ -108,7 +110,7 @@
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '油田企业'
              legendContent: '油田企业      '
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
@@ -206,11 +208,6 @@
  methods: {
    // 图标 控制内容的展示与隐藏
    legendChange () {
      // if (this.legendControl === false) {
      //   this.legendControl = true
      // } else {
      //   this.legendControl = false
      // }
      this.legendControl = !this.legendControl
    }
  }
@@ -233,7 +230,7 @@
  .legend-icon {
    width: 3.4rem;
    height: 1.6rem;
    border-radius: .3rem;
    border-radius: 0.3rem;
    background: white;
    text-align: center;
  }
@@ -243,9 +240,6 @@
      transform: scale(0);
      opacity: 0.3;
    }
    //50% {
    //  transform: scale(1.1);
    //}
    100% {
      transform: scale(1);
      opacity: 1;
@@ -258,18 +252,15 @@
  }

  .fade-leave-active {
    //transform-origin: right;
    //animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

  .legend-content {
    position: absolute;
    right: 1rem;
    right: 0.3rem;
    bottom: 3rem;
    width: 30rem;
    height: 30rem;
    border-radius: 1rem;
    background: #3c7699;

@@ -286,23 +277,32 @@
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding-inline: 20px 0;
        margin-block: 0;
        padding: 0;
        padding-inline: 0;

        li {
        div {
          width: 25%;
          height: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0.1rem 0;

          img {
            height: 18px;
            width: 18px;
          }
          li {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-left: 15px;
            margin-right: 15px;

          span {
            font-size: 12px;
            color: white;
            img {
              height: 18px;
              width: 18px;
            }

            span {
              width: 80px;
              font-size: 12px;
              color: white;
            }
          }
        }
      }
@@ -311,7 +311,7 @@
    .under-line {
      height: 2px;
      background: #7bc5ef;
      margin-block-start: 0.5rem;
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }

 src/components/panel/ToolBoxPanel.vue

@@ -3,11 +3,6 @@
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
    </div>
    <!--    <transition name="fade">-->
    <!--      <ul v-show='selectGroup'>-->
    <!--        <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>-->
    <!--      </ul>-->
    <!--    </transition>-->
    <div class="el-select-dropdown" v-show='selectGroup'>
      <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total">
        <transition name="fade">
@@ -20,6 +15,8 @@
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
  </div>
</template>

@@ -31,9 +28,16 @@
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'

import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import Measure from '@/components/plugin/MeaSure'

import MakeTation from '@components/plugin/MakeTation'

import TextBounced from '@components/panel/bounced/TextBounced'

export default {
  name: 'ToolBoxPanel',
  components: {},
  components: { TextBounced },
  data () {
    return {
      isPanelVisible: false,
@@ -103,11 +107,16 @@
      },
      selectGroup: false,
      drawLayer: null,
      map: null,
      L: window.L,
      map: null
      // 控制工具栏 文字标注 的弹框是否显示
      bouncedText: false
    }
  },
  methods: {
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
@@ -157,7 +166,7 @@
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '箭头标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer = this.map.editTools.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '点标注':
@@ -169,8 +178,14 @@
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '文字标注':
          this.drawLayer = this.map.editTools.startText()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          this.bouncedText = true
          MakeTation.startMakeText(this.map, this.L)
          break
        case '距离测量':
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面积测量':
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },

 src/components/panel/bounced/TextBounced.vue

New file
@@ -0,0 +1,110 @@
<template>

  <div class="bounced-box">

    <ul>

      <li>

        <form action="" class="bounced-box-title">

          <span>文字标注设置</span>

          <a @click="changeBounced()">X</a>

        </form>

      </li>

      <li>

        <form action="" class="bounced-box-content">

          <h6>内容：</h6>

          <div><textarea v-model='bouncedText'></textarea></div>

        </form>

      </li>

      <li class="bounced-box-choose">

        <span>颜色：</span>

        <select v-model='bouncedSelect' @click="changeLabelTextSelect()">

          <option v-for="(item,index) in selectOptions" :key="index" :value="item">{{ item }}</option>

        </select>

      </li>

    </ul>

  </div>

</template>



<script>

export default {

  name: 'TextBounced',

  data () {

    return {

      bouncedText: '',

      bouncedSelect: '红色',

      selectOptions: ['红色', '蓝色', '黄色']

    }

  },

  methods: {

    changeBounced () {

      this.$emit('changeBounced', false)

    },

    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

    }

  }

}

</script>



<style lang="less" scoped>

.bounced-box {

  position: absolute;

  border: 1px solid grey;

  width: 150px;

  right: 5%;

  top: 238px;

  background-color: rgba(3, 28, 61, 0.8);

  color: white;

  cursor: default;

  left: 814px;



  ul {

    list-style: none;

    padding: 0;

    margin: 0;



    li {

      margin: 0.5rem 0;

    }



    .bounced-box-title {

      background-color: rgba(34, 83, 130, 0.8);

      cursor: move;

      display: flex;

      align-items: center;

      justify-content: space-around;



      a {

        color: white;

        cursor: pointer;

      }

    }



    .bounced-box-content {

      h6 {

        padding: 0;

        margin: 5px;

      }



      div {

        display: flex;

        align-items: center;

        justify-content: center;



        textarea {

          width: 90%;

          resize: none;

          outline: 0;

          border: 1px solid #a0b3d6;

          border-radius: 5px;

        }

      }

    }



    .bounced-box-choose {

      display: flex;

      align-items: center;

      justify-content: space-around;

    }

  }

}

</style>


 src/components/plugin/Editable.js

@@ -298,7 +298,6 @@
      connectCreatedToMap: function (layer) {
        return this.featuresLayer.addLayer(layer)
      },

      // 🍂method startPolyline(latlng: L.LatLng, options: hash): L.Polyline
      // Start drawing a Polyline. If `latlng` is given, a first point will be added. In any case, continuing on user click.
      // If `options` is given, it will be passed to the Polyline class constructor.
@@ -306,6 +305,16 @@
        const line = this.createPolyline([], options)
        line.enableEdit(this.map).newShape(latlng)
        return line
      },
      // 箭头标绘
      startPolylineArrow: function (latlng, options) {
        const lineArrow = this.createPolyline([], {
          color: 'black',
          weight: 3,
          opacity: 1.0
        })
        lineArrow.enableEdit(this.map).newShape(latlng)
        return lineArrow
      },

      // 🍂method startPolygon(latlng: L.LatLng, options: hash): L.Polygon
@@ -347,18 +356,6 @@
        const circle = this.createCircle(latlng, options)
        circle.enableEdit(this.map).startDrawing()
        return circle
      },
      // 文字标注
      startText: function (latlng, options) {
        latlng = latlng || this.map.getCenter().clone()
        const markerBuilding = this.createMarker(latlng, options).bindTooltip('问题标注内容', {
          offset: [0, 0],
          permanent: true,
          direction: 'top',
          className: 'anim-tooltip'
        })
        markerBuilding.enableEdit(this.map).startDrawing()
        return markerBuilding
      },

      // 图标标注

 src/components/plugin/FullScreen.js

@@ -1,4 +1,5 @@
/* eslint-disable */

// 全屏展示插件

const init = (L) => {

  (function (factory) {

    if (typeof define === 'function' && define.amd) {


 src/components/plugin/MakeTation.js

New file
@@ -0,0 +1,59 @@
/* eslint-disable */

// 添加文字标注

var TextAnnotation = {

  points: [],

  color: 'yellow',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    // console.log(L)

    TextAnnotation.L = L

    TextAnnotation.map = map

    TextAnnotation.points = []

    TextAnnotation.polyline = null

    TextAnnotation.marker = null

    TextAnnotation.layers = L.layerGroup()

    map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)

  },

  click: function (e) {

    // console.log(e)

    let contents = 'bouncedText'

    let labIcon = L.divIcon({

      html: '<div style="color: red;font-size: 18px;">' + contents + '</div>',

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

    })

    let marker = L.marker(e.latlng, { icon: labIcon })

    marker.addTo(TextAnnotation.map)

  },

  dblclick: function (e) {

    TextAnnotation.map.off('click', TextAnnotation.click).off('dblclick', TextAnnotation.dblclick)

  },

  destory: function () {

    if (TextAnnotation.polyline) {

      TextAnnotation.map.removeLayer(TextAnnotation.polyline)

    }

    if (TextAnnotation.marker) {

      TextAnnotation.marker.remove()

    }

    if (TextAnnotation.layers) {

      TextAnnotation.layers.clearLayers()

    }

  }

}



const startMakeText = function (map, L) {

  TextAnnotation.init(map, L)

}



const clearText = function () {

  startMakeText.destory()

}

export default {

  startMakeText,

  clearText

}


 src/components/plugin/MeaSure.js

New file
@@ -0,0 +1,163 @@
/* eslint-disable */

// 面积测量方法

var areaMeasure = {

  points: [],

// markers:[],

  color: 'red',

  L: null,

  layers: null,

  polygon: null,

  marker: null,

  init: function (map, L) {

    areaMeasure.L = L

    areaMeasure.map = map

    areaMeasure.points = []

    areaMeasure.polygon = null

    areaMeasure.marker = null

    areaMeasure.layers = L.layerGroup()

    areaMeasure.map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick)

  },

  close: function (latlng) {

    /*areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {

    //console.log('marker',e);

    if(areaMeasure.polygon)

    map.removeLayer(areaMeasure.polygon);



    if(areaMeasure.marker)

    areaMeasure.marker.remove();

    });

    //areaMeasure.markers.push(marker);

     */



  },

  click: function (e) {

    areaMeasure.map.doubleClickZoom.disable()

// 添加点信息

    areaMeasure.points.push(e.latlng)

// 添加面

    areaMeasure.map.on('mousemove', areaMeasure.mousemove)

  },

  mousemove: function (e) {

    areaMeasure.points.push(e.latlng)

    if (areaMeasure.polygon) {

      areaMeasure.map.removeLayer(areaMeasure.polygon)

    }

    areaMeasure.polygon = areaMeasure.L.polygon(areaMeasure.points, {

      showMeasurements: true,

      color: 'red'

    })

//areaMeasure.polygon.addTo(map);

    areaMeasure.polygon.addTo(areaMeasure.layers)

    areaMeasure.layers.addTo(areaMeasure.map)

    areaMeasure.points.pop()

  },

  dblclick: function (e) { // 双击结束

    console.log('双击结束', e)

    areaMeasure.polygon.addTo(areaMeasure.layers)

    areaMeasure.close(e.latlng)

//areaMeasure.polygon.enableEdit();

//map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);

    areaMeasure.map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick)

  },

  destory: function () {

    if (areaMeasure.polygon) {

      areaMeasure.map.removeLayer(areaMeasure.polygon)

    }



    if (areaMeasure.marker) {

      areaMeasure.marker.remove()

    }

    if (areaMeasure.layers) {

      areaMeasure.layers.clearLayers()

    }

  }

}



// 距离测量方法

var distanceMeasure = {

  points: [],

// markers:[],

  color: 'red',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    console.log(L)

    distanceMeasure.L = L

    distanceMeasure.map = map

    distanceMeasure.points = []

    distanceMeasure.polyline = null

    distanceMeasure.marker = null

    distanceMeasure.layers = L.layerGroup()

    map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick)

  },

  close: function (latlng) {

    /*distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {

    //console.log('marker',e);

    if(distanceMeasure.polyline)

    map.removeLayer(distanceMeasure.polyline);



    if(distanceMeasure.marker)

    distanceMeasure.marker.remove();

    });*/

  },

  click: function (e) {

    distanceMeasure.map.doubleClickZoom.disable()

// 添加点信息

    distanceMeasure.points.push(e.latlng)

// 添加线

    distanceMeasure.map.on('mousemove', distanceMeasure.mousemove)

  },

  mousemove: function (e) {

    distanceMeasure.points.push(e.latlng)

    if (distanceMeasure.polyline) {

      distanceMeasure.map.removeLayer(distanceMeasure.polyline)

    }

    distanceMeasure.polyline = distanceMeasure.L.polyline(distanceMeasure.points, {

      showMeasurements: true,

      color: 'red'

    })

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    distanceMeasure.layers.addTo(distanceMeasure.map)

    distanceMeasure.points.pop()

  },

  dblclick: function (e) { // 双击结束

    console.log('双击结束', e)

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    distanceMeasure.close(e.latlng)

//distanceMeasure.polygon.enableEdit();

//map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon);

    distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick)

  },

  destory: function () {

    if (distanceMeasure.polyline) {

      distanceMeasure.map.removeLayer(distanceMeasure.polyline)

    }

    if (distanceMeasure.marker) {

      distanceMeasure.marker.remove()

    }

    if (distanceMeasure.layers) {

      distanceMeasure.layers.clearLayers()

    }

  }

}



const startMeasureArea = function (map, L) {

  areaMeasure.init(map, L)

}



const startMeasureLen = function (map, L) {

  distanceMeasure.init(map, L)

}



const clearMeasure = function () {

  areaMeasure.destory()

  distanceMeasure.destory()

}

export default {

  startMeasureArea,

  startMeasureLen,

  clearMeasure

}


 src/components/plugin/leaflet-measure-path/leaflet-measure-path.css

New file
@@ -0,0 +1,22 @@
.leaflet-measure-path-measurement {

    position: absolute;

    font-size: 10px;

    color: black;

    text-shadow: -1px  0 0 white,

                 -1px -1px 0 white,

                  0 -1px 0 white,

                  1px -1px 0 white,

                  1px  0 0 white,

                  1px  1px 0 white,

                  0  1px 0 white,

                 -1px  1px 0 white;

    white-space: nowrap;

    transform-origin: 0;

    pointer-events: none;

}



.leaflet-measure-path-measurement > div {

    position: relative;

    margin-top: -25%;

    left: -50%;

}


 src/components/plugin/leaflet-measure-path/leaflet-measure-path.js

New file
@@ -0,0 +1,426 @@
/* eslint-disable */

const init = (L) => {

    !(function() {

        'use strict'



        L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({

            options: {

                pane: 'markerPane'

            },



            initialize: function(latlng, measurement, title, rotation, options) {

                L.setOptions(this, options)



                this._latlng = latlng

                this._measurement = measurement

                this._title = title

                this._rotation = rotation

            },



            addTo: function(map) {

                map.addLayer(this)

                return this

            },



            onAdd: function(map) {

                this._map = map

                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane

                var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane)

                var inner = L.DomUtil.create('div', '', el)

                inner.title = this._title

                inner.innerHTML = this._measurement



                map.on('zoomanim', this._animateZoom, this)



                this._setPosition()

            },



            onRemove: function(map) {

                map.off('zoomanim', this._animateZoom, this)

                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane

                pane.removeChild(this._element)

                this._map = null

            },



            _setPosition: function() {

                L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng))

                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'

            },



            _animateZoom: function(opt) {

                var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round()

                L.DomUtil.setPosition(this._element, pos)

                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'

            }

        })



        L.marker.measurement = function(latLng, measurement, title, rotation, options) {

            return new L.Marker.Measurement(latLng, measurement, title, rotation, options)

        }



        var formatDistance = function(d) {

            var unit,

                feet



            if (this._measurementOptions.imperial) {

                feet = d / 0.3048

                if (feet > 3000) {

                    d = d / 1609.344

                    unit = 'mi'

                } else {

                    d = feet

                    unit = 'ft'

                }

            } else {

                if (d > 1000) {

                    d = d / 1000

                    unit = 'km'

                } else {

                    unit = 'm'

                }

            }



            if (d < 100) {

                return d.toFixed(1) + ' ' + unit

            } else {

                return Math.round(d) + ' ' + unit

            }

        }



        var formatArea = function(a) {

            var unit,

                sqfeet



            if (this._measurementOptions.imperial) {

                if (a > 404.685642) {

                    a = a / 4046.85642

                    unit = 'ac'

                } else {

                    a = a / 0.09290304

                    unit = 'ft²'

                }

            } else {

                if (a > 1000000) {

                    a = a / 1000000

                    unit = 'km²'

                } else {

                    unit = 'm²'

                }

            }



            if (a < 100) {

                return a.toFixed(1) + ' ' + unit

            } else {

                return Math.round(a) + ' ' + unit

            }

        }



        var RADIUS = 6378137

        // ringArea function copied from geojson-area

        // (https://github.com/mapbox/geojson-area)

        // This function is distributed under a separate license,

        // see LICENSE.md.

        var ringArea = function ringArea(coords) {

            var rad = function rad(_) {

                return _ * Math.PI / 180

            }

            var p1, p2, p3, lowerIndex, middleIndex, upperIndex,

                area = 0,

                coordsLength = coords.length



            if (coordsLength > 2) {

                for (var i = 0; i < coordsLength; i++) {

                    if (i === coordsLength - 2) {// i = N-2

                        lowerIndex = coordsLength - 2

                        middleIndex = coordsLength -1

                        upperIndex = 0

                    } else if (i === coordsLength - 1) {// i = N-1

                        lowerIndex = coordsLength - 1

                        middleIndex = 0

                        upperIndex = 1

                    } else { // i = 0 to N-3

                        lowerIndex = i

                        middleIndex = i+1

                        upperIndex = i+2

                    }

                    p1 = coords[lowerIndex]

                    p2 = coords[middleIndex]

                    p3 = coords[upperIndex]

                    area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat))

                }



                area = area * RADIUS * RADIUS / 2

            }



            return Math.abs(area)

        }

        /**

         * Handles the init hook for polylines and circles.

         * Implements the showOnHover functionality if called for.

         */

        var addInitHook = function() {

            var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

            if (this.options.showMeasurements && !showOnHover) {

                this.showMeasurements()

            }

            if (this.options.showMeasurements && showOnHover) {

                this.on('mouseover', function() {

                    this.showMeasurements()

                })

                this.on('mouseout', function() {

                    this.hideMeasurements()

                })

            }

        }



        var circleArea = function circleArea(d) {

            var rho = d / RADIUS

            return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho))

        }



        var override = function(method, fn, hookAfter) {

            if (!hookAfter) {

                return function() {

                    var originalReturnValue = method.apply(this, arguments)

                    var args = Array.prototype.slice.call(arguments)

                    args.push(originalReturnValue)

                    return fn.apply(this, args)

                }

            } else {

                return function() {

                    fn.apply(this, arguments)

                    return method.apply(this, arguments)

                }

            }

        }



        L.Polyline.include({

            showMeasurements: function(options) {

                if (!this._map || this._measurementLayer) return this



                this._measurementOptions = L.extend({

                    showOnHover: (options && options.showOnHover) || false,

                    minPixelDistance: 30,

                    showDistances: true,

                    showArea: true,

                    showTotalDistance: true,

                    lang: {

                        totalLength: 'Total length',

                        totalArea: 'Total area',

                        segmentLength: 'Segment length'

                    }

                }, options || {})



                this._measurementLayer = L.layerGroup().addTo(this._map)

                this.updateMeasurements()



                this._map.on('zoomend', this.updateMeasurements, this)



                return this

            },



            hideMeasurements: function() {

                if (!this._map) return this



                this._map.off('zoomend', this.updateMeasurements, this)



                if (!this._measurementLayer) return this

                this._map.removeLayer(this._measurementLayer)

                this._measurementLayer = null



                return this

            },



            onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) {

                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

                if (this.options.showMeasurements && !showOnHover) {

                    this.showMeasurements(this.options.measurementOptions)

                }



                return originalReturnValue

            }),



            onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) {

                this.hideMeasurements()



                return originalReturnValue

            }, true),



            setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            formatDistance: formatDistance,

            formatArea: formatArea,



            updateMeasurements: function() {

                if (!this._measurementLayer) return this



                var latLngs = this.getLatLngs(),

                    isPolygon = this instanceof L.Polygon,

                    options = this._measurementOptions,

                    totalDist = 0,

                    formatter,

                    ll1,

                    ll2,

                    p1,

                    p2,

                    pixelDist,

                    dist



                if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) {

                    // Outer ring is stored as an array in the first element,

                    // use that instead.

                    latLngs = latLngs[0]

                }



                this._measurementLayer.clearLayers()



                if (this._measurementOptions.showDistances && latLngs.length > 1) {

                    formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this)



                    for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) {

                        ll1 = latLngs[i - 1]

                        ll2 = latLngs[i % len]

                        dist = ll1.distanceTo(ll2)

                        totalDist += dist



                        p1 = this._map.latLngToLayerPoint(ll1)

                        p2 = this._map.latLngToLayerPoint(ll2)



                        pixelDist = p1.distanceTo(p2)



                        if (pixelDist >= options.minPixelDistance) {

                            L.marker.measurement(

                                this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]),

                                formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options)

                                .addTo(this._measurementLayer)

                        }

                    }



                    // Show total length for polylines

                    if (!isPolygon && this._measurementOptions.showTotalDistance) {

                        L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options)

                            .addTo(this._measurementLayer)

                    }

                }



                if (isPolygon && options.showArea && latLngs.length > 2) {

                    formatter = options.formatArea || L.bind(this.formatArea, this)

                    var area = ringArea(latLngs)

                    L.marker.measurement(this.getBounds().getCenter(),

                        formatter(area), options.lang.totalArea, 0, options)

                        .addTo(this._measurementLayer)

                }



                return this

            },



            _getRotation: function(ll1, ll2) {

                var p1 = this._map.project(ll1),

                    p2 = this._map.project(ll2)



                return Math.atan((p2.y - p1.y) / (p2.x - p1.x))

            }

        })



        L.Polyline.addInitHook(function() {

            addInitHook.call(this)

        })



        L.Circle.include({

            showMeasurements: function(options) {

                if (!this._map || this._measurementLayer) return this



                this._measurementOptions = L.extend({

                    showOnHover: false,

                    showArea: true,

                    lang: {

                        totalArea: 'Total area',

                    }

                }, options || {})



                this._measurementLayer = L.layerGroup().addTo(this._map)

                this.updateMeasurements()



                this._map.on('zoomend', this.updateMeasurements, this)



                return this

            },



            hideMeasurements: function() {

                if (!this._map) return this



                this._map.on('zoomend', this.updateMeasurements, this)



                if (!this._measurementLayer) return this

                this._map.removeLayer(this._measurementLayer)

                this._measurementLayer = null



                return this

            },



            onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) {

                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

                if (this.options.showMeasurements && !showOnHover) {

                    this.showMeasurements(this.options.measurementOptions)

                }



                return originalReturnValue

            }),



            onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) {

                this.hideMeasurements()



                return originalReturnValue

            }, true),



            setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            formatArea: formatArea,



            updateMeasurements: function() {

                if (!this._measurementLayer) return



                var latLng = this.getLatLng(),

                    options = this._measurementOptions,

                    formatter = options.formatArea || L.bind(this.formatArea, this)



                this._measurementLayer.clearLayers()



                if (options.showArea) {

                    formatter = options.formatArea || L.bind(this.formatArea, this)

                    var area = circleArea(this.getRadius())

                    L.marker.measurement(latLng,

                        formatter(area), options.lang.totalArea, 0, options)

                        .addTo(this._measurementLayer)

                }

            }

        })



        L.Circle.addInitHook(function() {

            addInitHook.call(this)

        })

    })()

}

export default {

    init

}

 src/main.js

@@ -20,7 +20,7 @@
Vue.use(ElementUI)
Vue.prototype.$cancels = []
Vue.prototype.L = L
// 注册指令
// 注册指令7
// registerDirectives(Vue)

// 注册echarts皮肤