OpenLayers(5.x)加载离线矢量图层OpenMapTiles Map Server

最新推荐文章于 2024-05-08 09:46:09 发布
最新推荐文章于 2024-05-08 09:46:09 发布
阅读量2.8k 收藏 4
点赞数 2
分类专栏： openlayers javascript 文章标签： openlayers mapbox vector tiles openmaptiles ol-mapbox-style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DavidWed/article/details/89512311
版权
需求背景

某产品需要展示离线OSM地图，一般地图下载仅支持下载栅格数据，数据量非常大，因此选择矢量数据。
可在openmaptiles.com进行下载（免费版有水印）

搭建离线服务

矢量数据为mbtiles，是一种基于mysql的地图切片数据库，无法通过像栅格数据XYZ的形式直接加载，需要搭建地图服务，可以自己搭建，也可以使用TileServer GL或者OpenMapTiles Map Server，本文以OpenMapTiles Map Server为例。
按照官方文档搭建好切片服务器之后，访问默认页面在这里插入图片描述
这里可以预览你生成的方案，你所搭建的服务器支持的切片种类以及服务，其中GL Style为矢量切片服务，需要加载矢量地图以及样式，其余均为栅格切片。

客户端

使用最新的Openlayers + ol-mapbox-style，openlayers为地图基础框架，ol-mapbox-style为openlayers加载maxbox矢量样式的插件，这一块查了很多资料都不够直观，也踩了一些坑，参考DEMO:Advanced Mapbox Vector Tiles-如何加载矢量图层这个demo中的样式为openlayers自己提供的方法，不适用于我们自己的搭建的服务加载样式，仅加载矢量数据效果：在这里插入图片描述

这里上添加样式关键代码

import {
   apply, applyStyle} from 'ol-ma
最低0.47元/天 解锁文章
DavidWed
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java+openlayers实现MBTiles地图瓦片浏览
07-02
1) 部署到tomcat6的webapps下面。 2) 将world.mbtiles放到D:/gisdata/mbtiles/目录下。 3) 在浏览器输入:(世界地图,图层0-7) http://localhost:8080/MbTileService/local_tiles.html
如何实现OSM地图本地发布并自定义配图
GIS兵器库
12-09 4958
文章目录1、缘起2、准备环境2.1、安装linux系统2.2、安装docker2.3、安装Docker Compose2.4、安装git3、发布地图3.1、拉取代码3.2、测试网络3.3、处理数据3.4、发布矢量瓦片服务3.5、自定义地图样式3.6、注意4、总结 1、缘起 OpenStreetMap（简称OSM）不仅可以免费在线使用，还可以免费下载原始数据，数据格式有.osm.pbf和shp。 我们将OSM原始数据下载下来，处理成矢量瓦片，发布成服务，就可以实现OSM地图的本地发布和自定义配图。 OSM对
探索OpenMapTiles工具：地图矢量瓦片的生成利器
gitblog_00043的博客
05-08 483
探索OpenMapTiles工具：地图矢量瓦片的生成利器 项目地址:https://gitcode.com/openmaptiles/openmaptiles-tools 当你寻找一个强大且灵活的解决方案来创建自定义的地图瓦片时，OpenMapTiles Tools 是一个不可错过的开源项目。这个工具箱包含了从下载、解析到生成地图瓦片所需的一切，适合所有技术水平的用户。无论是个人项目还是企业级应用...
OSM地图本地发布-如何生成各省市矢量地图
GIS兵器库
12-22 2161
文章目录1、缘起2、问题3、分析4、生成自定义地区矢量瓦片4.1、启动docker4.2、启动postGIS容器4.3、设置不清理上次的结果4.4、删除默认切图范围4.5、修改切图层级和范围4.6、生成瓦片4.7、重复操作5、总结 1、缘起 openmaptiles提供了一套OSM数据使用的完整解决方案，在前面文章如何实现OSM地图本地发布并自定义配图中，我们详细介绍了如何安装openmaptiles，并生成了一个阿尔巴尼亚地区的“helloworld”。 参照上篇文章的内容，输入下面的命令，就可以
openmaptiles:OpenMapTiles矢量图块架构实现
05-12
OpenMapTiles OpenMapTiles是基于OpenStreetMap的可扩展且开放的图块模式。 该项目用于生成在线可缩放地图的矢量图块。 OpenMapTiles是关于使用包含地形信息的常规图层创建漂亮的底图。 更多信息和 。 我们鼓励您进行协作，重复使用和改编现有图层，或添加自己的图层。 您可以将我们的方法用于自己的矢量图块项目。 随意分叉存储库并进行实验。 该存储库建立在之上，以简化矢量图块的创建。 请记住，OpenMapTiles模式应显示常规的地形内容。 如果创建具有特定主题的新层或扩展现有层，请创建一个fork并邀请其他社区成员就您的主题进行合作。 OpenMapTiles架构在世界各地的许多项目中都使用过，任何更新都需要考虑最终矢量图块的大小。 :link: 架构 :link: 文件 :link: 下载数据： : :link: 托管 :link: 创建自己的图层 :link: 在的#openmapti
Openlayers离线加载天地图
weixin_30325971的博客
02-27 431
概述：经过一个春节的休整，今天终于开始了！不论什么时候，都不要忘记学习，学习是一辈子的事情！今天，我来说说如何实现天地图的离线以及Openlayers加载离线数据实现天地图数据的展示。实现：1、获取天地图的数据可以通过网络上下载各大地图的工具将天地图的数据下载下来，并制作成mbtiles文件。制作过程在此就不详述，将已经制作好的一个文件上传到了百度网盘，需要的童鞋可以下载哦~~~~下载链接：h...
openlayers5加载天地图.zip
06-21
6. 显示地图：最后，将创建的图层添加到地图对象中，然后调用map.render()方法使地图在页面上显示出来。 描述中的“注记图层”和“路网图层”可能指的是天地图提供的不同服务类型。注记图层通常包含地名、标记等...
openlayers5.zip
06-18
3. **图层管理**：OpenLayers支持多种图层类型，如瓦片图层（TileLayer）、图像图层（ImageLayer）和矢量图层（VectorLayer）。通常，你会从一个地图服务获取数据，如WMS或XYZ服务，来创建图层。 4. **投影**：...
openlayers5加载geooserver发布线图层.zip
最新发布
06-19
本教程将深入探讨如何使用OpenLayers 5来加载由GeoServer发布的线图层。 首先，我们要理解OpenLayers 5的基本概念。OpenLayers是一个强大的地图库，支持多种地图源，包括WMS、WMTS、TileJSON等。在OpenLayers 5中，...
openlayers中文.rar
08-20
- **矢量图层**：自定义形状、图标，支持动态绘制和编辑。 - **交互式图层**：例如标记、测量工具，提供用户交互体验。 - **地图事件**：通过监听地图事件，实现更复杂的功能，如点击获取属性信息、拖拽移动等。 ...
openlayers3官方教程离线版
12-25
8. **动态数据加载**：对于矢量图层，OpenLayers 3支持实时加载和更新数据，可以实现动态的地图效果，如轨迹追踪、实时数据分析等。 9. **性能优化**：对于大规模数据，OpenLayers 3提供了分块加载（Binning）和...
openlayers加载本地离线地图瓦片（重新发2018-10-23）
10-24
有朋友反应上一次代码无法运行，我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行！！！
openstreetmap-tile-server:Docker文件可节省OpenStreetMap切片服务器的工作量
05-01
openstreetmap-tile-server 给定.osm.pbf文件，此容器使您可以轻松设置OpenStreetMap PNG切片服务器。 它基于的，因此使用默认的OpenStreetMap样式。 设置服务器 首先创建一个Docker卷来保存将包含OpenStreetMap数据的PostgreSQL数据库： docker volume create openstreetmap-data 接下来，从geofabrik.de下载所需区域的.osm.pbf摘录。然后，您可以通过运行容器并将文件安装为/data.osm.pbf开始将其导入PostgreSQL。 例如： docker run \ -v /absolute/path/to/luxembourg.osm.pbf:/data.osm.pbf \ -v openstreetmap-data:/var/lib/p
基于openlayer展示mapbox样式的矢量切片
YOOSHIN的博客
09-25 344
这个地址来的，使用谷歌账号登陆，里面有一些的OSM数据，可以下载，然后用Geoserver可以发布其矢量切片，公开免费数据下载地址https://data.maptiler.com/downloads/planet/格式为mbtiles，geoserver代理需要使用插件进行发布。需要使用ol-mapbox-style这个库。在项目总，只要能取到那个样式的对象就可以了。apply方法的引入方式如下。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2033
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
GIS：MBTiles数据
Puzzle的博客
11-20 8879
# GeoServer插件 所需安装插件：1、mbtiles 2、wps 1️⃣ mbtiles-plugin 下载地址：Index of /geoserver/（选择相应版本后进入community文件夹 geoserver-2.20-SNAPSHOT-mbtiles-plugin.zip
openlayers 地图源
qq_14849633的博客
12-30 591
1.中国蓝黑版地图 http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x} 2.中国暖色版地图 https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x} 3.天地图影像图 http://t0.tianditu.com/DataServer?T=&amp
探索地理数据的新维度：OpenMapTiles
gitblog_00030的博客
03-23 485
探索地理数据的新维度：OpenMapTiles 项目地址:https://gitcode.com/openmaptiles/openmaptiles OpenMapTiles 是一个开源项目，它提供了一种高效、可定制的方式来生成和发布全球地图。该项目基于矢量数据，允许开发者创建具有高度细节和动态渲染的地图应用，无论是用于Web、移动设备还是桌面应用程序。 项目简介 OpenMapTiles的核心是...
请告诉我如何用openLayers加载各种厂商的离线地图
07-08
你可以使用 OpenLayers 库来加载各种厂商的离线地图。下面是一个基本的步骤指南： 1. 首先，确保你已经包含了 OpenLayers 库的引用到你的 HTML 文件中。你可以从 OpenLayers 官方网站下载并引入该库。 2. 下载并准备你所需的离线地图文件。不同的厂商和服务提供商可能使用不同的地图格式和文件类型。确保你已经获得了适用于离线加载的地图文件。 3. 在你的 HTML 文件中，创建一个用于显示地图的 `<div>` 元素。给它一个唯一的 ID，以便之后在 JavaScript 代码中引用。 4. 在 JavaScript 代码中，创建一个 OpenLayers 的地图对象，并指定地图的显示容器为上一步中创建的 `<div>` 元素。 ```javascript var map = new ol.Map({ target: 'map-container', // 替换为你的地图容器的 ID }); ``` 5. 根据你使用的离线地图文件类型和厂商，选择适当的图层类来加载地图。以下是一些常见的示例： - 对于基于瓦片（Tile）的地图（如Google Maps、OpenStreetMap等），使用 `ol.layer.Tile` 类： ```javascript var tileLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'path/to/tile/{z}/{x}/{y}.png', // 替换为你的瓦片地图路径 }), }); map.addLayer(tileLayer); ``` - 对于基于矢量（Vector）的地图（如Mapbox、Here Maps等），使用 `ol.layer.Vector` 类： ```javascript var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'path/to/vector.geojson', // 替换为你的矢量地图文件路径 format: new ol.format.GeoJSON(), // 根据文件格式选择适当的格式类 }), }); map.addLayer(vectorLayer); ``` 根据你使用的地图厂商和地图文件的类型，你可能需要进一步配置图层参数（如投影、样式等）。 6. 最后，你可以通过设置地图的中心点和缩放级别来初始化地图的视图。 ```javascript map.setView(new ol.View({ center: ol.proj.fromLonLat([longitude, latitude]), // 替换为你的中心经纬度坐标 zoom: 10, // 替换为你的缩放级别 })); ``` 注意，在上述代码中，`longitude` 和 `latitude` 是你希望地图显示的中心点的经纬度坐标。 根据你所使用的离线地图文件和厂商，上述示例代码可能需要进行一些修改。确保按照你的需求进行相应的调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值