From 872545b9a21ec9af8060bc9b83091ed316e1876e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 07 Mar 2023 09:58:23 +0800
Subject: [PATCH] 火灾管理添加地图定位
---
src/components/OpenLayersMap/index.vue | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 100 insertions(+), 11 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 9c0ba8e..e4b2427 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/src/components/OpenLayersMap/index.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div id='map' style="width: 100%;height: 83vh"></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 style="margin: 10px;width: 190px">
<el-form ref="form" :model="searchForm" label-width="80px" label-position="top" size="small" @submit.native.prevent>
@@ -18,6 +18,9 @@
</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>
</div>
</template>
@@ -25,35 +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 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,// 保存数据库格式坐标地址,
+ toData: null,// 保存数据库格式坐标地址
searchForm:{},
searchData:[],
region:[],
@@ -72,10 +71,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 +83,27 @@
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)
+ }
+
},
//调用高德地图提供的地点搜索
search(keyWord,cb){
@@ -119,6 +139,9 @@
//搜索框选择
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) {
@@ -129,7 +152,73 @@
const view = this.map.getView()
view.setCenter([lon, lat]);
view.setZoom(20);
- }
+ },
+ //绘制点
+ 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)
+ })
+
+ },
+ //创建点
+ 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)
+ let center = [Number(pointLonLat[0]), Number(pointLonLat[1])]
+ let view = this.map.getView()
+ view.setZoom(14)
+ view.animate({
+ center: center,
+ duration: 5,
+ })
+ }
+ },
+ clearDraw() {
+ let _this = this
+ _this.coordinates = []
+ _this.map.removeInteraction(_this.draw)
+ _this.pointVector.getSource().clear()
+ },
},
mounted() {
this.createMap()
--
Gitblit v1.9.3