Cesium加载离线地图 + 整合图层控件

提示

• 使用的都是vue2的语法

• 靠查阅各种资料+自己试验总结出来的...不一定绝对正确，仅供参考!

nginx架设服务器

比如说我的F盘里的tiles文件夹里是离线地图相关文件，想使用80端口，nginx的server设置就大概是这样的。

如果设置成功，浏览器里打开 http://127.0.0.1:80/tiles 就能看到相关文件了（发送请求也是用这个链接,看下文'添加图层'示例中的第二个）

server {
        listen       80;
        server_name  localhost;
 
        add_header Access-Control-Allow-Origin *;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
 
        location / {
            root   F:/;
            index  index.html;
        }
 
        location /tiles {
            alias   F:/tiles;
            autoindex on;
            autoindex_localtime on;
        }
    }

先把Cesium Viewer搭起来

// 创建viewer
this.viewer = new Cesium.Viewer('cesiumContainer', {
  // 各种配置项，官网api和各种博客文里都有相关的
});

添加图层

每个ImageryProvider对应一个地图图层，可以多个叠加。

疯狂在这一块踩坑，花了好一阵子纠结为什么坐标一直偏移还纠正不过来。。。然后发现是用了错误类型的ImageryProvider。

根据我的踩坑经验，稍微总结一下：

• url里有xyz的基本就是UrlTemplateImageryProvider

• 离线地图瓦片文件夹里有xml文件的，就用TileMapServiceImageryProvider

• 还有就是别人已经提供好了服务的，比如必应地图的BingMapsImageryProvider

我拿到的瓦片地图是放在z-x-y文件夹顺序的png，一开始我一直在尝试url类型的（因为找到了几个博客教学都用的url）。但是事实证明只有tms类型可以正常展示我手上的这些数据。。。

用哪种取决于你准备用哪种数据！！ 附上官方文档API， 至少15种呢！

三个例子：

// 某个在线地图的路标（好像是高德？记不清了）
const onlineMapLabel = new Cesium.UrlTemplateImageryProvider({
  url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
  maximumLevel: 15,
})

// 离线地图数据
const offlineMap = new Cesium.TileMapServiceImageryProvider({
    url: `http://127.0.0.1:80/tiles`,
    fileExtension: "png",
    maximumLevel: 15,
})

// bing的在线道路地图（需要去官网申请key，此处不多讲）
const bingMap = new Cesium.BingMapsImageryProvider({
  url : 'https://dev.virtualearth.net',
  key : bing_key,
  mapStyle : Cesium.BingMapsStyle.ROAD,
  maximumLevel: 15,
});

如果要直接把图层画上去，可以这样做：

this.viewer.imageryLayers.addImageryProvider(bingMap)

我个人觉得这样直接加上去后不好操作，如果完全不用切某个图层的话可以这样做。

如果要频繁切地图，还是推荐把图层整合进图层控件（见下文）

整合图层控件

每个选项对应一个model，一个里面可以有好几个图层，而且完全可以自定义每个model，同时自定义整个列表。

新建一个model

// 创建一个新的model
const onlineMapModel = new Cesium.ProviderViewModel({
  name: "在线数据",
  iconUrl: Cesium.buildModuleUrl(
    "Widgets/Images/ImageryProviders/openStreetMap.png"
  ),
  tooltip: "在线数据",
  creationFunction: function () {
    return [bingMap, onlineMapLabel];  // 把上面建立的两个ImageryProvider加进去了
  }
});

获取默认的model列表并进行操作：

// 获取默认列表
const modelList = this.viewer.baseLayerPicker.viewModel.imageryProviderViewModels;

// 操作示范
modelList.push(onlineMapModel) // 加在后面
modelList.unshift(onlineMapModel) // 加在前面
modelList = [onlineMapModel, onlineMapModel] // 完全覆盖

最后成果 （把新的放在原来的前面）

参考博文：

https://blog.csdn.net/floating_heart/article/details/125467142

https://blog.csdn.net/lili40342/article/details/123713802

https://blog.csdn.net/sinat_36226553/article/details/107910880