From 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 21 八月 2024 11:23:06 +0800
Subject: [PATCH] 添加本地矢量地图服务，初始化视角切换
---
src/components/mapOl/index.vue | 113 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 95 insertions(+), 18 deletions(-)
diff --git a/src/components/mapOl/index.vue b/src/components/mapOl/index.vue
index 6537e15..a510f9e 100644
--- a/src/components/mapOl/index.vue
+++ b/src/components/mapOl/index.vue
@@ -8,7 +8,7 @@
<el-form-item label="绾害:">
{{ formInline.lat }}
</el-form-item>
- <el-form-item>
+ <el-form-item v-show="isShow">
<el-button type="success" icon="el-icon-plus" @click="drowPoint"></el-button>
<el-button type="danger" icon="el-icon-delete" @click="clearDrawPoint"></el-button>
</el-form-item>
@@ -34,6 +34,7 @@
import mapData from '@/assets/js/mapSdk/mapData.js';
import mapConfig from '../../assets/js/mapSdk/mapConfig';
import * as turf from '@turf/turf'
+import LineString from 'ol/geom/LineString';
export default {
props: {
parentData: {
@@ -44,6 +45,7 @@
},
data() {
return {
+ isShow: true,
mapol: null,
drawLayer: null,
formInline: {
@@ -59,17 +61,31 @@
initOlMap() {
const baseLayer = mapData.baseLayer;
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
- var vectorLayer = new TileLayer({
- source: new XYZ({
- url: vecUrl + config.tdToken,
+ const geo= config.geoServer;
+ // var vectorLayer = new TileLayer({
+ // source: new XYZ({
+ // url: vecUrl + config.tdToken,
+ // }),
+ // });
+ // const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
+ // var vectorLayer1 = new TileLayer({
+ // source: new XYZ({
+ // url: cvaUrl + config.tdToken,
+ // }),
+ // });
+ var layer2 = new Image({
+ name: "Wms_Layer",
+ source: new ImageWMS({
+ crossOrigin: "anonymous",
+ url: geo.url + geo.wms,
+ params: {
+ FORMAT: "image/png",
+ VERSION: "1.1.1",
+ LAYERS: geo.layers[0],
+ },
}),
});
- const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
- var vectorLayer1 = new TileLayer({
- source: new XYZ({
- url: cvaUrl + config.tdToken,
- }),
- });
+ this.mapol.addLayer(layer2);
this.mapol = new Map({
target: 'mapView',
layers: [vectorLayer, vectorLayer1],
@@ -85,23 +101,84 @@
name: "Wms_Layer",
source: new ImageWMS({
crossOrigin: "anonymous",
- url: config.geoServer.url + config.geoServer.wms,
+ url: geo.url + geo.wms,
params: {
FORMAT: "image/png",
VERSION: "1.1.1",
- LAYERS: 'sxpw:sxdwx',
+ LAYERS: geo.layers[1],
},
}),
});
this.mapol.addLayer(layer2);
if (this.parentData) {
- const obj = mapConfig.getWKTParse(this.parentData)
- this.formInline = {
- lon: obj.coordinates[0],
- lat: obj.coordinates[1],
+ if (this.parentData.indexOf('type') > -1) {
+ const data = JSON.parse(this.parentData)[0];
+ this.isShow = data.isShow
+ if (data.type == 'point') {
+ const obj = mapConfig.getWKTParse(data.val.point)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
+ } else if (data.type == 'line') {
+ const obj = mapConfig.getWKTParse(data.val.f_location)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
+ const line = mapConfig.getWKTParse(data.val.re_position)
+ this.addLineData(line)
+ }
+
+ } else {
+ const obj = mapConfig.getWKTParse(this.parentData)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
}
- this.addPointData(obj);
+
+
}
+ },
+ addLineData(res) {
+ var coord = res.coordinates;
+ var geom = [];
+ coord.filter(i => {
+ geom.push(transform(
+ i,
+ 'EPSG:4326',
+ 'EPSG:3857'
+ ))
+ })
+ var feature = new Feature({
+ type: 'LineString',
+ geometry: new LineString(geom),
+ });
+ feature.setStyle(
+ new Style({
+ stroke: new Stroke({
+ color: 'blue',
+ width: 3,
+ }),
+
+ })
+ );
+ const extent = feature.getGeometry().getExtent()
+ var source = new VectorSource();
+ source.addFeature(feature);
+ // 鍒涘缓绾跨殑鐭㈤噺鍥惧眰
+ var vectorLayer = new VectorLayer();
+ vectorLayer.setSource(source);
+ this.mapol.addLayer(vectorLayer);
+ this.mapol.getView().fit(extent, {
+ size: this.mapol.getSize(),
+ padding: [100, 100,200,100], // 鍥涗釜鏂瑰悜鐨勮竟璺濓紝鍙��
+ constrainResolution: false, // 鏄惁闄愬埗鍒嗚鲸鐜囷紝鍙��
+ });
},
addPointData(res) {
const coord = res.coordinates;
@@ -162,7 +239,7 @@
this.formInline.lon = parseFloat(a1[0]).toFixed(6);
this.formInline.lat = parseFloat(a1[1]).toFixed(6);
var point = turf.point([this.formInline.lon, this.formInline.lat]);
- const gPoint= mapConfig.getWKTConvert(point.geometry)
+ const gPoint = mapConfig.getWKTConvert(point.geometry)
this.$emit('childData', gPoint);
this.mapol.removeInteraction(this.draw);
});
--
Gitblit v1.9.3