openlayers加载切片数据的正确方式以及切片数据加载失败原因

wenjing:)

已于 2024-04-23 11:38:06 修改

阅读量2.3k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： openLayers 文章标签：前端

于 2024-02-21 16:38:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43336525/article/details/136212081

1. openLayers选择合适的类进行数据加载

在openLayers中我们需要频繁的加载数据，这些数据包括本地切片数据、运营商提供的数据url或者是来自服务的图层数据源等等。
对于各种类型的数据openLayers提供了很多的类，现总结如下：

对于我们日常开发加载数据来说，最常用的就是切片数据(ol.source.UrlTile)。openLayers分别提供了加载栅格数据和矢量数据的类，为了保证我们数据的正常加载，我们需要知道我们的数据切片是什么格式的！如果你的数据是矢量切片数据，例如pbf、GeoJSON等，你使用ol.source.XYZ类加载，那无论如何调试可视化结果都是失败的！使用正确的类加载你的切片数据是一切的前提!

2.如何正确使用栅格切片类(ol.source.TileImage)

对于栅格切片数据，由上图我们可以知道openLayers给我们提供了很多的类，那我们该如何选择合适的类进行数据资源的实例化呢？
我们在日常使用中最频繁加载的栅格切片数据有：1.在线地图url；2.服务的图层数据源(WMTS、TileWMS等)；3.自己下载的切片数据。下面分别介绍：

2.1 在线地图url

在线地图url基本都是使用ol.source.XYZ类加载，区别可能在于一些地图厂商定义切片数据的原点与坐标轴方向可能与openLayers默认不同(openLayers默认坐标原点是左上角，从左向右为x轴正方向，从上向下为y轴正方向)，这时我们就需要指定该切片数据集的tilegrid或者利用tileUrlFunction函数动态修改切片的url()。

// 1.高德地图
source: new ol.source.XYZ({
   
   
    url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
})

// 2.天地图
source: new ol.source.XYZ({
   
   
    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=fc2cda68f77e786880885926d05d24c0"
})

// 3.百度地图(需要动态改变瓦片的xyz，百度地图默认原点是(0,0)，从左向右为x轴正方向，从下向上为y轴正方向)
// 分辨率
var resolutions = [];
for (var i = 0; i < 19; i++) {
   
   
    resolutions[i] = Math.pow(2, 18 - i);
}

// ol.tilegrid.TileGrid是定义瓦片格网的类，其实就是瓦片的坐标系
// 构造时设置瓦片的原点和每一层瓦片的分辨率
var tilegrid = new ol.tilegrid.TileGrid({
   
   
    origin: [0