guanqb
2023-02-09 d2edd0ae8fb8b6eb5edc1afef838cd2a1e527301
src/components/map/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-08 16:49:29
 * @LastEditTime: 2023-02-09 14:52:36
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -15,38 +15,20 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div
            style="display: none !important;"
            class="image-switch-icon-btn"
            title="切换影像"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
            <div class="icon-box">
                <img src="/img/base_map.png" alt />
            </div>
            <div
                class="image-switch-img-btn"
                v-show="showImgBtn"
                @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false"
            >
            <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false">
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
                </div>
@@ -82,6 +64,31 @@
}
let flootEntitysEntites = null
const ysLabels = [
    'EPSG:4490_test:0',
    'EPSG:4490_test:1',
    'EPSG:4490_test:2',
    'EPSG:4490_test:3',
    'EPSG:4490_test:4',
    'EPSG:4490_test:5',
    'EPSG:4490_test:6',
    'EPSG:4490_test:7',
    'EPSG:4490_test:8',
    'EPSG:4490_test:9',
    'EPSG:4490_test:10',
    'EPSG:4490_test:11',
    'EPSG:4490_test:12',
    'EPSG:4490_test:13',
    'EPSG:4490_test:14',
    'EPSG:4490_test:15',
    'EPSG:4490_test:16',
    'EPSG:4490_test:17',
    'EPSG:4490_test:18',
    'EPSG:4490_test:20',
    'EPSG:4490_test:21',
    'EPSG:4490_test:22',
]
import mapPopup from './components/mapPopup.vue'
@@ -190,7 +197,10 @@
            // })
            // global.viewer.addTerrain(terrain)
            // 天地图 影像
            // 内网
            that.switchImg()
            // 外网
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
@@ -198,43 +208,6 @@
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            // 上饶部署,内网使用的
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
            //         layer: "wmts_4326_361100",
            //         style: "default",
            //         format: "image/png",
            //         tileMatrixSetID: "c",
            //         tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
            //         tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //     })
            // )
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts/{z}/{y}/{x}.png',
            //     })
            // )
            // 影像图层
            // const ysWmts = global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
            //         layer: "test",
            //         style: "",
            //         format: "image/png",
            //         tileMatrixSetID: gridsetName,
            //         tileMatrixLabels: gridNames.map(item => {
            //             let arr = item.split(':')
            //             arr[2] = arr[2] - 1
            //             return arr.join(':')
            //         }),
            //         // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //     })
            // )
@@ -257,8 +230,10 @@
            let sqTitleLayer = new global.DC.TilesetLayer('sqTitleLayer')
            global.viewer.addLayer(sqTitleLayer)
            let sqTileset = new global.DC.Tileset(
                // 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
                // 内网
                'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                // 外网
                // 'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
            )
            sqTileset.setHeight(-72)
@@ -302,9 +277,6 @@
            //         material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
            //     }
            // })
            // console.log(floorPositions)
@@ -468,32 +440,42 @@
        switchImg () {
            // 天地图 影像
            this.imgtype = 0
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
                    layer: "test",
                    style: "",
                    format: "image/png",
                    tileMatrixSetID: "EPSG:4490_test",
                    tileMatrixLabels: ysLabels,
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                })
            )
            baseLayers.contrast = 0.8
            this.showImgBtn = false
        },
        switchElec () {
            // 天地图 矢量
            this.imgtype = 1
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    layer: "wmts_4326_361100",
                    style: "default",
                    format: "image/png",
                    tileMatrixSetID: "c",
                    tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                })
            )
            baseLayers.contrast = 1.0
            this.showImgBtn = false
        },