ol中不同区域加载不同底图

lzugis

发布于 2023-06-10 11:20:06

2860

发布于 2023-06-10 11:20:06

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

写一篇水文，讲讲如果在openlayers中实现不同的区域加载不同的底图。

效果

实现

通过tileUrlFunction实现不同切片地址的请求。

<!DOCTYPE html>
<html>
  <head>
    <title>XYZ</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
      html, body, #map {
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      function isTileInExtent(z, x, y) {
        const [xmin, ymin, xmax, ymax] = ol.proj.transformExtent([73.502355,3.397162,135.09567,53.563269], 'EPSG:4326', 'EPSG:3857')
        const val = 20037508.34
        const res = (val * 2 / Math.pow(2, z))
        const [_xTileMin, _xTileMax, _yTileMin, _yTileMax] = [
          -val + x * res, -val + (x + 1) * res,
          val - (y + 1) * res, val - y * res
        ]
        return _xTileMin >= xmin && _xTileMin <= xmax && _yTileMin >= ymin && _yTileMin <= ymax
          ||  _xTileMax >= xmin && _xTileMax <= xmax && _yTileMin >= ymin && _yTileMin <= ymax
          ||  _xTileMin >= xmin && _xTileMin <= xmax && _yTileMax >= ymin && _yTileMax <= ymax
          ||  _xTileMax >= xmin && _xTileMax <= xmax && _yTileMax >= ymin && _yTileMax <= ymax
      }

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
              tileUrlFunction([z, x, y]) {
                const isIn = isTileInExtent(z, x, -y)
                return isIn ?
                  `https://webrd02.is.autonavi.com/appmaptile?style=8&x=${x}&y=${-y}&z=${z}&lang=zh_cn&size=1&scale=1` :
                  `https://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x=${x}&y=${-y}&z=${z}`
              }
            })
          })
        ],
        view: new ol.View({
          center: [12793318.711518219, 5336814.9902110305],
          zoom: 4,
          minZoom: 3
        })
      });
    </script>
  </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-30，如有侵权请联系 cloudcommunity@tencent.com 删除

html