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 | 127 +++++++++++++++++++++++++++++++++++------
1 files changed, 107 insertions(+), 20 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 9c0ba8e..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"></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()
--
Gitblit v1.9.3