Merge remote-tracking branch 'origin/master'

guoshilong

2022-11-23 998b75f0d4aaed03001ec4246cd4f3b4b0743b7e

 src/components/OpenLayersMap/index.vue

@@ -1,8 +1,8 @@
<template>
  <div>
      <div id='map' :style="{height:isTaskinfoDetail?'85vh':'40vh',width:'100%'}">
      <div id='map' :style="{height:isDetail?'85vh':'40vh',width:'100%'}">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px" v-if="!isTaskinfoDetail">
        <p style="margin-top: 10px" v-if="!isDetail">
          <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
          <el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
        </p>
@@ -22,6 +22,8 @@
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 {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'
@@ -30,7 +32,7 @@

export default {
  name: 'OpenLayersMap',
  props:['routeRange','isTaskinfoDetail'],
  props:['routeRange','isDetail',"pointLonLat"],
  data() {
    return {
      map: null,
@@ -42,6 +44,7 @@
      draw: null,
      drawLayer: null,
      lineVector: null,
      pointVector:null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      showTip:false,
@@ -73,8 +76,8 @@
          projection: 'EPSG:4326',
          // 设置缩放倍数
          zoom: 13,
          minZoom: 6,
          maxZoom: 20
          minZoom: 8,
          maxZoom: 19
        })
      })
      _this.lineVector = new VectorLayer({
@@ -83,8 +86,16 @@
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.pointVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.map.addLayer(_this.lineVector)
      _this.map.addLayer(_this.pointVector)
      _this.addLineDraw(_this.routeRange)
      _this.addPoint(_this.pointLonLat)
    },
    // 绘画之后的样式
    styleFunction() {
@@ -133,6 +144,33 @@
        this.lineVector.getSource().addFeature(feature_LineString);
      }
    },
    // 添加点
    addPoint(pointLonLat){
      if (pointLonLat){
        //设置点
        let feature_Point = new Feature({
          geometry: new Point([Number(pointLonLat.lon), Number(pointLonLat.lat)])
        })
        //点样式
        let style = new Style({
          image: new Icon({
            src: "/img/dwicon.jpeg",
            anchor: [0.48, 0.52],
            // imgSize: [250,320],
            scale: 0.2
          }),
        });
        feature_Point.setStyle(style);
        this.pointVector.getSource().addFeature(feature_Point);
        let center = [Number(pointLonLat.lon), Number(pointLonLat.lat)];
        let view = this.map.getView();
        view.setZoom(16);
        view.animate({
          center: center,
          duration: 5,
        });
      }
    },
    // 将点坐标集合转换为数据库数据
    doData(val) {
      let str = "LINESTRING(";
@@ -156,11 +194,14 @@
      if(!_this.showTip){
        _this.showTip = true
      }
      _this.tipTitle = "单击左键开始绘画";
      _this.tipTitle = "单击左键或者右键开始绘画"
      //提示器
      $("#map").off("mousemove").mousemove(function (e) {
        _this.setTipPosition(e.offsetX, e.offsetY, 5, 5);
      });
      })
      $("#map").off("mousedown").mousedown(function () {
        _this.tipTitle = "可继续，或选择最终位置双击结束绘画"
      })

      _this.draw = new Draw({
        source: _this.lineVector.getSource(),
@@ -177,7 +218,6 @@
      _this.map.on('click', function (e) {
        // 将点坐标保存集合
        _this.coordinates.push(e.coordinate)
        _this.tipTitle = "可继续，或单击鼠标结束";
      })
      // 结束事件
      _this.draw.on('drawend', function () {
@@ -248,7 +288,7 @@
      vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
      this.map.addLayer(vectorLayer) // 将图层添至地图对象
    },
    //画多边形
    // 画多边形
    drawPolygon(point) {
      this.polygonPoints.push(point)
      let feature = new Feature({
@@ -316,6 +356,7 @@

      this.map.addLayer(clusters)
    },
    // 重置图层
    clearDraw(){
      let _this = this
      _this.coordinates = []
@@ -345,7 +386,7 @@
        // }
      })
    },
    //设置提示位置
    // 设置提示位置
    setTipPosition(x, y, n, m) {
      let _this = this
      _this.tipPosition.w = x + n;