openlayers-自定義瓦片

時間 2019-11-08

標籤 openlayers 自定義瓦片简体版

原文原文鏈接

openlayers-自定義瓦片

定義一個瓦片地址

```
ol.source.TileImage.tileUrlFunction
```
官方文檔

由此咱們只須要重寫這個ol.source.TileImage.tileUrlFunction方法便可

數據準備

用爬蟲下載了一些高德地圖放大層數最小的圖片256*256大小的

簡單服務器配置，將這些圖片放到tomcat下使之可以正常訪問

代碼編寫

經常使用參數配置javascript

var proj_3857 = new ol.proj.get("EPSG:3857");
  var proj_3857Extent = proj_3857.getExtent();
  var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent());

  var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024,
    19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282,
    611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
    19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879,
    0.5971642834779395];

用於調試的網格編號(很重要)css

var tileGrid = new ol.tilegrid.TileGrid({
    resolutions: resolutions3857,
    tileSize: [256, 256],
    extent: proj_3857Extent,
    origin: ol.extent.getTopLeft(proj_3857Extent),
  });

使用說明：
能夠用來檢查是不是對應的圖片
html

瓦片圖層java

var tilesource = new ol.source.TileImage({
    tileUrlFunction: function (tileCoord) {
      var z = tileCoord[0];
      var x = tileCoord[1];
      var y = Math.abs(tileCoord[2]);
      return "http://localhost:9999/gaode_tiles_tms/" + z + "/" + x + "/" + y + ".png";
    },
    tileGrid: tileGrid,
    projection: proj_3857,
  });

完整demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
          integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
          integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
          crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>


</head>
<body>

<div id="map"></div>

<script type="text/javascript">


  var proj_3857 = new ol.proj.get("EPSG:3857");
  var proj_3857Extent = proj_3857.getExtent();
  var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent());

  var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024,
    19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282,
    611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
    19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879,
    0.5971642834779395];

  /**
   * 網格標註
   * @type {ol.tilegrid.TileGrid}
   */
  var tileGrid = new ol.tilegrid.TileGrid({
    resolutions: resolutions3857,
    tileSize: [256, 256],
    extent: proj_3857Extent,
    origin: ol.extent.getTopLeft(proj_3857Extent),
  });

  var tilesource = new ol.source.TileImage({
    tileUrlFunction: function (tileCoord) {
      var z = tileCoord[0];
      var x = tileCoord[1];
      var y = Math.abs(tileCoord[2]);
      return "http://localhost:9999/gaode_tiles_tms/" + z + "/" + x + "/" + y + ".png";
    },
    tileGrid: tileGrid,
    projection: proj_3857,
  });

  var AMap = new ol.layer.Tile({
    source: tilesource,
    projection: proj_3857,
  });

  var map = new ol.Map({
    layers: [
      AMap,
      // 加載本地瓦片
      new ol.layer.Tile({
        source: new ol.source.TileDebug({
          projection: proj_3857,
          tileGrid: tileGrid
        })
      })
    ],

    target: 'map',
    view: new ol.View({
      center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
      resulotions: resolutions3857,
      zoom: 1,
      minZoom: 1,
      maxZoom: 19
    }),
  });


</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。