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

suerprisePlus

2024-08-21 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468

 src/assets/js/mapSdk/mapServe.js

@@ -1,6 +1,7 @@
import mapConfig from './mapConfig';
import { zhangzitou_selectAll } from '@/api/mapView/map.js';
import WKT from 'terraformer-wkt-parser';
import store from '@/store';
// 服务加载
const mapServer = {
    serveType: null,
@@ -33,31 +34,16 @@
            const pois = response.data.result.pois;
            const cnName = res.cnName + '_' + res.id;
            const modelLayer = new Cesium.PrimitiveCollection();
           modelLayer.name = cnName;
            modelLayer.name = cnName;
            Viewer.scene.primitives.add(modelLayer);
            pois.map((item) => {
                var geom = WKT.parse(item.geom);
                var style = {
                    longitude: geom.coordinates[0],
                    latitude: geom.coordinates[1],
                    altitude: 0,
                    heading: 0,
                    pitch: 0,
                    roll: 0,
                };
                const modelMatrix = mapConfig.getModelMatrix(style);
                const url =  '/glb/' + item.type + '.glb';
                modelLayer.add(
                    Cesium.Model.fromGltf({
                        id: item.id,
                        url: url,
                        scale: 1,
                        minimumPixelSize: 20,
                        maximumScale: 20,
                        modelMatrix: modelMatrix,
                        primitive: item,
                    })
                );
                var geom = WKT.parse(item.geom).coordinates;
                const terrain = config.terrain;
                if (terrain.isShow && terrain.isUrl) {
                    this.addTerrainGLB(item, geom, modelLayer);
                } else {
                    this.addGLB(item, geom, modelLayer);
                }
            });
            this.layerList.push({
                id: res.id,
@@ -66,6 +52,57 @@
                serveType: this.serveType,
            });
        });
    },
    addTerrainGLB(item, geom, modelLayer) {
        var positions = [Cesium.Cartographic.fromDegrees(geom[0], geom[1])];
        var promise = Cesium.sampleTerrainMostDetailed(Viewer.terrainProvider, positions);
        promise.then((updatedPositions) => {
            var terrainHeight = updatedPositions[0].height;
            var style = {
                longitude: geom[0],
                latitude: geom[1],
                altitude: terrainHeight,
                heading: 0,
                pitch: 0,
                roll: 0,
            };
            const modelMatrix = mapConfig.getModelMatrix(style);
            const url = '/glb/' + item.type + '.glb';
            modelLayer.add(
                Cesium.Model.fromGltf({
                    id: item,
                    url: url,
                    scale: 1,
                    minimumPixelSize: 20,
                    maximumScale: 20,
                    modelMatrix: modelMatrix,
                    primitive: item,
                })
            );
        });
    },
    addGLB(item, geom, modelLayer) {
        var style = {
            longitude: geom[0],
            latitude: geom[1],
            altitude: 0,
            heading: 0,
            pitch: 0,
            roll: 0,
        };
        const modelMatrix = mapConfig.getModelMatrix(style);
        const url = '/glb/' + item.type + '.glb';
        modelLayer.add(
            Cesium.Model.fromGltf({
                id: item,
                url: url,
                scale: 1,
                minimumPixelSize: 20,
                maximumScale: 20,
                modelMatrix: modelMatrix,
                primitive: item,
            })
        );
    },

    addTdLayer(res) {
@@ -135,7 +172,9 @@
        });
        const cnName = res.cnName + '_' + res.id;
        model.item.readyPromise.then((item) => {
            mapConfig.userSceneFlyTo(item);
            if (res.id != 'baseModel') {
                mapConfig.userSceneFlyTo(item);
            }
            this.layerList.push({
                id: res.id,
                name: cnName,
@@ -144,7 +183,6 @@
            });
        });
    },
    setTilesetArgs() {},
    removeLayer(res) {
        const cnName = res.cnName + '_' + res.id;
        this.layerList.map((item, index) => {
@@ -155,15 +193,53 @@
                } else if (item.serveType == 'Tileset') {
                    item.layer.deleteObject();
                    this.layerList.splice(index, 1);
                }else if (item.serveType == 'WFS') {
                    Viewer.scene.primitives.remove(item.layer)
                } else if (item.serveType == 'WFS') {
                    Viewer.scene.primitives.remove(item.layer);
                    this.layerList.splice(index, 1);
                }
            }
        });
    },
    async getFeatureInfo(res) {
        console.log(res);
    async getFeatureInfo(html) {
        var start = html.indexOf('<caption class="featureInfo">') + '<caption class="featureInfo">'.length;
        var end = html.indexOf('</caption>');
        var tab = html.substr(start, end - start);
        var std = html
            .substr(html.indexOf('<th>'), html.lastIndexOf('</th>') - html.indexOf('<th>') + 5)
            .replaceAll(' ', '')
            .replaceAll('\n', '')
            .split('</th>');
        var str = html
            .substr(html.indexOf('<td>'), html.lastIndexOf('</td>') - html.indexOf('<td>') + 5)
            .replaceAll(' ', '')
            .replaceAll('\n', '')
            .split('</td>');
        var arr = [];
        for (var i in std) {
            var name, val;
            name = std[i];
            val = str[i];
            if (name == '') {
                continue;
            }
            if (name.indexOf('<th>') > -1) {
                name = name.replaceAll('<th>', '');
            }
            if (val.indexOf('<td>') > -1) {
                val = val.replaceAll('<td>', '');
            }
            if (name != '>') {
                arr.push({
                    name: name,
                    val: val,
                });
            }
        }
        store.dispatch('mapLayers/changeMapInfo', []);
        if (arr.length > 0) {
            // this.$store.geet.mapInfo = arr;
            store.dispatch('mapLayers/changeMapInfo', arr);
        }
    },
};
export default mapServer;