Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-web

guanqb

2023-02-28 2e41623f7fd7fd4f01b08cda81012edc9c573d91

 src/components/map/mapBox.vue

@@ -1,10 +1,10 @@
<template>
  <div>
    <div id='map' :style="{height:isDetail?'90vh':'40vh',width:'100%'}">
    <div id='map' :style="{ height: isDetail ? '90vh' : '40vh', width: '100%' }" ref="MapContent">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px" v-if="!isDetail">
          <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
          <el-button  size="small" @click="clearDraw()">重置</el-button>
          <el-button type="primary" size="small" @click="point()">绘制区域</el-button>
          <el-button size="small" @click="clearDraw()">重置</el-button>
        </p>
      </div>
      <!--画线后的提示-->
@@ -21,18 +21,18 @@
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
import LineString from "ol/geom/LineString";
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import LineString from "ol/geom/LineString"
import Point from 'ol/geom/Point'
import Icon from 'ol/style/Icon'
import {Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle} from 'ol/style'
import {Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon} from 'ol/geom'
import Draw from 'ol/interaction/Draw'
import XYZ from "ol/source/XYZ";
import XYZ from "ol/source/XYZ"
import 'ol/ol.css'

export default {
  name: 'mapBox',
  props:['routeRange','isDetail'],
  props: ['routeRange', 'isDetail', "searchMap"],
  data() {
    return {
      map: null,
@@ -44,15 +44,16 @@
      draw: null,
      drawLayer: null,
      lineVector: null,
      pointVector:null,
      pointVector: null,
      polygonVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      showTip:false,
      showTip: false,
      tipPosition: {//提示的位置
        w: 200,
        h: 10,
      },
      tipTitle:null
      tipTitle: null
    }
  },
  methods: {
@@ -72,7 +73,7 @@
        ],
        view: new View({
          // 设置中心点，默认南昌，用于规划南昌市的路线
          center: [115.9032747077233, 28.67433116990186],
          center: [117.951478782, 28.447896798],
          projection: 'EPSG:4326',
          // 设置缩放倍数
          zoom: 13,
@@ -80,6 +81,7 @@
          maxZoom: 19
        })
      })

      _this.lineVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
@@ -92,8 +94,15 @@
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.polygonVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.map.addLayer(_this.lineVector)
      _this.map.addLayer(_this.pointVector)
      _this.map.addLayer(_this.polygonVector)
      //在地图上回显线或点
      _this.startAdd(_this.routeRange)
    },
@@ -116,41 +125,41 @@
      // toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
      if (toData) {
        // 将数据库点坐标数据转换
        let entityData = "";
        let entityArr = [];
        entityData = toData.match(/\(([^)]*)\)/);
        let entityData = ""
        let entityArr = []
        entityData = toData.match(/\(([^)]*)\)/)
        if (entityData && entityData != "") {
          entityData = entityData[1].split(",");
          entityData = entityData[1].split(",")
          for (let j = 0; j < entityData.length; j++) {
            entityArr.push([
              Number(entityData[j].split(" ")[0]),
              Number(entityData[j].split(" ")[1]),
            ]);
            ])
          }
        }
        // let lineCoords = [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717],[115.90696542732779, 28.73408542233564],[115.90696542732779, 28.73408542233564]]
        let lineCoords = entityArr
        let view = this.map.getView();
        let view = this.map.getView()
        view.setCenter([
          lineCoords[Math.ceil(lineCoords.length / 2)][0],
          lineCoords[Math.ceil(lineCoords.length / 2)][1],
        ]);
        view.setZoom(14.5);
        ])
        view.setZoom(14.5)

        let feature_LineString = new Feature({
          geometry: new LineString(lineCoords),
        });
        feature_LineString.setStyle(this.styleFunction());// 设置样式
        this.lineVector.getSource().addFeature(feature_LineString);
        })
        feature_LineString.setStyle(this.styleFunction())// 设置样式
        this.lineVector.getSource().addFeature(feature_LineString)
      }
    },
    // 添加点
    addPoint(pointLonLat){
    addPoint(pointLonLat) {
      // pointLonLat = POINT(115.87531914674 28.8603307485585)
      if (pointLonLat){
      if (pointLonLat) {
        let pointData = ""
        let pointArray = []
        pointData = pointLonLat.match(/\(([^)]*)\)/);
        pointData = pointLonLat.match(/\(([^)]*)\)/)
        pointArray = pointData[1].split(" ")
        //设置点
        let feature_Point = new Feature({
@@ -164,53 +173,63 @@
            // imgSize: [250,320],
            scale: 0.2
          }),
        });
        feature_Point.setStyle(style);
        this.pointVector.getSource().addFeature(feature_Point);
        let center = [Number(pointArray[0]), Number(pointArray[1])];
        let view = this.map.getView();
        view.setZoom(16);
        })
        feature_Point.setStyle(style)
        this.pointVector.getSource().addFeature(feature_Point)
        let center = [Number(pointArray[0]), Number(pointArray[1])]
        let view = this.map.getView()
        view.setZoom(16)
        view.animate({
          center: center,
          duration: 5,
        });
        })
      }
    },
    // 将点坐标集合转换为数据库数据
    doData(val) {
      let str = "LINESTRING(";
      let str = "LINESTRING("
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
        str += `${val[k][0]} ${val[k][1]}`
        if (k != val.length - 1) {
          str += ",";
          str += ","
        }
      }
      str += ")";
      str = str + "," + `${val[0][0]} ${val[0][1]}`
      str += ")"
      // console.log(str)
      return '\''+str+'\'';
      return '\'' + str + '\''
    },
    // 开始绘制
    point() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      _this.polygonVector.getSource().clear()
      //提示
      if(!_this.showTip){
      if (!_this.showTip) {
        _this.showTip = true
      }
      _this.tipTitle = "单击左键或者右键开始绘画"

      //提示器
      $("#map").off("mousemove").mousemove(function (e) {
        _this.setTipPosition(e.offsetX, e.offsetY, 5, 5);
      })
      $("#map").off("mousedown").mousedown(function () {
      function mapMousemove(e) {
        _this.setTipPosition(e.offsetX, e.offsetY, 5, 5)
      }

      this.$refs.MapContent.addEventListener('mousemove', mapMousemove)

      // this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)

      function mapMousedown() {
        _this.tipTitle = "可继续，或选择最终位置双击结束绘画"
      })
      }

      this.$refs.MapContent.addEventListener('mousedown', mapMousedown)
      // this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)

      _this.draw = new Draw({
        source: _this.lineVector.getSource(),
        type: 'LineString',
        source: _this.polygonVector.getSource(),
        type: 'Polygon',
        style: new Style({
          stroke: new StyleStroke({
            color: "red",
@@ -227,16 +246,17 @@
      // 结束事件
      _this.draw.on('drawend', function () {

        _this.map.removeInteraction(_this.draw);
        _this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
        _this.map.removeInteraction(_this.draw)
        _this.polygonVector.setStyle(_this.styleFunction())// 路线画好之后的样式
        // 将点坐标集合转换为数据库数据
        let toData = _this.doData(_this.coordinates)
        // 传值给父组件
        _this.$emit('toData',toData)
        _this.$emit('toData', toData)
        //隐藏提示
        _this.tipTitle = null;
        _this.tipTitle = null
        _this.showTip = false
      })

    },
    // 设置统一控制点击事件，需要画图方式在此处切换
    handleClick(point) {
@@ -263,7 +283,7 @@
      this.linePoints.push(point)
      let featureLine = new Feature({
        geometry: new GeomLineString(this.linePoints),
      });
      })

      // 添加线的样式
      let lineStyle = new Style({
@@ -274,8 +294,8 @@
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      });
      featureLine.setStyle(lineStyle);
      })
      featureLine.setStyle(lineStyle)

      let source = new VectorSource()
      source.addFeature(featureLine)
@@ -299,7 +319,7 @@
      let feature = new Feature({
        geometry: new GeomPolygon([this.polygonPoints]),
        attributes: null
      });
      })
      // 添加线的样式
      let lineStyle = new Style({
        fill: new StyleFill({
@@ -309,9 +329,9 @@
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      });
      feature.setStyle(lineStyle);
      let source = new VectorSource();
      })
      feature.setStyle(lineStyle)
      let source = new VectorSource()
      source.addFeature(feature)
      let vectorLayer = new VectorLayer({
        source: source
@@ -320,12 +340,12 @@
    },
    // 设置聚合点
    addMarker() {
      let source = new VectorSource();
      let source = new VectorSource()
      // 随机创建200个要素，后台点位取出后按此格式处理
      for (let i = 1; i <= 200; i++) {
        let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05];
        let feature = new Feature(new GeomPoint(coordinates));
        source.addFeature(feature);
        let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05]
        let feature = new Feature(new GeomPoint(coordinates))
        source.addFeature(feature)
      }

      // 聚合
@@ -337,7 +357,7 @@
      let clusters = new VectorLayer({
        source: clusterSource,
        style: function (feature) {
          let size = feature.get('features').length;
          let size = feature.get('features').length
          let style = new Style({
            image: new StyleCircle({
              radius: 20,
@@ -355,20 +375,23 @@
              })
            })
          })
          return style;
          return style
        }
      });
      })

      this.map.addLayer(clusters)
    },
    // 重置图层
    clearDraw(){
    clearDraw() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      _this.showTip = false
      _this.tipTitle = null

      // 传值给父组件
      _this.$emit('toData', "")
    },
    // 获取新的 layer 图层对象
    getLayer() {
@@ -394,14 +417,16 @@
    // 设置提示位置
    setTipPosition(x, y, n, m) {
      let _this = this
      _this.tipPosition.w = x + n;
      _this.tipPosition.h = y + m;
      _this.tipPosition.w = x + n
      _this.tipPosition.h = y + m
    },
    startAdd(routeRange){
      if (routeRange.startsWith("LINESTRING")){
        this.addLineDraw(routeRange)
      }else {
        this.addPoint(routeRange)
    startAdd(routeRange) {
      if (routeRange) {
        if (routeRange.startsWith("LINESTRING")) {
          this.addLineDraw(routeRange)
        } else if (routeRange.startsWith("POINT")) {
          this.addPoint(routeRange)
        }
      }
    }
  },