Openlayers之加载Stamen地图

最新推荐文章于 2023-05-12 18:50:29 发布
最新推荐文章于 2023-05-12 18:50:29 发布
阅读量2.1k 收藏 3
点赞数
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileCoffin/article/details/72864069
版权

1、Stamen地图瓦片构成

我们使用浏览器打开Stamen地图，按下F12查看网络资源，可以发现其瓦片URL非常直观明了，与OpenStreetMap的地图瓦片URL差不多，最终可以得到其通用URL：http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png，下面我们就来使用Openlayers加载Stamen地图；


2、代码实现

<!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
最低0.47元/天 解锁文章
桃李不言_下自成蹊
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 680
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
openlayers3加载各种底图，补齐中..
凡事有果必有因
08-18 1万+
不管是加载在线还是离线的底图，无非是按照一定的规则，正确定义图层（layer）,然后将图层添加到map对象中，这里我map对象使用的坐标系为WGS84 4326，openlayers版本为3.17。 1.在线天地图 var tian_di_tu_road_layer = new ol.layer.Tile({ title: "天地图路网", source: new ol.source.X
ArcGIS快速加载在线地图
热门推荐
wt11222333的博客
04-09 3万+
Arcgis加载在线地图
Vue+Leaflet实现加载Stamen显示地图
BADAO_LIUMANG_QIZHI的博客
01-05 1232
场景 Vue+Leaflet实现加载OSM显示地图： Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面加载显示OSM的基础上，怎样显示stamen的地图。 Stamen地图 Stamen地图是一个设计和构建地图和数据可视化的工作室，于2001年成立于旧金山； 利用新兴数字媒体创造了引人注目的交互式设计和数据可视化项目。 Stamen design工作室设计开发了一套可以制作地图街景桌面壁纸的工具， Map–>Image 一
OpenLayers 学习笔记（一）
m0_56972934的博客
05-12 472
是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务支持矢量切片，包括pbf、GeoJSON、TopoJSON格式支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据支持OGC制定的WMS、WFS等GIS网络服务规范支持在移动设备上运行可以通过css来为地图控件设置样式。
QGIS添加常用的数据源
popstarqq的博客
05-09 1547
在QGIS制图过程常需要搭配不同的底图做配合效果；整理了几个常用的地图；有其他可用的大家可以补充在评论，我会不断完善； 亲测效果如下： 右键XYZ tile；然后键入对应的名称和url即可； Esri_地形图:https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x} Esri_影像图:https://server.arcgisonl...
Openlayers之加载谷歌地图
SmileCoffin的博客
06-05 1万+
1、谷歌地图瓦片构成 我们用浏览器打开谷歌地图，然后按下F12键，查看网络资源中的地图瓦片，可以发现瓦片URL中变化的部分为1i、2i和3i后面的数字，经过分析可以知道1i后面的应该是瓦片的级别，2i后面的应该是瓦片的行号，所以最终得到其通用URL为：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i
openlayers资源v6.5.0.zip
12-16
5. **数据集成**：OpenLayers 支持多种地理数据格式，如GeoJSON、KML、GML、Shapefile等，可以直接加载到地图中。同时，它还支持实时数据流，如GeoJSON流，用于展示动态更新的数据。 6. **图层叠加**：可以轻松叠加...
OpenLayers实现图层切换控件
10-14
每个图层的可见性初始设置为`false`，意味着它们在地图加载时默认是隐藏的。 2. **创建地图实例**：使用`ol.Map`构造函数创建地图实例，并将其关联到HTML中的`div`容器。地图实例包含了所有图层，并设置了地图视图...
openlayers图层开关控件
07-27
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且兼容多种数据格式。"图层开关控件"是OpenLayers中的一个重要功能，它允许用户方便地切换...
QGis地图插件openlayers_plugin-2.0.0
08-16
QGis加载openlayers_plugin-2.0.0插件后，可增加在线地图的图层，包括：OpenStreetMap、GoogleMaps、Bing Maps、OSM/Stamen、Wikimedia Maps、OSM/Thunderforest、AppleMaps等
限制地图的范围1
08-03
在本文中，我们将深入探讨如何在OpenLayers中限制地图的显示范围，以便用户只能查看特定的地理区域。这个功能在很多应用中都很有用，比如当你只想让用户关注特定国家、地区或城市的数据时。我们将通过一个例子展示...
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
OpenLayers 添加OpenStreetMap(OSM)瓦片层示例
weixin_30722589的博客
06-23 515
This article from:http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example Deploy an OpenStreetMap slippymap on my own website This simple example may help if you are Deploying your own Slippy M...
Openlayer3之如何查看以前版本的API
Console_DS的博客
07-22 1546
这是Openlayers3最新版本的API的访问地址：http://openlayers.org/en/latest/apidoc/ 这是Openlayers3历史版本的API的访问地址：http://openlayers.org/en/v3.19.1/apidoc/ol.html?stableonly=true 备注：查看历史版本的API的时候，只需将最新版本API的访问地址的latest改...
学习Spring必学的Java基础知识(2)----动态代理
stamen的程序员之路
05-02 188
[b][size=x-large]引述[/size][/b]要学习Spring框架的技术内幕，必须事先掌握一些基本的Java知识，正所谓“登高必自卑，涉远必自迩”。以下几项Java知识和Spring框架息息相关，不可不学（我将通过一个系列分别介绍这些Java基础知识，希望对大家有所帮助。）： [b][color=red] [1] Java反射知识-->Spring IoC :[url]http...
openlayers6：入门基础（二）之加载图层
Puzzle的博客
10-31 7418
#Tiled Layers ## OSM ????OpenLayers v6.9.0 API - Class: OSM Layer source for the OpenStreetMap tile server. new ol.layer.Tile({ title: "OSM", source: new ol.source.OSM({ url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}....
Openlayers之加载高德地图
SmileCoffin的博客
06-01 2万+
1、高德地图瓦片URL构成 我们打开高德地图，然后按下F12键查看其网络资源，结果很不巧，高德改变了使用XYZ瓦片加载的方式，不过没关系，我们切换到卫星图，可以看到卫星图的底图仍是瓦片，不过没有任何标注信息，这个可以更改URL中的style的值，最终我们可以得到其通用瓦片URL：http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&siz
openlayers可以加载百度地图吗
最新发布
06-03
OpenLayers本身不支持直接加载百度地图，因为百度地图的API使用了一些特殊的加密方式，无法直接在OpenLayers中实现。不过，您可以通过使用第三方插件或者自己编写代码的方式，在OpenLayers中加载百度地图。以下是两种常用的加载百度地图的方法： 1. 使用第三方插件 有一些第三方插件可以让OpenLayers支持加载百度地图，例如ol-ext（https://viglino.github.io/ol-ext/），这个插件可以让OpenLayers支持加载百度地图、高德地图等。 2. 自己编写代码 您也可以自己编写代码来实现在OpenLayers中加载百度地图。具体来说，您可以使用百度地图API获取瓦片图层，并将其添加到OpenLayers的地图上。代码实现可以参考以下示例： ``` // 创建百度地图图层 var baiduLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileUrlFunction: function(tileCoord) { var x = tileCoord[1]; var y = tileCoord[2]; var z = tileCoord[0]; var url = "http://online{0-3}.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&scaler=1"; return url; }, projection: 'EPSG:3857' }) }); // 创建OpenLayers地图对象 var map = new ol.Map({ target: 'map', layers: [baiduLayer], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9087]), zoom: 10 }) }); ``` 需要注意的是，上述示例中的瓦片图层URL地址中的“online{0-3}”是百度地图提供的多个服务器地址，需要根据实际情况选择使用哪个地址。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值