BIM应用开发9：BIM+GIS环境

1、基本的地图加载

/*
 * @Descripttion: 
 * @version: 
 * @Author: taoxiang
 * @Date: 2021-07-16 11:02:29
 * @LastEditors: taoxiang
 * @LastEditTime: 2021-07-16 11:19:21
 */
class TileMap {
    constructor(){
        this.mapTypes = ['vec','img'];
    }
    init(param,viewer3D){
        const {
            basePoint,
            modelPosition,
            mapType = 'img',
            key = ''
        } = param || {};
        
        if(!viewer3D){
            return;
        }
        if(!basePoint){
            return;
        }
        if(!modelPosition){
            return;
        }
        if(!this.mapTypes.includes(mapType)){
            return;
        }
        if(!key){
            return;
        }

        let url = `http://t0.tianditu.gov.cn/${mapType}_w/wmts?tk=${key}`;

        const mapConfig = new Glodon.Bimface.Plugins.TileMap.MapConfig();
        mapConfig.viewer = viewer3D;
        // 设置模型载入的基点
        mapConfig.basePoint = basePoint;
        // 设置模型载入基点所对应的经纬度（WGS84）
        mapConfig.modelPosition = modelPosition;
        // 构造地图对象
        this.map = new Glodon.Bimface.Plugins.TileMap.Map(mapConfig);

        this.map.setMapSource({
          url:url,
          provider:'Tianditu',
          credit: Glodon.Bimface.Common.Credit.Tianditu
        });
    }
}
export default new TileMap();

2、地图底图的切换

/**
 * @description 切换地图
 * @param {*} mapType 
 * @returns 
 */
setMapType(mapType){
    if(!this._key ){
        return;
    }
    if(!mapType ){
        return;
    }
    const url = `http://t0.tianditu.gov.cn/${mapType}_w/wmts?tk=${this._key}`
    this.map.setMapSource({
        url:url,
        provider:'Tianditu',
        credit: Glodon.Bimface.Common.Credit.Tianditu
    });
}

3、改变地图颜色

日常使用中搭配整体UI的布局，天地图单一的色调显然不能满足项目的需求。这时，我们想要改变地图的配色的需求就出现了。

/**
 * @description 修改地图颜色
 * @param {*} param 
 */
setCustomStyle(param) {
    const {
        color = '#0000FF',
        brightness = 0,
        contrast = 0,
        saturation = 0
    } = param || {};
    this.map.setMapStyle({
        template: Glodon.Bimface.Common.ImageStyle.CustomColor,
        color: new Glodon.Web.Graphics.Color(color),
        brightness: brightness,
        contrast: contrast,
        saturation: saturation
    });
}

4、离线环境的使用

最主要的想在这里介绍下怎么使用离线地图环境。

• 地图瓦片下载

具体使用什么工具下载这里不做介绍，下载完成的数据应该是这样的。

• 地图瓦片部署

其实可以把地图瓦片看成是静态的img，只要用tomcat或者是nginx做个服务器静态资源的部署即可。

• 初始化

把mapConfig的mapUrl配置改一下即可，看一下效果。

mapConfig.mapUrl = `/map/changsha/{z}/{x}/{y}.png`;
mapConfig.mapLayer = '';