火灾管理添加地图定位

guoshilong

2023-03-07 872545b9a21ec9af8060bc9b83091ed316e1876e

火灾管理添加地图定位

 public/img/dwicon.jpeg

 src/components/OpenLayersMap/index.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <div id='map' style="width: 100%;height: 83vh"></div>
    <div id='map' style="width: 100%;height: 83vh" @contextmenu.prevent=""></div>
    <div style="position: absolute;right:1%;top:2%;z-index: 999999;background-color: white;width: 210px">
      <div style="margin: 10px;width: 190px">
        <el-form ref="form" :model="searchForm" label-width="80px" label-position="top" size="small" @submit.native.prevent>
@@ -18,6 +18,9 @@
        </el-form>
      </div>
    </div>
    <div v-if="!mapLocation.isDetail" style="position: absolute;right:45%;top:2%;z-index: 999999;">
      <el-button size="small" icon="el-icon-location-outline" circle @click="createPoint"></el-button>
    </div>
  </div>
</template>

@@ -25,35 +28,31 @@
import 'ol/ol.css'
import {Map, View, Feature} from 'ol'
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 {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 'ol/ol.css'
import axios from '../../../src/router/axios'

export default {
  name: 'OpenLayersMap',
  props: [],
  props: ['mapLocation'],
  data() {
    return {
      map: null,
      points: [],
      featurePoint:null,
      // 线条点数组
      linePoints: [],
      // 多边形数组
      polygonPoints: [],
      draw: null,
      drawLayer: null,
      lineVector: null,
      pointVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址,
      toData: null,// 保存数据库格式坐标地址
      searchForm:{},
      searchData:[],
      region:[],
@@ -72,10 +71,10 @@
              url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
            })
          }),

        ],

        view: new View({
          // 设置中心点，默认南昌，用于规划南昌市的路线
          // 设置中心点，默认南昌
          center: [115.9032747077233, 28.67433116990186],
          projection: 'EPSG:4326',
          // 设置缩放倍数
@@ -84,6 +83,27 @@
          maxZoom: 19
        })
      })

      _this.pointVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
        style: new Style({
          image: new Icon({
            src: "/img/dwicon.jpeg",
            anchor: [0.48, 1],
            // imgSize: [250,320],
            scale: 0.13
          }),
        })
      })
      _this.map.addLayer(_this.pointVector)

      if (this.mapLocation.isDetail){
        this.addPoint(this.mapLocation.location)
      }

    },
    //调用高德地图提供的地点搜索
    search(keyWord,cb){
@@ -119,6 +139,9 @@
    //搜索框选择
    handleSelect(item) {
      this.setCenter(item.location.lng,item.location.lat)
      this.addPoint([item.location.lng,item.location.lat])
      this.coordinates.push([item.location.lng,item.location.lat])
      this.$emit("getMapData", this.coordinates)
    },
    //搜索
    querySearch(queryString, cb) {
@@ -129,7 +152,73 @@
      const view = this.map.getView()
      view.setCenter([lon, lat]);
      view.setZoom(20);
    }
    },
    //绘制点
    createPoint() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      // _this.pointVector.getSource().clear()

      _this.draw = new Draw({
        source: _this.pointVector.getSource(),
        type: 'Point',
      })
      _this.map.addInteraction(_this.draw)
      // 点击事件
      _this.map.on('click', function (e) {
        if (_this.featurePoint != null){
          _this.pointVector.getSource().removeFeature(_this.featurePoint)
        }

        if (_this.coordinates.length > 0) {
          let featureArray = _this.pointVector.getSource().getFeatures()
          for (let i = 0; i < featureArray.length -1; i++) {
            _this.pointVector.getSource().removeFeature(featureArray[i])
          }
          _this.coordinates = []
        }
        // 将点坐标保存集合
        _this.coordinates.push(e.coordinate)
        _this.$emit("getMapData", _this.coordinates)
      })

    },
    //创建点
    addPoint(pointLonLat) {
      // pointLonLat = [115.87531914674 28.8603307485585]
      if (pointLonLat && pointLonLat[0] && pointLonLat[1]) {
        //设置点
        let feature_Point = new Feature({
          geometry: new Point([Number(pointLonLat[0]), Number(pointLonLat[1])])
        })
        //点样式
        let style = new Style({
          image: new Icon({
            src: "/img/dwicon.jpeg",
            anchor: [0.48, 1],
            // imgSize: [250,320],
            scale: 0.13
          }),
        })
        this.featurePoint = feature_Point
        feature_Point.setStyle(style)
        this.pointVector.getSource().addFeature(feature_Point)
        let center = [Number(pointLonLat[0]), Number(pointLonLat[1])]
        let view = this.map.getView()
        view.setZoom(14)
        view.animate({
          center: center,
          duration: 5,
        })
      }
    },
    clearDraw() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.pointVector.getSource().clear()
    },
  },
  mounted() {
    this.createMap()

 src/views/fire/fireAdd.vue

@@ -5,7 +5,7 @@
        <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
      </el-col>
      <el-col :span="12">
        <OpenLayersMap ref="olMap"></OpenLayersMap>
        <OpenLayersMap ref="olMap" @getMapData="getMapData" :map-location="mapLocation"></OpenLayersMap>
<!--        <avue-input-map v-model="form"></avue-input-map>-->
      </el-col>
    </el-row>
@@ -22,6 +22,9 @@
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form:{},
      mapLocation:{
        isDetail:false
      },
      option: {
        column: [
          {
@@ -168,6 +171,7 @@
            message: "操作成功!"
          });
          this.$refs.form.resetForm()
          this.$refs.olMap.clearDraw()
          done();
        }else {
          this.$message({
@@ -180,6 +184,10 @@
        window.console.log(error);
        done();
      }
    },
    getMapData(data){
      this.form.lon = data[0][0]
      this.form.lat = data[0][1]
    }
  }
}

 src/views/fire/fireSupplement.vue

@@ -11,7 +11,7 @@
            <avue-form ref="form" v-model="form" :option="option"></avue-form>
          </el-col>
          <el-col :span="12">
            <OpenLayersMap></OpenLayersMap>
            <OpenLayersMap ref="olMap" :mapLocation="mapLocation"></OpenLayersMap>
          </el-col>
        </el-row>
      </el-card>
@@ -611,6 +611,9 @@
      policeResourcesData: [],
      policeResourcesForm: {},
      isDetail: false,
      mapLocation:{
        isDetail:false
      },
    }
  },
  created() {
@@ -751,6 +754,11 @@
      this.economicOption.menu = false
      this.damageAreaOption.menu = false
      this.policeResourcesOption.menu = false

      this.mapLocation = {
        isDetail:true,
        location:[this.form.lon,this.form.lat]
      }
    },
    goToList() {
      this.isDetail = false