OpenLayers 加载ArcGIS瓦片数据

news2025/5/29 10:36:25

注：当前使用的是 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文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>加载Baidu数据</title>
    <meta charset="utf-8" />
    <script src="../libs/js/ol-5.3.3.js"></script>
    <script src="../libs/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../libs/css//ol.css">
    <style>
      * {
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-family: '微软雅黑';
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .ol-mouse-position {
        padding: 5px;
        top: 10px;
        height: 40px;
        line-height: 40px;
        background: #060505ba;
        text-align: center;
        color: #fff;
        border-radius: 5px;
      }

    </style>
  </head>

  <body>
    <div id="map" title="地图显示"></div>
  </body>

</html>

<script>
  //地图投影坐标系
  const projection = ol.proj.get('EPSG:3857');
  //==============================================================================//
  //============================天地图服务参数简单介绍============================//
  //================================vec：矢量图层=================================//
  //================================img：影像图层=================================//
  //================================cva：注记图层=================================//
  //======================其中：_c表示经纬度投影，_w表示球面墨卡托投影============//
  //==============================================================================//
  const TDTImgLayer = new ol.layer.Tile({
    title: "天地图影像图层",
    source: new ol.source.XYZ({
      url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
      attibutions: "天地图注记描述",
      crossOrigin: "anoymous",
      wrapX: false
    })
  })
  const TDTImgCvaLayer = new ol.layer.Tile({
    title: "天地图影像注记图层",
    source: new ol.source.XYZ({
      url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
      attibutions: "天地图注记描述",
      crossOrigin: "anoymous",
      wrapX: false
    })
  })
  const map = new ol.Map({
    target: "map",
    loadTilesWhileInteracting: true,
    view: new ol.View({
      center: [11421771, 4288300],
      zoom: 5,
      worldsWrap: true,
      minZoom: 1,
      maxZoom: 20,
      projection: projection
    }),
    // 鼠标控件：鼠标在地图上移动时显示坐标信息。
    controls: ol.control.defaults().extend([
      // 加载鼠标控件
      new ol.control.MousePosition()
    ])
  })

    // map.addLayer(TDTImgLayer)
    // map.addLayer(TDTImgCvaLayer)

    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";
        }
    })
    const baiduLayer = new ol.layer.Tile({
        source: baiduSource
    })
    map.addLayer(baiduLayer)
</script>