配网大屏功能优化

suerprisePlus

2024-10-14 f521ebc2551d468c4c478783a18d4b0714394d61

 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,6 +61,7 @@
        initOlMap() {
            const baseLayer = mapData.baseLayer;
            const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
            const geo= config.geoServer;
            var vectorLayer = new TileLayer({
                source: new XYZ({
                    url: vecUrl + config.tdToken,
@@ -70,6 +73,19 @@
                    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],
            //         },
            //     }),
            // });
            // this.mapol.addLayer(layer2);
            this.mapol = new Map({
                target: 'mapView',
                layers: [vectorLayer, vectorLayer1],
@@ -80,28 +96,89 @@
                }),
            });


console.log(geo.url + geo.wms)
            var layer2 = new Image({
                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);
            });