修改左上方工具

chenzeping

2021-03-12 2366e25dea648aa39dd4ba21205bcc67ee85dc5d

修改左上方工具

 src/components/LayerController/LayerController.vue

@@ -1,19 +1,17 @@
<template>
    <div class="float-panel">
        <!--    <i class="horn horn-br"></i>-->
        <!--    <i class="horn horn-bl"></i>-->
        <div class="title-text-border" @click="switchPanel">
            <div class="title-icon"></div>
            <div class="title-text">图层控制</div>
        </div>
        <transition name="el-fade-in-linear">
            <div class="body-box" id="panelContent" :style="{ width:width }">
                <div v-show="isShow">
                    <slot></slot>
                </div>
            </div>
        </transition>
  <div class="float-panel">
    <div class="title-text-border" @click="switchPanel">
      <div class="title-icon"></div>
      <div class="title-text">图层控制</div>
    </div>
    <transition name="el-fade-in-linear">
      <div class="body-box" id="panelContent" :style="{ width:width }">
        <div v-show="isShow">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
@@ -93,198 +91,198 @@

<style lang="less">

    .float-panel {
        position: absolute;
        top: 80px;
        height: auto;
        font-size: 11px;
        z-index: 1000;
.float-panel {
  position: absolute;
  top: 80px;
  height: auto;
  font-size: 11px;
  z-index: 1000;

        div {
            color: #90c8e0;
        }
  div {
    color: #90c8e0;
  }

        .title-border {
            width: 100%;
            height: 28px;
            background: #10488c;
            -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
            clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
            position: relative;
        }
  .title-border {
    width: 100%;
    height: 28px;
    background: #10488c;
    -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    position: relative;
  }

        .title-border:before {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            top: 0;
            left: 0;
            background-color: #38c8ef;
        }
  .title-border:before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 0;
    left: 0;
    background-color: #38c8ef;
  }

        .title-border:after {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            top: 9px;
            right: 0;
            background-color: #38c8ef;
            -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
            clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
        }
  .title-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 9px;
    right: 0;
    background-color: #38c8ef;
    -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
    clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
  }

        .title-text-border {
            width: 30px;
            height: 120px;
            float: left;
            background: #091331;
            // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
            // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
        }
  .title-text-border {
    width: 30px;
    height: 120px;
    float: left;
    background: #091331;
    // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
    // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
  }

        .title-icon {
            float: left;
            width: 22px;
            height: 22px;
            margin-top: 4px;
            margin-left: 2px;
            background-image: url(../../assets/images/map-pages/icon/setting.png);
        }
  .title-icon {
    float: left;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    margin-left: 2px;
    background-image: url(../../assets/images/map-pages/icon/setting.png);
  }

        .title-text {
            width: 25px;
            color: #00d0f9;
            font-weight: bold;
            margin-top: 6px;
            text-align: center;
            font-size: 14px;
            filter: brightness(100%);
            text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
        }
  .title-text {
    width: 25px;
    color: #00d0f9;
    font-weight: bold;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    filter: brightness(100%);
    text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
  }

        .title-line {
            display: inline-block;
            width: 120px;
            height: 1px;
            // margin-top: 14px;
            margin-left: 4px;
            background-color: #04527f;
            line-height: 5px;
            vertical-align: middle;
        }
  .title-line {
    display: inline-block;
    width: 120px;
    height: 1px;
    // margin-top: 14px;
    margin-left: 4px;
    background-color: #04527f;
    line-height: 5px;
    vertical-align: middle;
  }

        .title-point {
            display: inline-block;
            width: 5px;
            height: 5px;
            // margin-top: 12px;
            background-color: #04527f;
            line-height: 5px;
            vertical-align: middle;
        }
  .title-point {
    display: inline-block;
    width: 5px;
    height: 5px;
    // margin-top: 12px;
    background-color: #04527f;
    line-height: 5px;
    vertical-align: middle;
  }

        .title-button {
            float: right;
            width: 28px;
            height: 28px;
            cursor: pointer;
  .title-button {
    float: right;
    width: 28px;
    height: 28px;
    cursor: pointer;

            :hover {
                font-weight: bold;
                color: white;
            }
        }

        .body-box {
            background-color: rgba(44, 62, 80, 0.6);
            border: 1px solid #10488c;
            margin-top: -1px;
            margin-left: 30px;
            height: auto;
        }

        .switch-head-up {
            width: 22px;
            height: 16px;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            cursor: pointer;
            background-image: url(../../assets/images/map-pages/icon/xljt1.png);
            transform: rotateX(0deg);
            transform-origin: 50% 50%;
            transition: transform 0.5s linear 0s;
        }

        .switch-head-down {
            transform: rotateX(180deg);
            transform-origin: 50% 50%;
            transition: transform 0.5s linear 0s;
        }

        select {
            background: transparent;
            margin: 6px;
            border: .5px solid #569EB7;
            width: 150px;
            color: #569EB7;
            padding: 0 16px;
        }

        .horn {
            width: 6px;
            height: 6px;
            float: left;
            position: absolute;
        }

        .horn-tl {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png);
            left: -1px;
            top: -1px;
        }

        .horn-tr {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
            right: -1px;
            top: -1px;
        }

        .horn-bl {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
            left: -1px;
            bottom: -1px;
        }

        .horn-br {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
            right: -1px;
            bottom: -1px;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 5px !important;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #0661AE;
            border: 1px solid transparent;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0px;
            background: #0E3565;
        }
    :hover {
      font-weight: bold;
      color: white;
    }
  }

  .body-box {
    background-color: rgba(44, 62, 80, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    margin-left: 30px;
    height: auto;
  }

  .switch-head-up {
    width: 22px;
    height: 16px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    background-image: url(../../assets/images/map-pages/icon/xljt1.png);
    transform: rotateX(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }

  .switch-head-down {
    transform: rotateX(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }

  select {
    background: transparent;
    margin: 6px;
    border: .5px solid #569EB7;
    width: 150px;
    color: #569EB7;
    padding: 0 16px;
  }

  .horn {
    width: 6px;
    height: 6px;
    float: left;
    position: absolute;
  }

  .horn-tl {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png);
    left: -1px;
    top: -1px;
  }

  .horn-tr {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
    right: -1px;
    top: -1px;
  }

  .horn-bl {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
    left: -1px;
    bottom: -1px;
  }

  .horn-br {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
    right: -1px;
    bottom: -1px;
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 5px !important;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0661AE;
    border: 1px solid transparent;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }
}

</style>

 src/components/panel/BaseNavMenuItem.vue

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

  <div class="base-nav-menu">

    <template v-for="(item,index) in menuList">

      <template v-if="item.items && item.items.length">

        <el-submenu :index="index+''" :key="index">

          <template slot="title" v-if="item.title">

            <img :src="item.title" :title="item.alt"/>

          </template>

          <template slot="title" v-else>{{item.headings}}</template>

          <base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item>

        </el-submenu>

      </template>

      <template v-else>

        <el-menu-item :index="index+''" :key="index">

          {{ item.headings }}

        </el-menu-item>

      </template>

    </template>

  </div>

</template>



<script>



export default {

  name: 'BaseNavMenuItem',

  data () {

    return {}

  },

  props: {

    menuList: Array

  }

}

</script>



<style lang="less" scoped>

.base-nav-menu {

  height: 38px;

  line-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  outline: none;

  border: none;



  .el-submenu {

    .el-submenu__title {

      border-radius: 50%;



      .el-icon-arrow-down {

        display: none;

      }



    }

  }

}

</style>


 src/components/panel/ToolBoxPanel.vue

@@ -1,32 +1,33 @@
<template>
  <div class="lefttop-toolbox-panel">
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
    <div>
      <div class="init-choose" @click="changeSelect()">
        <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""/>
      </div>
      <el-menu class="el-menu"
               mode="horizontal"
               :collapse="isCollapse"
               unique-opened
               @open="handleOpen"
               @close="handleClose"
               @select="handleSelect"
               v-show='selectGroup'
      >
        <base-nav-menu-item :menuList='menuList'></base-nav-menu-item>
      </el-menu>
    </div>
    <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">
          <img :src="item.title" :title="item.alt"/>
        </transition>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'>
            <span>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
    <!--文字标注弹框-->
    <!--    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>-->
  </div>
</template>

<script>
import circle from '@/assets/images/map-pages/icon/toolbox/circle.png'
import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png'
import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
import location from '@/assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'
// import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
// import square from '@/assets/images/map-pages/icon/toolbox/square.png'
import circle from '@assets/images/map-pages/icon/toolbox/circle.png'
import location from '@assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@assets/images/map-pages/icon/toolbox/polygon.png'
import fullscreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png'

// 测量的方法
import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
@@ -36,52 +37,75 @@
import MakeTation from '@components/plugin/MakeTation'

// 封装的选择弹框
import TextBounced from '@components/panel/bounced/TextBounced'
import BaseNavMenuItem from '@components/panel/BaseNavMenuItem'

export default {
  name: 'ToolBoxPanel',
  components: { TextBounced },
  components: { BaseNavMenuItem },
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      activeTools: {},
      imgLists: [
      menuList: [
        {
          title: circle,
          alt: '标绘',
          items: [
            { headings: '线标绘' },
            { headings: '面标绘' },
            { headings: '箭头标绘' }
            {
              headings: '点标绘'
            },
            {
              headings: '线标绘'
            },
            {
              headings: '面标绘',
              items: [
                { headings: '圆形' },
                { headings: '多边形' },
                { headings: '矩形' }
              ]
            }
          ]
        },
        {
          title: square,
          alt: '标注',
          items: [
            { headings: '点标注' },
            { headings: '线标注' },
            { headings: '面标注' },
            { headings: '文字标注' },
            { headings: '图标标注' }
          ]
        },
        {
          title: legend,
          alt: '测量',
          items: [
            { headings: '距离测量' },
            { headings: '面积测量' }
          ]
        },
        // {
        //   title: square,
        //   alt: '标注',
        //   items: [
        //     { headings: '点标注' },
        //     { headings: '线标注' },
        //     { headings: '面标注' },
        //     { headings: '文字标注' },
        //     { headings: '图标标注' }
        //   ]
        // },
        // {
        //   title: legend,
        //   alt: '测量',
        //   items: [
        //     { headings: '距离测量' },
        //     { headings: '面积测量' }
        //   ]
        // },
        {
          title: location,
          alt: '切换底图',
          items: [
            { headings: '影像图' },
            { headings: '矢量图' },
            { headings: '地形图' }
            {
              headings: '影像图',
              items: [
                { headings: '影像標注' }
              ]
            },
            {
              headings: '矢量图',
              items: [
                { headings: '矢量標注' }
              ]
            },
            {
              headings: '地形图',
              items: [
                { headings: '地形標注' }
              ]
            }
          ]
        },
        {
@@ -104,10 +128,7 @@
          ]
        }
      ],
      form: {
        regionType: '',
        enterprise: ''
      },
      isCollapse: false,
      selectGroup: false,
      drawLayer: null,
      map: null,
@@ -117,19 +138,20 @@
    }
  },
  methods: {
    handleOpen () {
    },
    handleClose () {
    },
    handleSelect (index, indexPath) {

    },
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleCommand (command) {
    handleSelects (command) {
      console.log(command)
      switch (command) {
        case '全屏':
@@ -163,17 +185,17 @@
        case '线标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面标绘':
          this.drawLayer = this.map.editTools.startPolygon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '箭头标绘':
          this.drawLayer = this.map.editTools.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
        case '多边形':
          alert('多边形')
          break
        case '点标注':
          MakeTation.StartCircleAnnotation(this.map, this.L)
        case '点标绘':
          MakeTation.StartPointAnnotation(this.map, this.L)
          break
        case '图标标注':
          this.drawLayer = this.map.editTools.startIcon()
@@ -190,93 +212,71 @@
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },
    loadData () {

    }
  },
  mounted () {
    this.loadData()
  },
  created () {

  }
}
</script>

<style lang="less">

.lefttop-toolbox-panel {
  position: absolute;
  left: 5px;
  top: 5px;
  left: 15px;
  top: 15px;
  z-index: 999;
  display: flex;

  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 38px;
    border-radius: 50%;
    border: 2px skyblue solid;
  div {
    width: 100%;
    height: 55px;
    line-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
    justify-content: space-around;

  .el-select-dropdown {
    position: absolute;
    z-index: 1;
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #305B62;
    border-radius: 15px;
    padding-inline: 10px;
    padding-inline-start: 30px;

    .el-dropdow {
      width: 20%;
    .init-choose {
      background: #305B62;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 2px skyblue solid;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    @keyframes bounce-in {
      0% {
        transform: scale(0);
        opacity: 0.3;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .fade-enter-active {
      transform-origin: left center;
      animation: bounce-in .2s;
    }

    .fade-leave-active {
      transform-origin: left;
      animation: bounce-in .2s reverse;
    .el-menu {
      width: 80%;
      background: none;
      z-index: 1;
      border: none;
      background: #305B62;
      border-radius: 50px;
    }
  }

  .el-select-dropdown:last-child {
    margin-left: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
  //.transition {
  //  @keyframes bounce-in {
  //    0% {
  //      transform: scale(0);
  //      opacity: 0.3;
  //    }
  //    100% {
  //      transform: scale(1);
  //      opacity: 1;
  //    }
  //  }
  //
  //  .fade-enter-active {
  //    transform-origin: left center;
  //    animation: bounce-in .2s;
  //  }
  //
  //  .fade-leave-active {
  //    transform-origin: left;
  //    animation: bounce-in .2s reverse;
  //  }
  //}

}
</style>

 src/components/panel/bounced/TextBounced.vue

@@ -16,7 +16,7 @@
      <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>

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

        </select>

      </li>

    </ul>

@@ -32,8 +32,21 @@
  data () {

    return {

      bouncedText: '',

      bouncedSelect: '红色',

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

      bouncedSelect: 'red',

      selectOptions: [

        {

          value: 'red',

          text: '红色'

        },

        {

          value: 'blue',

          text: '蓝色'

        },

        {

          value: 'yellow',

          text: '黄色'

        }

      ]

    }

  },

  methods: {

@@ -43,6 +56,7 @@
    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

      MakeTation.setContentColor(this.bouncedSelect)

    },

    ChangeText () {

      MakeTation.setContentText(this.bouncedText)


 src/components/plugin/Editable.js

@@ -306,16 +306,6 @@
        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
      // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click.

 src/components/plugin/MakeTation.js

@@ -20,14 +20,20 @@
    TextAnnotation.layers = L.layerGroup()

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

  },

  setContent :function (changeContent) {

    console.log(changeContent)

  // 设置改变文字内容

  setContent: function (changeContent) {

    // console.log(changeContent)

    TextAnnotation.changeContent = changeContent

  },

  // 设置改变文字颜色

  setColor: function (changeColor) {

    // console.log(changeColor)

    TextAnnotation.changeColor = changeColor

  },

  click: function (e) {

    console.log(TextAnnotation.changeContent)

    // console.log(TextAnnotation.changeContent)

    let labIcon = L.divIcon({

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

      html: '<div style="color:' + TextAnnotation.changeColor + ';font-size: 18px;">' + TextAnnotation.changeContent + '</div>',

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

@@ -52,7 +58,7 @@
}



// 添加 点 的标注

var CircleAnnotation = {

let pointAnnotation = {

  points: [],

  color: 'yellow',

  L: null,

@@ -61,54 +67,60 @@
  polyline: null,

  marker: null,

  init: function (map, L) {

    // console.log(L)

    CircleAnnotation.L = L

    CircleAnnotation.map = map

    CircleAnnotation.points = []

    CircleAnnotation.polyline = null

    CircleAnnotation.marker = null

    CircleAnnotation.layers = L.layerGroup()

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

    pointAnnotation.L = L

    pointAnnotation.map = map

    pointAnnotation.points = []

    pointAnnotation.polyline = null

    pointAnnotation.marker = null

    pointAnnotation.layers = L.layerGroup()

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

  },

  click: function (e) {

    // var myIcon = L.divIcon({className: 'my-div-icon'});

    let marker = L.marker(e.latlng)

    marker.addTo(CircleAnnotation.map)

    marker.addTo(pointAnnotation.map)

    // pointAnnotation.map.panBy(L.point(e.latlng))

  },

  dblclick: function (e) {

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

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

  },

  destory: function () {

    if (CircleAnnotation.polyline) {

      CircleAnnotation.map.removeLayer(CircleAnnotation.polyline)

    if (pointAnnotation.polyline) {

      pointAnnotation.map.removeLayer(pointAnnotation.polyline)

    }

    if (CircleAnnotation.marker) {

      CircleAnnotation.marker.remove()

    if (pointAnnotation.marker) {

      pointAnnotation.marker.remove()

    }

    if (CircleAnnotation.layers) {

      CircleAnnotation.layers.clearLayers()

    if (pointAnnotation.layers) {

      pointAnnotation.layers.clearLayers()

    }

  }

}



// 添加文字标注

const startMakeText = function (map, L) {

  TextAnnotation.init(map, L)

}



const StartCircleAnnotation = function (map, L) {

  CircleAnnotation.init(map, L)

}



// 文字标注的 内容社设置

const setContentText = function (text) {

  TextAnnotation.setContent(text)

}

// 文字标注内容的 颜色 设置

const setContentColor = function (color) {

  TextAnnotation.setColor(color)

}



// 点 标注

const StartPointAnnotation = function (map, L) {

  pointAnnotation.init(map, L)

}



const clearText = function () {

  startMakeText.destory()

}

export default {

  startMakeText,

  clearText,

  StartCircleAnnotation,

  setContentText

  startMakeText,

  setContentText,

  setContentColor,

  StartPointAnnotation

}


 src/components/plugin/MeaSure.js

@@ -77,14 +77,14 @@
var distanceMeasure = {

  points: [],

// markers:[],

  color: 'red',

  color: 'blue',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    console.log(L)

    // console.log(L)

    distanceMeasure.L = L

    distanceMeasure.map = map

    distanceMeasure.points = []

@@ -127,8 +127,6 @@
    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 () {