OpenLayers 加载ArcGIS瓦片数据

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。

本节主要介绍加载百度地图数据。

1. 如何加载百度地图数据

可以参照瓦片地图的方法来加载百度地图，在OpenLayer 5地图库中没有加载百度地图数据源的方法，所以需要根据百度地图瓦片请求格式拓展数据源来加载。

// 分辨率数组
const resolutions = []
for (let i = 0; i < 19; i++) {
  resolutions[i] = Math.pow(2, 18 - i)
}

const tileGrid = new ol.tilegrid.TileGrid({
  origin: [0, 0],
  resolutions: resolutions
})
// 百度地图数据源
const baiduSource = new ol.source.TileImage({
  projection: projection, // 坐标参考
  tileGrid: tileGrid, 
  // 瓦片请求方式
  tileUrlFunction: function (tileCoord, pixelRatio, proj) {
    if (!tileCoord) {
      return ""
    }
    const z = tileCoord[0]
    let x = tileCoord[1]
    let y = tileCoord[2]
    if (x < 0) {
      x = "M" + (-x)
    }
    if (y < 0) {
      y = "M" + (-y)
    }
    return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
  }
})

• tileUrlFunction

拼接瓦片地图URL，{x}{y}{z}对应瓦片行列号和级数。

• projection

地图投影坐标系，百度地图才用EPSG:3857坐标系。

• tileGrid

切片网格，地图切片原点为[0,0]

2. 完整代码2

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !