地图选点方式改变，点击按钮后根据所选行政区跳转

guoshilong

2023-03-13 9ecc792eb82c7a94f35ea7f2056567202c6efbff

 src/components/OpenLayersMap/index.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <div id='map' style="width: 100%;height: 83vh"></div>
    <div style="position: absolute;right:1%;top:2%;z-index: 999999;background-color: white;width: 210px">
    <div id='map' style="width: 100%;height: 83vh" @contextmenu.prevent=""></div>
    <div v-if="!mapLocation.isDetail" 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>
          <el-form-item label="请输入关键字：">
@@ -18,6 +18,9 @@
        </el-form>
      </div>
    </div>
    <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="setCenterByDistrict()"></el-button>
    </div>
  </div>
</template>

@@ -25,38 +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 {Style} from 'ol/style'
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,// 保存数据库格式坐标地址,
      coordinates: [],
      searchForm:{},
      searchData:[],
      region:[],
      regionName:[],
    }
  },
  methods: {
@@ -72,10 +68,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 +80,32 @@
          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)
        if (this.mapLocation.location[0]&&this.mapLocation.location[1]){
          this.setCenter(this.mapLocation.location[0],this.mapLocation.location[1])
        }
      }else {
        this.createPoint()
      }

    },
    //调用高德地图提供的地点搜索
    search(keyWord,cb){
@@ -113,23 +135,88 @@
      });
    },
    //获取从父组件传递的行政区code
    getLocation(data){
      this.region = data
    getLocation(regionCode,regionName){
      this.region = regionCode
      this.regionName = regionName
    },
    //搜索框选择
    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) {
      this.search(queryString,cb)
    },
    //设置中心点
    //根据经纬度设置中心点
    setCenter(lon,lat){
      const view = this.map.getView()
      view.setCenter([lon, lat]);
      view.setZoom(20);
    }
    },
    //根据区域名设置中心点
    setCenterByDistrict(){
      const that = this
      let regionName = this.regionName
      if (regionName.length ==0){
        this.$message.warning("请先选择行政区");
        return
      }
      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.map.on('click', function (e) {
        _this.clearDraw()
        _this.addPoint(e.coordinate)
        _this.$emit("getMapData", e.coordinate)
      })
    },
    //创建点
    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)
      }
    },
    clearDraw() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.pointVector.getSource().clear()
    },
  },
  mounted() {
    this.createMap()