openlayers6地图离线开发demo-百度瓦片资源地图初始化

oliver666666

已于 2023-05-09 14:06:43 修改

阅读量3.1k

点赞数

分类专栏：地图离线开发之openlayers6+vue+地图离线资源文章标签： vue.js 学习 javascript

于 2022-03-10 14:44:16 首次发布

本文链接：https://blog.csdn.net/oliver666666/article/details/123400773

版权

地图离线开发之openlayers6+vue+地图离线资源专栏收录该内容

5 篇文章 0 订阅

订阅专栏

公司需求开发离线地图功能。搜索学习，踩坑，试验（由于参考借鉴了n多文章，就不分别贴出对应文章了。。。），最终整合了一套集成vue的离线地图开发方案，文章将分享一整套的解决方案思路与方式。后续分为各个功能分享，整个项目demo我也会放出。

ol为npm安装的方式，同时也有ol5cdn引入的方式，示例有用ol5和ol6加载地图，其他demo的主要功能我采用npm安装ol6后，按需引入开发。采用ol的方式，主要是百度3.0api离线开发方案太具局限性，万一瓦片更换，或者一些新功能需求无法满足，则会大费周章的去手写。而openlayers正好可以解决这一问题，他可以接入各类瓦片图层，而我们只需要对应的转换投影参考坐标系即可，如我使用了百度地图瓦片，所以只需将投影定义为百度投影。

而我们使用的坐标，只需要进行个转换即可。后续如果使用其他地图，应该也可以对应修改投影方式以及转换对应坐标。

（一）.所需资源

1.百度瓦片：采用获取瓦片加载的方式，加载离线地图，所以百度瓦片资源必不可少。软件下载瓦片，可以根据需要下载，而我使用的js的api我设置为png，所以类型可以勾选下载png格式，也支持主题自定义，只需要去百度地图个性化主题配置进行一个配置，然后讲json导入进来即可。瓦片就是地图请求的一张张瓦片切图，属静态资源放在服务器

2.openlayers6 安装

OpenLayers - Get the Code 官方地址，有很多demo可以参考以及类说明

我的ol版本

初始化地图

// 定义百度投影
const projBD09 = new Projection({
  code:'BD:09',
  extent:[-20037726.37, -11708041.66, 20037726.37, 12474104.17],
  units:'m',
  axisOrientation:'neu',
  global:false
});

// 自定义分辨率
const baiduResolutions = [];

// 计算百度地图使用的分辨率
for(let i = 0; i <= 18; i++){
  baiduResolutions[i] = Math.pow(2, 18 - i);
}

// 自定义瓦片坐标系
const baiduTileGrid = new TileGrid({
  origin:[0, 0], // 将原点设置成和百度瓦片坐标系一致
  resolutions:baiduResolutions // 设置分辨率
});

// 百度地图源
const baiduSource = new TileImage({
  projection:'BD:09',
  tileGrid:baiduTileGrid,
  tilePixelRatio:2,
  tileUrlFunction: function(tileCoord, pixelRatio, proj) {
    let z = tileCoord[0];
    let x = tileCoord[1];
    let y = tileCoord[2];
    if (x < 0) {
      x = (-x);
    }
    if (y < 0) {
      y = (-y) - 1;  //初始化地图时，由于ol6算法有变，必须如此设置，否则瓦片加进来会看不见或者位置对不上
    }

    // 服务器的瓦片地址
    return window.ServerConfig.tilesUrl + 'tiles/' + z + '/' + x + '/' + y + '.png';

  }
});

demo列表，后续增加开发中遇到的需求功能，目前demo是一些普通的基本地图操作，其中聚合点分组功能有进行修改，即对应聚合层级，数值将有实际意义，可在对应的数值范围设置对应的图标与样式