添加本地矢量地图服务，初始化视角切换

suerprisePlus

2024-08-21 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468

 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,16 +101,38 @@
                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) {
                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],
@@ -102,6 +140,45 @@
                }
                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;