SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：病害筛查弹窗修改逻辑，道路线道路段修改，地图更换

Browse Source
This commit is contained in:
SunTao
2024-11-22 15:14:32 +08:00
parent 151f95b06c
commit f27c2f7544
9 changed files with 612 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/map/fssm-map.vue
+218 -22
View File
@@ -11,9 +11,14 @@
<div class="map-container">
<div ref="container" :id="`map-${mapId}`"></div>
<div ref="mapController" :style="controlStyle" class="control-container">
<!-- 绘制线段 -->
<div class="draw-line" v-if="showLine">
<i class="el-icon-edit" @click="drawLineMap()"></i>
<i class="el-icon-delete" @click="deleteLinedraw()"></i>
</div>
<!-- 绘制图形 -->
<div class="draw-map" v-if="showDraw">
<i class="el-icon-edit" @click="drawMap()"></i>
<i class="el-icon-edit-outline" @click="drawMap()"></i>
<i class="el-icon-delete" @click="deletedraw()"></i>
</div>
<!-- 切换底图控件 -->
@@ -55,7 +60,7 @@ import {
defaults as defaultInteractions,
} from "ol/interaction";
import * as styleExports from "ol/style";
import { Polygon } from "ol/geom";
import { Polygon, LineString } from "ol/geom";
export default {
name: "FssmMap",
@@ -72,11 +77,16 @@ export default {
type: String,
default: "10",
},
// 是否显示绘图功能
// 是否显示绘制多边形功能
showDraw: {
type: Boolean,
default: false,
},
// 是否显示绘制线段功能
showLine: {
type: Boolean,
default: false,
},
// 是否显示地图放大缩小
showZoom: {
type: Boolean,
@@ -106,6 +116,11 @@ export default {
type: Array,
default: () => [],
},
// 接收传过来的绘制线段数组
editCoordinatesLine:{
type: Array,
default: () => [],
},
// 接收传过来的底图类型
baseMap: {
type: String,
@@ -120,14 +135,26 @@ export default {
mapType: "cva_c",
// 地图图层
mapLayers: [],
// 绘制图层
// 绘制多边形图层
draw: null,
// 绘制线段图层
drawLine: null,
// 绘制图层源
source: new VectorSource(),
// 绘制图形保存的点位
drawMarkers: [],
// 绘制线段图层源
sourceLine: new VectorSource(),
// 当前地图层级
sendZoom: "",
// 当前选中得图层
selectSingClick: null,
// 绘制图形保存的点位
drawMarkers: [],
// 绘制多边形图层layer
drawLayer: null,
// 绘制线段保存的点位
drawLineMarkers: [],
// 绘制线段图层layer
drawLineLayer: null,
};
},
watch: {
@@ -140,22 +167,87 @@ export default {
});
this.drawMarkers = aa;
const map = this.instance.get("map");
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.source,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.source });
map.addInteraction(modify);
// 增加绘图层
const drawLayer = new VectorLayer({
this.drawLayer = new VectorLayer({
source: this.source,
id: "draw",
style: new styleExports.Style({
stroke: new styleExports.Stroke({
color: "blue",
size: 2,
}),
}),
});
const feature = new Feature({
geometry: new Polygon([aa]),
});
drawLayer.getSource().addFeature(feature);
map.addLayer(drawLayer);
this.drawLayer.getSource().addFeature(feature);
map.addLayer(this.drawLayer);
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawMarkers = feature.getGeometry().getCoordinates().flat();
this.$emit("endEoordinate", this.drawMarkers);
});
});
});
},
deep: true,
immediate: true,
},
/* 监听传过来的绘制线段坐标 */
editCoordinatesLine: {
handler(val) {
this.$nextTick(() => {
const aa = val.map((item) => {
return [item[0] * 1, item[1] * 1];
});
this.drawLineMarkers = aa;
const map = this.instance.get("map");
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.sourceLine,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.sourceLine });
map.addInteraction(modify);
// 增加绘图层
this.drawLineLayer = new VectorLayer({
source: this.sourceLine,
id: "drawLine",
style: new styleExports.Style({
stroke: new styleExports.Stroke({
color: "red",
size: 4,
}),
}),
});
const feature = new Feature({
geometry: new LineString(aa),
});
this.drawLineLayer.getSource().addFeature(feature);
map.addLayer(this.drawLineLayer);
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawLineMarkers = feature.getGeometry().getCoordinates();
this.$emit("endEoordinateLine", this.drawLineMarkers);
});
});
});
},
immediate: true,
deep: true,
},
/* 监听传过来的底图类型 */
baseMap: {
handler(val) {
@@ -313,7 +405,7 @@ export default {
this.instance.set("map", map);
this.instance.set("overlay-list", []);
},
/**
* @description: 删除图层选择对象
* @return {*}
@@ -323,18 +415,18 @@ export default {
},
/**
* @description: 绘制地图
* @description: 绘制多边形地图
* @return {*}
*/
drawMap() {
if (this.drawMarkers.length < 1) {
const map = this.instance.get("map");
// 增加绘图层
const drawLayer = new VectorLayer({
this.drawLayer = new VectorLayer({
source: this.source,
id: "draw",
});
map.addLayer(drawLayer);
map.addLayer(this.drawLayer);
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.source,
@@ -367,6 +459,8 @@ export default {
this.drawend(e);
});
modify.on("modifyend", (e) => {
console.log(11111111);
e.features.forEach((feature) => {
this.drawMarkers = feature.getGeometry().getCoordinates().flat();
this.$emit("endEoordinate", this.drawMarkers);
@@ -376,7 +470,7 @@ export default {
},
/**
* @description: 监听绘制完成的事件
* @description: 监听绘制多边形完成的事件
* @param {*} event
* @return {*}
*/
@@ -389,9 +483,10 @@ export default {
// 在 drawend 结束后检查是否有交叉的线段
if (coordinates.length > 3 && this.isSelfCrossing(coordinates)) {
this.$modal.msgWarning("线段交叉，请重新绘制");
this.deletedraw();
this.drawMap();
// map.removeInteraction(this.draw);
this.$nextTick(() => {
this.deletedraw();
this.drawMap();
});
} else {
const map = this.instance.get("map");
map.removeInteraction(this.draw);
@@ -399,6 +494,75 @@ export default {
this.$emit("endEoordinate", this.drawMarkers);
},
/**
* @description: 绘制线段地图
* @return {*}
*/
drawLineMap() {
if (this.drawLineMarkers.length < 1) {
const map = this.instance.get("map");
// 增加绘图层
this.drawLineLayer = new VectorLayer({
source: this.sourceLine,
id: "drawLine",
});
map.addLayer(this.drawLineLayer);
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.sourceLine,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.sourceLine });
map.addInteraction(modify);
this.drawLine = new Draw({
source: this.sourceLine,
type: "LineString",
style: new styleExports.Style({
image: new styleExports.Circle({
radius: 5,
fill: new styleExports.Fill({
color: "blue",
}),
}),
stroke: new styleExports.Stroke({
color: "blue",
width: 2,
}),
fill: new styleExports.Fill({
color: "rgba(0, 0, 255, 0.2)",
}),
}),
});
map.addInteraction(this.drawLine);
this.drawLine.on("drawend", (e) => {
this.drawLineend(e);
});
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawLineMarkers = feature.getGeometry().getCoordinates();
this.$emit("endEoordinateLine", this.drawLineMarkers);
});
});
}
},
/**
* @description: 监听绘制线段完成的事件
* @param {*} e
* @return {*}
*/
drawLineend(e) {
const feature = e.feature;
const geometry = feature.getGeometry();
// 获取区域点位
const coordinates = geometry.getCoordinates();
this.drawLineMarkers = coordinates;
this.$emit("endEoordinateLine", this.drawLineMarkers);
const map = this.instance.get("map");
map.removeInteraction(this.drawLine);
},
/**
* @description: 检测交叉点位方法
* @param {*} coordinates
@@ -453,22 +617,35 @@ export default {
},
/**
* @description: 删除绘制功能
* @description: 删除绘制多边形功能
* @return {*}
*/
deletedraw() {
const map = this.instance.get("map");
map.removeInteraction(this.draw);
const [layer] = map.getAllLayers().filter((item) => {
return item.get("id") === "draw";
});
map.removeLayer(layer);
this.drawLayer.getSource().clear();
map.removeLayer(this.drawLayer);
this.draw = null;
this.source = new VectorSource();
this.drawMarkers = [];
this.$emit("endEoordinate", []);
},
/**
* @description: 删除绘制线段功能
* @return {*}
*/
deleteLinedraw(){
const map = this.instance.get("map");
map.removeInteraction(this.drawLine);
this.drawLineLayer.getSource().clear();
map.removeLayer(this.drawLineLayer);
this.drawLine = null;
this.source = new VectorSource();
this.drawLineMarkers = [];
this.$emit("endEoordinateLine", []);
},
/**
* @description: 修改地图底图样式
* @param {*} item
@@ -612,6 +789,25 @@ export default {
position: absolute;
// left: 1rem;
// top: 1rem;
.draw-line {
width: 1.5rem;
height: 3rem;
background-color: rgb(198, 216, 216);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
i {
cursor: pointer;
padding: 0.1rem 0;
font-size: 1.2rem;
}
.change-map-click {
background-color: rgb(240, 240, 240);
}
}
.draw-map {
width: 1.5rem;