openlayers-自定义瓦片

Barrior 发布于2019-08-23 16:28 / 652人阅读

摘要：自定义瓦片定义一个瓦片地址官方文档由此我们只需要重写这个方法即可数据准备用爬虫下载了一些高德地图放大层数最小的图片大小的简单服务器配置，将这些图片放到下使之能够正常访问代码编写常用参数配置用于调试的网格编号很重要使用说明可以用来检查是否是

openlayers-自定义瓦片 定义一个瓦片地址

ol.source.TileImage.tileUrlFunction

官方文档

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

数据准备

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

简单服务器配置，将这些图片放到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

私有云海外云主机自定义头像自定义网站自定义自定义按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103063.html

Openlayers中数字比例尺的实现方法

摘要：比例尺分类数字式，用数字的比例式或分数式表示比例尺的大小。中比例尺介绍中默认地图比例尺为直线式，如图该比例尺存在精确测量无法读取比例尺实际值的缺点。因此有必要将直线比例尺转换成数字比例尺。 1.比例尺分类（1）数字式，用数字的比例式或分数式表示比例尺的大小。例如地图上1厘米代表实地距离500千米，可写成：1∶50 000 000或写成：五千万分之一。（2）线段式（也叫直线式），在地图上...

dreamGong 2019-08-26 13:46 评论0 收藏0
JavaScript矢量化地图库 – 快速入门

摘要：注意在代码中将其替换为自己刚刚申请的运行，显示地图修改保存之后点击运行就可以得到一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一会儿。 VectorMap.js是一个开源地图渲染JavaScript库，可以使用WebGL或者HTML5两种方式进行交互式矢量地图（包括矢量瓦片地图，一般性矢量数据地图）和栅格瓦片地图的渲染。 WebGL渲染意味着高性能，大数据， HTML5渲染意...

MiracleWong 2019-08-23 17:19 评论0 收藏0
百度地图自定义瓦片图获取

摘要：代码起始点坐标左上角终点坐标右下角根据地图平台使用转换类这里是用百度的最大最小缩放等级循环产生瓦片图目录结构层级横坐标范围纵坐标范围这个是你图片要存放的位置先要产生操作完的流程后再执行这个后面有说这个的用处这个函数是获取一个的对象数组 nodejs代码 const request = require(request); const fs = require(fs); const bag...

用户83 2019-08-26 10:30 评论0 收藏0