From 998b75f0d4aaed03001ec4246cd4f3b4b0743b7e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 23 Nov 2022 10:14:28 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/OpenLayersMap/index.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 98 insertions(+), 16 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 858dfa2..7836c22 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/src/components/OpenLayersMap/index.vue
@@ -1,14 +1,16 @@
<template>
<div>
- <div id='map' style='width: 100%; height: 400px'>
- <div style="position: absolute;right:12px;top:12px;z-index: 999999">
- <p style="margin-top: 10px">
- <Button type="primary" size="small" @click="point()">绘制点</Button>
- <Button type="primary" size="small" @click="polygon()">绘制面</Button>
- <Button type="warning" size="small" @click="clearDraw()">重置</Button>
+ <div id='map' :style="{height:isDetail?'85vh':'40vh',width:'100%'}">
+ <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
+ <p style="margin-top: 10px" v-if="!isDetail">
+ <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
+ <el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
</p>
</div>
-
+ <!--画线后的提示-->
+ <div class="mapTip" v-if="showTip" :style="{ top: tipPosition.h + 'px', left: tipPosition.w + 'px' }">
+ {{ tipTitle }}
+ </div>
</div>
</div>
</template>
@@ -20,6 +22,8 @@
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'
@@ -28,7 +32,7 @@
export default {
name: 'OpenLayersMap',
- props:['routeRange'],
+ props:['routeRange','isDetail',"pointLonLat"],
data() {
return {
map: null,
@@ -40,8 +44,15 @@
draw: null,
drawLayer: null,
lineVector: null,
+ pointVector:null,
coordinates: [],// 保存绘画坐标地址 [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
toData: null,// 保存数据库格式坐标地址
+ showTip:false,
+ tipPosition: {//提示的位置
+ w: 200,
+ h: 10,
+ },
+ tipTitle:null
}
},
methods: {
@@ -65,8 +76,8 @@
projection: 'EPSG:4326',
// 设置缩放倍数
zoom: 13,
- minZoom: 6,
- maxZoom: 20
+ minZoom: 8,
+ maxZoom: 19
})
})
_this.lineVector = new VectorLayer({
@@ -75,9 +86,16 @@
wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
}),
})
+ _this.pointVector = new VectorLayer({
+ //layer所对应的source
+ source: new VectorSource({
+ wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
+ }),
+ })
_this.map.addLayer(_this.lineVector)
-
+ _this.map.addLayer(_this.pointVector)
_this.addLineDraw(_this.routeRange)
+ _this.addPoint(_this.pointLonLat)
},
// 绘画之后的样式
styleFunction() {
@@ -126,6 +144,33 @@
this.lineVector.getSource().addFeature(feature_LineString);
}
},
+ // 添加点
+ addPoint(pointLonLat){
+ if (pointLonLat){
+ //设置点
+ let feature_Point = new Feature({
+ geometry: new Point([Number(pointLonLat.lon), Number(pointLonLat.lat)])
+ })
+ //点样式
+ let style = new Style({
+ image: new Icon({
+ src: "/img/dwicon.jpeg",
+ anchor: [0.48, 0.52],
+ // imgSize: [250,320],
+ scale: 0.2
+ }),
+ });
+ feature_Point.setStyle(style);
+ this.pointVector.getSource().addFeature(feature_Point);
+ let center = [Number(pointLonLat.lon), Number(pointLonLat.lat)];
+ let view = this.map.getView();
+ view.setZoom(16);
+ view.animate({
+ center: center,
+ duration: 5,
+ });
+ }
+ },
// 将点坐标集合转换为数据库数据
doData(val) {
let str = "LINESTRING(";
@@ -145,6 +190,19 @@
_this.coordinates = []
_this.map.removeInteraction(_this.draw)
_this.lineVector.getSource().clear()
+ //提示
+ if(!_this.showTip){
+ _this.showTip = true
+ }
+ _this.tipTitle = "单击左键或者右键开始绘画"
+ //提示器
+ $("#map").off("mousemove").mousemove(function (e) {
+ _this.setTipPosition(e.offsetX, e.offsetY, 5, 5);
+ })
+ $("#map").off("mousedown").mousedown(function () {
+ _this.tipTitle = "可继续，或选择最终位置双击结束绘画"
+ })
+
_this.draw = new Draw({
source: _this.lineVector.getSource(),
type: 'LineString',
@@ -156,7 +214,6 @@
}),
})
_this.map.addInteraction(_this.draw)
-
// 点击事件
_this.map.on('click', function (e) {
// 将点坐标保存集合
@@ -164,12 +221,16 @@
})
// 结束事件
_this.draw.on('drawend', function () {
+
_this.map.removeInteraction(_this.draw);
_this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
// 将点坐标集合转换为数据库数据
let toData = _this.doData(_this.coordinates)
// 传值给父组件
_this.$emit('toData',toData)
+ //隐藏提示
+ _this.tipTitle = null;
+ _this.showTip = false
})
},
// 设置统一控制点击事件，需要画图方式在此处切换
@@ -227,7 +288,7 @@
vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
this.map.addLayer(vectorLayer) // 将图层添至地图对象
},
- //画多边形
+ // 画多边形
drawPolygon(point) {
this.polygonPoints.push(point)
let feature = new Feature({
@@ -295,7 +356,15 @@
this.map.addLayer(clusters)
},
-
+ // 重置图层
+ clearDraw(){
+ let _this = this
+ _this.coordinates = []
+ _this.map.removeInteraction(_this.draw)
+ _this.lineVector.getSource().clear()
+ _this.showTip = false
+ _this.tipTitle = null
+ },
// 获取新的 layer 图层对象
getLayer() {
return new VectorLayer({
@@ -316,7 +385,13 @@
// return style
// }
})
- }
+ },
+ // 设置提示位置
+ setTipPosition(x, y, n, m) {
+ let _this = this
+ _this.tipPosition.w = x + n;
+ _this.tipPosition.h = y + m;
+ },
},
mounted() {
this.createMap()
@@ -326,5 +401,12 @@
</script>
<style>
-
+.mapTip {
+ background-color: rgb(168, 168, 168);
+ padding: 5px;
+ border: 1px solid #000;
+ position: absolute;
+ z-index: 10 !important;
+ border-radius: 5px;
+}
</style>
--
Gitblit v1.9.3