From be457aee83b7d9d9bce31aa6652c3ab7af14091d Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 21 Sep 2022 17:53:49 +0800
Subject: [PATCH] 添加事件管理详情
---
src/components/OpenLayersMap/index.vue | 43 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 40 insertions(+), 3 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 38a3ff3..eab6596 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/src/components/OpenLayersMap/index.vue
@@ -1,8 +1,8 @@
<template>
<div>
- <div id='map' :style="{height:isTaskinfoDetail?'85vh':'40vh',width:'100%'}">
+ <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="!isTaskinfoDetail">
+ <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>
@@ -22,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'
@@ -30,7 +32,7 @@
export default {
name: 'OpenLayersMap',
- props:['routeRange','isTaskinfoDetail'],
+ props:['routeRange','isDetail',"pointLonLat"],
data() {
return {
map: null,
@@ -42,6 +44,7 @@
draw: null,
drawLayer: null,
lineVector: null,
+ pointVector:null,
coordinates: [],// 保存绘画坐标地址 [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
toData: null,// 保存数据库格式坐标地址
showTip:false,
@@ -83,8 +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() {
@@ -133,6 +144,32 @@
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/favicon.png",
+ anchor: [0.48, 0.52],
+ scale:0.5
+ }),
+ });
+ feature_Point.setStyle(style);
+ this.pointVector.getSource().addFeature(feature_Point);
+ var center = [Number(pointLonLat.lon), Number(pointLonLat.lat)];
+ var view = this.map.getView();
+ view.setZoom(16);
+ view.animate({
+ center: center,
+ duration: 5,
+ });
+ }
+ },
// 将点坐标集合转换为数据库数据
doData(val) {
let str = "LINESTRING(";
--
Gitblit v1.9.3