火灾事件添加根据所选区域，地图自动定位中心

guoshilong

2023-03-09 668642a485a9f4b083ffc6981643ee2247500c2d

火灾事件添加根据所选区域，地图自动定位中心

 src/components/OpenLayersMap/index.vue

@@ -18,8 +18,8 @@
        </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 v-if="!mapLocation.isDetail" style="position: absolute;right:51%;top:7%;z-index: 999999;">
      <el-button type="info" icon="el-icon-location-outline" circle @click="createPoint"></el-button>
    </div>
  </div>
</template>
@@ -31,8 +31,7 @@
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
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 Draw from 'ol/interaction/Draw'
import {Style} from 'ol/style'
import XYZ from "ol/source/XYZ";
import 'ol/ol.css'

@@ -45,17 +44,15 @@
      points: [],
      featurePoint:null,
      // 线条点数组
      linePoints: [],
      // 多边形数组
      polygonPoints: [],
      draw: null,
      drawLayer: null,
      pointVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      coordinates: [],
      searchForm:{},
      searchData:[],
      region:[],
      regionName:[],
    }
  },
  methods: {
@@ -102,6 +99,9 @@

      if (this.mapLocation.isDetail){
        this.addPoint(this.mapLocation.location)
        if (this.mapLocation.location[0]&&this.mapLocation.location[1]){
          this.setCenter(this.mapLocation.location[0],this.mapLocation.location[1])
        }
      }

    },
@@ -133,8 +133,10 @@
      });
    },
    //获取从父组件传递的行政区code
    getLocation(data){
      this.region = data
    getLocation(regionCode,regionName){
      this.region = regionCode
      this.regionName = regionName
      this.setCenterByDistrict(regionName)
    },
    //搜索框选择
    handleSelect(item) {
@@ -147,42 +149,39 @@
    querySearch(queryString, cb) {
      this.search(queryString,cb)
    },
    //设置中心点
    //根据经纬度设置中心点
    setCenter(lon,lat){
      const view = this.map.getView()
      view.setCenter([lon, lat]);
      view.setZoom(20);
    },
    //根据区域名设置中心点
    setCenterByDistrict(regionName){
      const that = this
      AMap.plugin('AMap.DistrictSearch', function () {
        // 创建行政区查询对象
        var district = new AMap.DistrictSearch({
          // 设置查询行政区级别为 区
          level: 'district'
        })
        district.search(regionName[2], function(status, result) {
          if (status == "complete"){
            let lon = result.districtList[0].center.lng
            let lat = result.districtList[0].center.lat
            that.setCenter(lon,lat)
          }
        })
      })
    },
    //绘制点
    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)
       _this.map.on('click', function (e) {
        _this.clearDraw()
        _this.addPoint(e.coordinate)
        _this.$emit("getMapData", e.coordinate)
      })

    },
    //创建点
    addPoint(pointLonLat) {
@@ -204,13 +203,6 @@
        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(20)
        view.animate({
          center: center,
          duration: 5,
        })
      }
    },
    clearDraw() {

 src/views/fire/fireAdd.vue

@@ -1,12 +1,14 @@
<template>
  <basic-container>
    <el-row>
      <el-col :span="12">
      <el-col :span="11">
        <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
      </el-col>
      <el-col :span="1">

      </el-col>
      <el-col :span="12">
        <OpenLayersMap ref="olMap" @getMapData="getMapData" :map-location="mapLocation"></OpenLayersMap>
<!--        <avue-input-map v-model="form"></avue-input-map>-->
      </el-col>
    </el-row>
  </basic-container>
@@ -16,6 +18,7 @@
import {add} from "@/api/fire/fire";
import OpenLayersMap from "@/components/OpenLayersMap/index";
import axios from "@/router/axios"
import {getDetail} from "@/api/base/region";
export default {
  name: "fireAdd",
  components: {OpenLayersMap},
@@ -76,7 +79,7 @@
              } else {
                callback()
              }
            }
            },
          },
          {
            label:'具体地址',
@@ -158,7 +161,9 @@
    "form.location":{
      handler(newVal){
        if (newVal){
          this.$refs.olMap.getLocation(newVal)
          if (newVal.length == 3){
            this.getRegionDetail(newVal)
          }
        }
      }
    }
@@ -188,8 +193,16 @@
    },
    //获取地图经纬度
    getMapData(data){
      this.form.lon = data[0][0]
      this.form.lat = data[0][1]
      this.form.lon = data[0]
      this.form.lat = data[1]
    },
    getRegionDetail(regionCode){
      let code = regionCode[2]
      getDetail(code).then(res=>{
        let data = res.data.data
        let regionName = [data.provinceName,data.cityName,data.districtName]
        this.$refs.olMap.getLocation(regionCode,regionName)
      })
    }
  }
}

 src/views/fire/fireSupplement.vue

@@ -7,7 +7,7 @@
          <el-button v-if="isDetail" size="small" @click="goToList">返回</el-button>
        </div>
        <el-row>
          <el-col :span="12">
          <el-col :span="11">
            <avue-form ref="form" v-model="form" :option="option">
              <template slot="no">
                <el-autocomplete class="inline-input"
@@ -21,6 +21,9 @@
              </template>
            </avue-form>
          </el-col>
          <el-col :span="1">

          </el-col>
          <el-col :span="12">
            <OpenLayersMap ref="olMap" :mapLocation="mapLocation"></OpenLayersMap>
          </el-col>