From 2e41623f7fd7fd4f01b08cda81012edc9c573d91 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 28 Feb 2023 14:18:49 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-web
---
src/components/map/mapBox.vue | 171 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 98 insertions(+), 73 deletions(-)
diff --git a/src/components/map/mapBox.vue b/src/components/map/mapBox.vue
index 872acff..67a5ce4 100644
--- a/src/components/map/mapBox.vue
+++ b/src/components/map/mapBox.vue
@@ -1,10 +1,10 @@
<template>
<div>
- <div id='map' :style="{height:isDetail?'90vh':'40vh',width:'100%'}">
+ <div id='map' :style="{ height: isDetail ? '90vh' : '40vh', width: '100%' }" ref="MapContent">
<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 size="small" @click="clearDraw()">重置</el-button>
+ <el-button type="primary" size="small" @click="point()">绘制区域</el-button>
+ <el-button size="small" @click="clearDraw()">重置</el-button>
</p>
</div>
<!--画线后的提示-->
@@ -21,18 +21,18 @@
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 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 XYZ from "ol/source/XYZ"
import 'ol/ol.css'
export default {
name: 'mapBox',
- props:['routeRange','isDetail'],
+ props: ['routeRange', 'isDetail', "searchMap"],
data() {
return {
map: null,
@@ -44,15 +44,16 @@
draw: null,
drawLayer: null,
lineVector: null,
- pointVector:null,
+ pointVector: null,
+ polygonVector: null,
coordinates: [],// 保存绘画坐标地址 [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
toData: null,// 保存数据库格式坐标地址
- showTip:false,
+ showTip: false,
tipPosition: {//提示的位置
w: 200,
h: 10,
},
- tipTitle:null
+ tipTitle: null
}
},
methods: {
@@ -72,7 +73,7 @@
],
view: new View({
// 设置中心点，默认南昌，用于规划南昌市的路线
- center: [115.9032747077233, 28.67433116990186],
+ center: [117.951478782, 28.447896798],
projection: 'EPSG:4326',
// 设置缩放倍数
zoom: 13,
@@ -80,6 +81,7 @@
maxZoom: 19
})
})
+
_this.lineVector = new VectorLayer({
//layer所对应的source
source: new VectorSource({
@@ -92,8 +94,15 @@
wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
}),
})
+ _this.polygonVector = new VectorLayer({
+ //layer所对应的source
+ source: new VectorSource({
+ wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
+ }),
+ })
_this.map.addLayer(_this.lineVector)
_this.map.addLayer(_this.pointVector)
+ _this.map.addLayer(_this.polygonVector)
//在地图上回显线或点
_this.startAdd(_this.routeRange)
},
@@ -116,41 +125,41 @@
// toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
if (toData) {
// 将数据库点坐标数据转换
- let entityData = "";
- let entityArr = [];
- entityData = toData.match(/\(([^)]*)\)/);
+ let entityData = ""
+ let entityArr = []
+ entityData = toData.match(/\(([^)]*)\)/)
if (entityData && entityData != "") {
- entityData = entityData[1].split(",");
+ entityData = entityData[1].split(",")
for (let j = 0; j < entityData.length; j++) {
entityArr.push([
Number(entityData[j].split(" ")[0]),
Number(entityData[j].split(" ")[1]),
- ]);
+ ])
}
}
// let lineCoords = [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717],[115.90696542732779, 28.73408542233564],[115.90696542732779, 28.73408542233564]]
let lineCoords = entityArr
- let view = this.map.getView();
+ let view = this.map.getView()
view.setCenter([
lineCoords[Math.ceil(lineCoords.length / 2)][0],
lineCoords[Math.ceil(lineCoords.length / 2)][1],
- ]);
- view.setZoom(14.5);
+ ])
+ view.setZoom(14.5)
let feature_LineString = new Feature({
geometry: new LineString(lineCoords),
- });
- feature_LineString.setStyle(this.styleFunction());// 设置样式
- this.lineVector.getSource().addFeature(feature_LineString);
+ })
+ feature_LineString.setStyle(this.styleFunction())// 设置样式
+ this.lineVector.getSource().addFeature(feature_LineString)
}
},
// 添加点
- addPoint(pointLonLat){
+ addPoint(pointLonLat) {
// pointLonLat = POINT(115.87531914674 28.8603307485585)
- if (pointLonLat){
+ if (pointLonLat) {
let pointData = ""
let pointArray = []
- pointData = pointLonLat.match(/\(([^)]*)\)/);
+ pointData = pointLonLat.match(/\(([^)]*)\)/)
pointArray = pointData[1].split(" ")
//设置点
let feature_Point = new Feature({
@@ -164,53 +173,63 @@
// imgSize: [250,320],
scale: 0.2
}),
- });
- feature_Point.setStyle(style);
- this.pointVector.getSource().addFeature(feature_Point);
- let center = [Number(pointArray[0]), Number(pointArray[1])];
- let view = this.map.getView();
- view.setZoom(16);
+ })
+ feature_Point.setStyle(style)
+ this.pointVector.getSource().addFeature(feature_Point)
+ let center = [Number(pointArray[0]), Number(pointArray[1])]
+ let view = this.map.getView()
+ view.setZoom(16)
view.animate({
center: center,
duration: 5,
- });
+ })
}
},
// 将点坐标集合转换为数据库数据
doData(val) {
- let str = "LINESTRING(";
+ let str = "LINESTRING("
for (let k = 0; k < val.length; k++) {
- str += `${val[k][0]} ${val[k][1]}`;
+ str += `${val[k][0]} ${val[k][1]}`
if (k != val.length - 1) {
- str += ",";
+ str += ","
}
}
- str += ")";
+ str = str + "," + `${val[0][0]} ${val[0][1]}`
+ str += ")"
// console.log(str)
- return '\''+str+'\'';
+ return '\'' + str + '\''
},
// 开始绘制
point() {
let _this = this
_this.coordinates = []
_this.map.removeInteraction(_this.draw)
- _this.lineVector.getSource().clear()
+ _this.polygonVector.getSource().clear()
//提示
- if(!_this.showTip){
+ 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 () {
+ function mapMousemove(e) {
+ _this.setTipPosition(e.offsetX, e.offsetY, 5, 5)
+ }
+
+ this.$refs.MapContent.addEventListener('mousemove', mapMousemove)
+
+ // this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)
+
+ function mapMousedown() {
_this.tipTitle = "可继续，或选择最终位置双击结束绘画"
- })
+ }
+
+ this.$refs.MapContent.addEventListener('mousedown', mapMousedown)
+ // this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)
_this.draw = new Draw({
- source: _this.lineVector.getSource(),
- type: 'LineString',
+ source: _this.polygonVector.getSource(),
+ type: 'Polygon',
style: new Style({
stroke: new StyleStroke({
color: "red",
@@ -227,16 +246,17 @@
// 结束事件
_this.draw.on('drawend', function () {
- _this.map.removeInteraction(_this.draw);
- _this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
+ _this.map.removeInteraction(_this.draw)
+ _this.polygonVector.setStyle(_this.styleFunction())// 路线画好之后的样式
// 将点坐标集合转换为数据库数据
let toData = _this.doData(_this.coordinates)
// 传值给父组件
- _this.$emit('toData',toData)
+ _this.$emit('toData', toData)
//隐藏提示
- _this.tipTitle = null;
+ _this.tipTitle = null
_this.showTip = false
})
+
},
// 设置统一控制点击事件，需要画图方式在此处切换
handleClick(point) {
@@ -263,7 +283,7 @@
this.linePoints.push(point)
let featureLine = new Feature({
geometry: new GeomLineString(this.linePoints),
- });
+ })
// 添加线的样式
let lineStyle = new Style({
@@ -274,8 +294,8 @@
color: 'rgba(255, 0, 0)',
width: 4,
}),
- });
- featureLine.setStyle(lineStyle);
+ })
+ featureLine.setStyle(lineStyle)
let source = new VectorSource()
source.addFeature(featureLine)
@@ -299,7 +319,7 @@
let feature = new Feature({
geometry: new GeomPolygon([this.polygonPoints]),
attributes: null
- });
+ })
// 添加线的样式
let lineStyle = new Style({
fill: new StyleFill({
@@ -309,9 +329,9 @@
color: 'rgba(255, 0, 0)',
width: 4,
}),
- });
- feature.setStyle(lineStyle);
- let source = new VectorSource();
+ })
+ feature.setStyle(lineStyle)
+ let source = new VectorSource()
source.addFeature(feature)
let vectorLayer = new VectorLayer({
source: source
@@ -320,12 +340,12 @@
},
// 设置聚合点
addMarker() {
- let source = new VectorSource();
+ let source = new VectorSource()
// 随机创建200个要素，后台点位取出后按此格式处理
for (let i = 1; i <= 200; i++) {
- let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05];
- let feature = new Feature(new GeomPoint(coordinates));
- source.addFeature(feature);
+ let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05]
+ let feature = new Feature(new GeomPoint(coordinates))
+ source.addFeature(feature)
}
// 聚合
@@ -337,7 +357,7 @@
let clusters = new VectorLayer({
source: clusterSource,
style: function (feature) {
- let size = feature.get('features').length;
+ let size = feature.get('features').length
let style = new Style({
image: new StyleCircle({
radius: 20,
@@ -355,20 +375,23 @@
})
})
})
- return style;
+ return style
}
- });
+ })
this.map.addLayer(clusters)
},
// 重置图层
- clearDraw(){
+ clearDraw() {
let _this = this
_this.coordinates = []
_this.map.removeInteraction(_this.draw)
_this.lineVector.getSource().clear()
_this.showTip = false
_this.tipTitle = null
+
+ // 传值给父组件
+ _this.$emit('toData', "")
},
// 获取新的 layer 图层对象
getLayer() {
@@ -394,14 +417,16 @@
// 设置提示位置
setTipPosition(x, y, n, m) {
let _this = this
- _this.tipPosition.w = x + n;
- _this.tipPosition.h = y + m;
+ _this.tipPosition.w = x + n
+ _this.tipPosition.h = y + m
},
- startAdd(routeRange){
- if (routeRange.startsWith("LINESTRING")){
- this.addLineDraw(routeRange)
- }else {
- this.addPoint(routeRange)
+ startAdd(routeRange) {
+ if (routeRange) {
+ if (routeRange.startsWith("LINESTRING")) {
+ this.addLineDraw(routeRange)
+ } else if (routeRange.startsWith("POINT")) {
+ this.addPoint(routeRange)
+ }
}
}
},
--
Gitblit v1.9.3