Openlayers之加载Stamen地图

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 src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><script type="text/javascript">window.onload = function () {var stamenMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'})});var map = new ol.Map({layers: [stamenMapLayer],view: new ol.View({center: [106.51, 29.55],projection: 'EPSG:4326',zoom: 10}),target: 'map'});};</script>
</head>
<body><div id="map"></div>
</body>
</html>

3、结果展示

Openlayers之加载Stamen地图相关推荐

Openlayers之加载谷歌地图
1.谷歌地图瓦片构成我们用浏览器打开谷歌地图,然后按下F12键,查看网络资源中的地图瓦片,可以发现瓦片URL中变化的部分为1i.2i和3i后面的数字,经过分析可以知道1i后面的应该是瓦片的级别,2i ...
005：vue+openlayers加载Mapbox地图示例
第005个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载Mapbox地图. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果示例效果 ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
OpenLayers教程十一：多源数据加载之用最简单的方式加载瓦片地图
目录一.加载OpenStreetMap 二.加载Stamen Map 三.加载Bing Map OpenLayers封装了一些瓦片地图源类用于加载瓦片地图,这些类包括: ol.source.OSM ...
Openlayers加载离线地图Arcgis瓦片
文章目录一.介绍二.快速入门一.下载地图瓦片二.OpenLayers加载离线Arcgis瓦片一.介绍 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类 ...
Openlayers 2.X加载高德地图
概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图. 实现效果: 高德地图高德影像图中:蓝色的省市边界为我本机发布的,能够与高 ...
（转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...

Openlayers之加载Stamen地图

Openlayers之加载Stamen地图相关推荐

最新文章

热门文章