底图切换组件开发完成

wangrui

2020-12-23 3eda2a49edc60f3961604223f557dcd6ab6db94f

 src/conf/MapConfig.js

@@ -5,17 +5,25 @@
let pos = curWwwPath.indexOf(pathname)
let HOST_URL = curWwwPath.substring(0, pos)

const BLUEMAP_HOST = 'http://xearth.cn:6288/' // 公司发布的地图服务，用于测试的地址

// basemap主机配置
const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080'  // 内网天地图主机地址
const TIANDITU_GIS_HOST = 'http://t0.tianditu.gov.cn' // 公网天地图主机地址
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770

// service主机配置
const APP_GIS_HOST = 'http://xearth.cn:6299/'

// 自定义主机配置
const BLUEMAP_HOST = APP_GIS_HOST // 公司发布的地图服务，用于测试的地址

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
    maxZoom: 18,
    center: [26, 104],
    zoom: 3,
    worldCopyJump: true,
    inertia: true,
    zoomControl: false,
    attributionControl: false,
    editable: true
@@ -28,6 +36,8 @@
        {
            code: 'sinopec_img',
            name: '中石化天地图影像',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -35,11 +45,12 @@
                visible: false,
                layerType: 'img_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS',
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS?'+
                'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
            annotation: {
@@ -48,17 +59,20 @@
                visible: false,
                layerType: 'cia_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS',
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS?'+
                'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
        },
        {
            code: 'sinopec_vec',
            name: '中石化天地图矢量',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
@@ -66,11 +80,12 @@
                visible: false,
                layerType: 'vec_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS',
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS?'+
                'layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
            annotation: {
@@ -79,11 +94,12 @@
                visible: false,
                layerType: 'cva_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS',
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS?'+
                'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            }
        }
@@ -92,6 +108,8 @@
        {
            code: 'tianditu_img',
            name: '天地图影像',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -105,7 +123,7 @@
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
            annotation: {
@@ -120,13 +138,15 @@
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
        },
        {
            code: 'tianditu_vec',
            name: '天地图影像',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
@@ -140,7 +160,7 @@
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            },
            annotation: {
@@ -155,7 +175,7 @@
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 0
                    zoomOffset: 1
                }
            }
        }
@@ -169,6 +189,23 @@
            isLoadMapByToken: false,
            url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
        }
    ],

    ServiceLayers:[
        {
            code:'guojie',
            name:'国界',
            icon_actived: '',
            icon_deactived: '',
            type:'wmts',
            url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
            option:{
                layers: 'all',
                format: "image/png",
                transparent: true,
                crs: L.CRS.EPSG4326
            }
        }
    ]
}