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

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() {