Openlayers之使用XYZ的方式加载OpenStreetMap
来源:互联网 发布:淘宝背景材图 编辑:程序博客网 时间:2024/06/05 21:16
1、OpenStreetMap的URL构成
我们在浏览器中打开一幅OpenStreetMap的地图,也就是Openlayers的ol.source.OSM()数据源,然后按下F12键,查看瓦片的URL地址,就会发现每张瓦片除了URL地址的首字母和最后三个数字不一样外,其他都相同,最终可以得到http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png这样一个通用的瓦片加载URL;
2、XYZ方式加载地图
Openlayers提供了ol.source.XYZ这样一个类加载XYZ方式的瓦片地图,其中X是指瓦片的行号,Y是指瓦片的列号,Z是指瓦片的级数,这三者相结合,就能确定在某一个缩放级别下的唯一一张地图瓦片,因此只要我们指定了所有地图瓦片的通用URL,那么我们就能加载该地图,下面我们就是用之前总结的OpenStreetMap的通用URL来加载地图;
3、代码
<!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 openStreetMapLayer = new ol.layer.Tile({ //使用XYZ的方式加载瓦片图 source: new ol.source.XYZ({ //OpenStreetMap的瓦片URL url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ layers: [openStreetMapLayer], 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>4、运行结果
我们成功加载了OpenStreetMap的地图,是不是非常的简单快捷,这样加载的最大好处就是可以提高瓦片的加载速度(相对于直接从服务器上获取),下面我们以同样的方式来加载高德地图。
阅读全文
0 0
- Openlayers之使用XYZ的方式加载OpenStreetMap
- Openlayers之加载ArcGIS Server瓦片(XYZ方式)
- Openlayers 3加载XYZ示例
- Openlayers之加载ArcgisServer的切片(TileArcGISRest加载方式)
- OpenLayers 3 之加载地图
- OpenLayers之加载缩放控件
- Openlayers之加载鹰眼控件
- Openlayers之加载开放数据源
- Openlayers之加载Stamen地图
- Openlayers之加载MapQuest地图
- OpenLayers的使用
- OpenLayers 3 之 加载百度地图
- OpenLayers 3 之 加载天地图
- OpenLayers 3 之 加载天地图
- Openlayers之加载高德地图
- Openlayers之加载谷歌地图
- Openlayers之拖拽加载矢量数据
- Openlayers之离线加载ArcGIS Server瓦片
- 破解前端面试(80% 应聘者不及格系列):从闭包说起
- Intellij Idea 编辑器的使用安装、破解版本必备
- ubuntu/centos 搭建 搭建 redis 集群
- Java字符串在内存中的存储位置
- media query 参考
- Openlayers之使用XYZ的方式加载OpenStreetMap
- 快速排序
- BZOJ1407: [Noi2002]Savage
- onethink中修改ucenter用户的密码
- JS实现回车搜索
- SpringBoot四大神器之Actuator
- 使用ORACLE在线重定义将普通表改为分区表
- GDB调试下的多进程与多线程
- 破解前端面试(80% 应聘者不及格系列):从 DOM 说起