openlayers-自定义瓦片

定义一个瓦片地址

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

1553670625715

由此我们只需要重写这个ol.source.TileImage.tileUrlFunction方法即可

数据准备

用爬虫下载了一些高德地图放大层数最小的图片256*256大小的

1553670742941

简单服务器配置，将这些图片放到tomcat下使之能够正常访问

代码编写

常用参数配置


  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];

用于调试的网格编号(很重要)

 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,
  });

完整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>

openlayers-自定义瓦片

openlayers-自定义瓦片

定义一个瓦片地址

数据准备

代码编写

完整demo

huifer

引用和评论

重说循环依赖

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具