标绘功能添加

chenzeping

2021-03-16 f3ad333c6616beec6b95260b9f7bd6b439bf8a0c

标绘功能添加

 src/Sgis.js

@@ -1,12 +1,9 @@
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'

import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
// import MagicMarker from '@components/plugin/MagicMarker'
// import WmtsSupport from '@components/plugin/wmts_plugins'

import MapConfig from '@/conf/MapConfig'
import '@components/plugin/PathDashFlow' // 流动线图
// import CanvasMarkers from '@components/plugin/CanvasMarkers'
@@ -18,8 +15,9 @@
import 'leaflet.markercluster'
// import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut' // 瓦片图层切换淡入淡出

import './components/plugin/leaflet-canvas-markers' // 画布marker
import './components/plugin/Editable' // 标绘操作

let map = null
const L = window.L
const initMap = (div) => {
@@ -28,7 +26,7 @@
  }

  // Leaflet扩展代码
  Editable.init(L) // 图层编辑
  // Editable.init(L) // 图层编辑
  PathDrag.init(L) // 路径拖拽
  // MagicMarker.init(L) // 动画Marker
  // WmtsSupport.init(L) // 扩展，使支持WMTS

 src/assets/css/map/map-panel-style.less

@@ -160,7 +160,7 @@
  border: 1px solid @background-color-tools;
  background: @background-color-tools;
  padding: 0;
  //width: 90px;
  width: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

 src/assets/images/map-pages/icon/toolbox/del.png

 src/assets/images/map-pages/local.png

 src/components/panel/ToolBoxPanel.vue

@@ -37,11 +37,14 @@
import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png'

// 标绘的可选择数据
import iconRefinery from '@assets/images/map-pages/local.png'

import marker from '@assets/images/map-pages/icon/toolbox/map.png'
import line from '@assets/images/map-pages/icon/toolbox/line.png'
import polygonJ from '@assets/images/map-pages/icon/toolbox/polygon.png'
import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png'
import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png'
import del from '@assets/images/map-pages/icon/toolbox/del.png'

// 测量
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
@@ -90,6 +93,12 @@
              label: '圆形',
              icon: polygonY,
              title: '圆形'
            },
            {
              index: '1-4',
              label: '删除',
              icon: del,
              title: '删除标绘'
            }
          ]
        },
@@ -176,10 +185,10 @@
        }
      ],
      selectGroup: false,
      active: 0,
      drawLayer: null,
      map: null,
      L: window.L,
      active: 0
      L: window.L
    }
  },
  methods: {
@@ -187,28 +196,28 @@
      this.active = index
    },
    choiceItem (itemT) {
      console.log(itemT.label)
      switch (itemT.label) {
        case '点标绘':
          // MakeTation.StartPointAnnotation(this.map, this.L)
          var myIcon = this.L.icon({
            iconUrl: iconRefinery,
            iconSize: [26, 32],
            iconAnchor: [13, 16],
            popupAnchor: [26, -32]
          })
          this.drawLayer = this.map.editTools.startMarker()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          this.drawLayer.setIcon(myIcon)
          break
        case '线标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '多边形':
          this.drawLayer = this.map.editTools.startPolygon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '矩形':
          this.drawLayer = this.map.editTools.startRectangle()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '圆形':
          this.drawLayer = this.map.editTools.startCircle()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '距离':
          Measure.startMeasureLen(this.map, this.L)
@@ -244,73 +253,18 @@
          }).addTo(this.map)
          printerY.printMap('A4Portrait page', 'MyManualPrint')
          break
        case '删除':
          this.map.removeLayer(this.drawLayer)
          break
      }
      this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
      if (itemT.label === '多边形') {
        this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
      }
      if (itemT.label === '矩形') {
        this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
      }
    },
    // handleSelect (index) {
    //   console.log(index)
    //   switch (index) {
    //     case '4-1':
    //       // this.map.toggleFullscreen()
    //       var printer = this.L.easyPrint({
    //         sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
    //         filename: 'map_image',
    //         exportOnly: true,
    //         hideControlContainer: true
    //       }).addTo(this.map)
    //       printer.printMap('CurrentSize', 'MyManualPrint')
    //       break
    //     case '4-2':
    //       var printerX = this.L.easyPrint({
    //         sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
    //         filename: 'map_image',
    //         exportOnly: true,
    //         hideControlContainer: true
    //       }).addTo(this.map)
    //       printerX.printMap('A4Landscape page', 'MyManualPrint')
    //       break
    //     case '4-3':
    //       var printerY = this.L.easyPrint({
    //         sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
    //         filename: 'map_image',
    //         exportOnly: true,
    //         hideControlContainer: true
    //       }).addTo(this.map)
    //       printerY.printMap('A4Portrait page', 'MyManualPrint')
    //       break
    //     case '1-2':
    //       this.drawLayer = this.map.editTools.startPolyline()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       Measure.startMeasureLen(this.map, this.L)
    //       break
    //     case '1-3-1':
    //       // alert('圆形')
    //       this.drawLayer = this.map.editTools.circleMarker()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       break
    //     case '1-3-2':
    //       this.drawLayer = this.map.editTools.startPolygon()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       break
    //     case '1-1':
    //       MakeTation.StartPointAnnotation(this.map, this.L)
    //       break
    //     case '图标标注':
    //       this.drawLayer = this.map.editTools.startIcon()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       break
    //     case '文字标注':
    //       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
    //   }
    // },
    // 文字标注控制
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
@@ -328,8 +282,6 @@

  .specific-tools {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .el-button {
      padding: 0;
@@ -346,7 +298,6 @@

      span {
        display: block;
        font-size: 0.012rem;
        color: @color-tool;
      }
    }

 src/components/plugin/Editable.js

@@ -1,9 +1,8 @@
'use strict'
const init = (L) => {
'use strict';
  (function (factory, window) {
    // define an AMD module that relies on 'leaflet'
    if (typeof define === 'function' && window.define.amd) {
      window.define(['leaflet'], factory)
  if (typeof define === 'function' && define.amd) {
    define(['leaflet'], factory)

      // define a Common JS module that relies on 'leaflet'
    } else if (typeof exports === 'object') {
@@ -11,8 +10,8 @@
    }

    // attach your plugin to the global 'L' variable
    if (typeof window !== 'undefined' && L) {
      factory(L)
  if (typeof window !== 'undefined' && window.L) {
    factory(window.L)
    }
  }(function (L) {
    // 🍂miniclass CancelableEvent (Event objects)
@@ -2009,8 +2008,3 @@
      this.lng = latlng.lng
    }
  }, window))
}

export default {
  init
}