文字标注

chenzeping

2021-03-10 4b9b76e141865b150cd2fdba139f9a80b39dc7e9

文字标注

 src/Sgis.js

@@ -8,7 +8,7 @@
import WmtsSupport from '@components/plugin/wmts_plugins'

import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
// import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'
// 下载
@@ -29,7 +29,7 @@
  MagicMarker.init(L) // 动画Marker
  WmtsSupport.init(L) // 扩展，使支持WMTS
  // CustomPopup.init(L) // 自定义弹出框
  DashFlow.DashFlow(L) // 流动线图
  // DashFlow.DashFlow(L) // 流动线图
  CanvasMarkers.init(L)// 画布图层
  // 全屏
  FullScreen.init(L)

 src/components/panel/ToolBoxPanel.vue

@@ -28,11 +28,14 @@
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 {
@@ -170,8 +173,7 @@
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '点标注':
          this.drawLayer = this.map.editTools.startMarker()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          MakeTation.StartCircleAnnotation(this.map, this.L)
          break
        case '图标标注':
          this.drawLayer = this.map.editTools.startIcon()

 src/components/panel/bounced/TextBounced.vue

@@ -10,7 +10,7 @@
      <li>

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

          <h6>内容：</h6>

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

          <div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>

        </form>

      </li>

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

@@ -24,6 +24,9 @@
</template>



<script>



import MakeTation from '@components/plugin/MakeTation'



export default {

  name: 'TextBounced',

  data () {

@@ -40,6 +43,10 @@
    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

    },

    ChangeText () {

      MakeTation.setContentText(this.bouncedText)

      console.log(this.bouncedText)

    }

  }

}

@@ -63,7 +70,7 @@
    margin: 0;



    li {

      margin: 0.5rem 0;

      margin: 1rem 0;

    }



    .bounced-box-title {


 src/components/plugin/MakeTation.js

@@ -8,6 +8,8 @@
  layers: null,

  polyline: null,

  marker: null,

  changeColor: '',

  changeContent: '',

  init: function (map, L) {

    // console.log(L)

    TextAnnotation.L = L

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

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

  },

  setContent :function (changeContent) {

    console.log(changeContent)

    TextAnnotation.changeContent = changeContent

  },

  click: function (e) {

    // console.log(e)

    let contents = 'bouncedText'

    console.log(TextAnnotation.changeContent)

    let labIcon = L.divIcon({

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

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

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

@@ -46,8 +51,56 @@
  }

}



// 添加 点 的标注

var CircleAnnotation = {

  points: [],

  color: 'yellow',

  L: null,

  map: null,

  layers: null,

  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)

  },

  click: function (e) {

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

    let marker = L.marker(e.latlng)

    marker.addTo(CircleAnnotation.map)

  },

  dblclick: function (e) {

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

  },

  destory: function () {

    if (CircleAnnotation.polyline) {

      CircleAnnotation.map.removeLayer(CircleAnnotation.polyline)

    }

    if (CircleAnnotation.marker) {

      CircleAnnotation.marker.remove()

    }

    if (CircleAnnotation.layers) {

      CircleAnnotation.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 clearText = function () {

@@ -55,5 +108,7 @@
}

export default {

  startMakeText,

  clearText

  clearText,

  StartCircleAnnotation,

  setContentText

}