From 9ecc792eb82c7a94f35ea7f2056567202c6efbff Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 13 Mar 2023 11:00:19 +0800
Subject: [PATCH] 地图选点方式改变，点击按钮后根据所选行政区跳转
---
src/components/OpenLayersMap/index.vue | 86 +++++++++++++++++++++----------------------
1 files changed, 42 insertions(+), 44 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 77a840e..03ad4d2 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/src/components/OpenLayersMap/index.vue
@@ -1,7 +1,7 @@
<template>
<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 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,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="setCenterByDistrict()"></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,11 @@
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()
}
},
@@ -133,8 +135,9 @@
});
},
//获取从父组件传递的行政区code
- getLocation(data){
- this.region = data
+ getLocation(regionCode,regionName){
+ this.region = regionCode
+ this.regionName = regionName
},
//搜索框选择
handleSelect(item) {
@@ -147,42 +150,44 @@
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.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 +209,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() {
--
Gitblit v1.9.3