搜索更换为geoserver wfs,图层顺序，弹窗定位等

徐旺旺

2021-05-10 cb85033879c74f34925a303402c1ad3e4a8646f2

 src/components/plugin/MeaSure.js

@@ -1,161 +1,251 @@
/* 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: 'blue',

  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.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

}

/* 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(areaMeasure.polygon.dragging)
    console.log('双击结束', e)
    areaMeasure.polygon.enableEdit()
    areaMeasure.polygon.dragging.disable()
    areaMeasure.map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon)
    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: 'blue',
  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.polyline.enableEdit()
    distanceMeasure.layers.addTo(distanceMeasure.map)
    distanceMeasure.points.pop()
  },
  dblclick: function (e) { // 双击结束
    console.log(distanceMeasure.polyline.dragging)
    console.log('双击结束', e)
    distanceMeasure.polyline.enableEdit()
    distanceMeasure.polyline.dragging.disable()
    distanceMeasure.polyline.addTo(distanceMeasure.layers)
    distanceMeasure.map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polyline.updateMeasurements, distanceMeasure.polyline)
    distanceMeasure.close(e.latlng)
    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 drawLine = {
//   points: [],
//   color: 'red',
//   L: null,
//   map: null,
//   layers: null,
//   polyline: null,
//   marker: null,
//   init (map, L) {
//     drawLine.L = window.L
//     drawLine.map = window.map
//     drawLine.points = []
//     drawLine.polyline = null
//     drawLine.marker = null
//     drawLine.layers = window.L.layers
//     map.on('click', drawLine.click).on('dblclick', drawLine.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) {
//     drawLine.map.doubleClickZoom.disable()
// // 添加点信息
//     drawLine.points.push(e.latlng)
// // 添加线
//     drawLine.map.on('mousemove', drawLine.mousemove)
//   },
//   mousemove (e) {
//     drawLine.points.push(e.latlng)
//     if (drawLine.polyline) {
//       distanceMeasure.map.removeLayer(distanceMeasure.polyline)
//     }
//     drawLine.polyline = drawLine.L.polyline(drawLine.points, {
//       showMeasurements: false,
//       color: 'red'
//     })
//     drawLine.polyline.addTo(drawLine.layers)
//     // distanceMeasure.polyline.enableEdit()
//     drawLine.layers.addTo(drawLine.map)
//     drawLine.points.pop()
//   },
//   dblclick (e) { // 双击结束
//     console.log(drawLine.polyline.dragging)
//     console.log('双击结束', e)
//     drawLine.polyline.enableEdit()
//     drawLine.polyline.dragging.disable()
//     drawLine.polyline.addTo(drawLine.layers)
//     drawLine.map.on('editable:vertex:drag editable:vertex:deleted', drawLine.polyline.updateMeasurements, drawLine.polyline)
//     drawLine.close(e.latlng)
//     drawLine.map.off('click', drawLine.click).off('mousemove', drawLine.mousemove).off('dblclick', drawLine.dblclick)
//   },
//   destory: function () {
//     if (drawLine.polyline) {
//       drawLine.map.removeLayer(drawLine.polyline)
//     }
//     if (drawLine.marker) {
//       drawLine.marker.remove()
//     }
//     if (drawLine.layers) {
//       drawLine.layers.clearLayers()
//     }
//   }
// }

const startMeasureArea = function (map, L) {
  areaMeasure.destory()
  areaMeasure.init(map, L)
}

const startMeasureLen = function (map, L) {
  distanceMeasure.destory()
  distanceMeasure.init(map, L)
}

// const drawLineData = (map, L) => {
//   drawLine.destory()
//   drawLine.init(map, L)
// }

const clearMeasure = function () {
  areaMeasure.destory()
  distanceMeasure.destory()
  // drawLine.destory()
}
export default {
  startMeasureArea,
  startMeasureLen,
  clearMeasure
  // drawLineData
}