OpenLayers3+OpenStreetMap初探

首先到http://www.openlayers.org/下载OpenLayers，我下的版本是v3.4

网上很多中文教程基本都是2的，3的比较少，只能慢慢摸索，而且我是个web、js小白。

最开始接触肯定要从它的quikstart开始，打开doc下的quickstart.html，下面是它给的事例，直接复制到html里就可以运行，.js是直接连到网站的

<!doctype html>
<html lang="en"><head><link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}</style><script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script><title>OpenLayers 3 example</title></head><body><h2>My Map</h2><div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'sat'})})],view: new ol.View({center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),zoom: 4})});</script></body>
</html>

因为要用的是OpenStreetMap的数据，就对例子进行了下修改，其中获取资源的方式很多，有ol.source.TileWMS、ol.source.XYZ、ol.source.OSM这三种，具体可以参加 http://wenku.baidu.com/link?url=z4xsLjTaOtl4Qg9YkwvBJVkxisyvF1jYKtd4XijnitnKBp_i-ouiYdoj1uARKI6WF5QQ9AzN1pNQCJ0mHeZ3VBU3ZClv1brArYBf8sxd95O的13页，为了快速熟悉ol，我直接用的是ol.source.OSM。

下面是对示例的修改，锁定上海市为中心，虽然之前下载过了上海市的osm，但是还没有用Maperitive生成瓦片数据，所以是直接从网络获取的资源。

    <script type="text/javascript">var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: ol.proj.transform([121.50, 31.22], 'EPSG:4326', 'EPSG:3857'),zoom: 10})})</script>

重点在这里，ol.View负责地图的中心点，放大，投影之类的设置。

view: new ol.View({center: ol.proj.transform([121.50, 31.22], 'EPSG:4326', 'EPSG:3857'),zoom: 10})

地理空间数据可能来自各种坐标参照系，一个数据集可能是以度为单位的地理（经纬）坐标系，另一个可能是以米为单位的投影坐标系，对坐标系的全面讨论超出了本实践的范围，但了解其基本概念是很重要的。
OpenLayers3需要知道所使用数据的坐标系，在内部，由ol.proj.Projection对象展现，ol.proj命名空间中的transform方法使用字符串表示坐标参考系（上述示例中的"EPSG:4326"以及"EPSG:3857"）。
OpenStreetMap瓦片数据是墨卡托投影，因此，我们需要使用墨卡托坐标了设置初始化时的中心点。由于一个地方的地理坐标相对来说更容易知道，使用ol.proj.transform方法将地理坐标系（"EPSG:4326"）转化为墨卡托坐标系（"EPSG:3857"）。

OpenLayers3包含地理坐标系与墨卡托坐标系间相互转换的方法，因此我们可以使用ol.proj.transform方法而不需要任何额外的工作。如果想要使用其他投影的数据，再使用ol.proj.transform方法之前需要添加一些额外的信息。

那么，我们需要修改的只是坐标值和zoom的大小，以我要显示上海市地图为例，在OpenStreetMap官网中获取上海市的位置，如图

10就是zoom的值；我最开始是ol.proj.transform([31.22, 121.50]这样写的，但是发现显示不出来地图了，于是突然想到把x和y的位置交换一下，发现就成功了，也是奇怪。

因为只需要显示上海市地图，所以找了半天怎么才能设定地图范围边界

    <script type="text/javascript">var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM(),extent: ol.proj.transformExtent([120.50, 30.79, 122.50, 31.64], 'EPSG:4326', 'EPSG:3857')})],view: new ol.View({center: ol.proj.transform([121.50, 31.22], 'EPSG:4326', 'EPSG:3857'),zoom: 10,minZoom: 10})})</script>

extent: ol.proj.transformExtent([120.50, 30.79, 122.50, 31.64], 'EPSG:4326', 'EPSG:3857') 将图层渲染范围限定在这个指定的经纬度内
minZoom: 10 设定最小的zoom值

最后显示结果如下，有一个问题是如果拖动地图的话，超过了渲染的范围，会有白边显示（如下图左边），这个还不知道怎么解决，如果有知道的人麻烦告知一下，谢谢！

-----------------------------------------------------------------------------------------------------------

2016.04.05

版本ol3.15.0

关于上面的问题，把extent设在view中即可

OpenLayers3+OpenStreetMap初探相关推荐

OpenStreetMap初探（七）——渲染和地图瓦片之安装Mapnik
主要的渲染和瓦片工具有这么几个: 渲染和地图瓦片: Mapnik 见mapnik.org [1] Osmarender (XSLT) svn trac Tiles@home distributed ...
openstreetmap基础教程
(注:第一次写,并且文章引用https://blog.csdn.net/mad1989/article/details/9733985) (注:OpenStreetMap初探(一)--了解OpenSt ...
关于OpenStreetMap数据
把OSM的数据总结一下以后找的方便 http://en.wikipedia.org/wiki/OpenStreetMap wiki上的Data format,只有Nodes,Ways,Relation ...
OpenStreetMap数据下载和使用
OSM的介绍:OpenStreetMap初探(一)--了解OpenStreetMap_Mr.An 的专栏-CSDN博客_openstreetmap openStreetMap Export | Ope ...
Open Street Map介绍以及相关使用教程
看不太懂,但感觉有用的东西.Openstreetmap 是什么? 用来入门(或者说先知道这是什么)简单的百度百科介绍这个链接展示了如何下载一定格式的地图(shp.osm格式). OpenStreet ...
（转）OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念从本节开始,我会陆陆续续的更新 ...
无偏移谷歌瓦片地址_[转]OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
开源与成熟商业的瓦片地图服务(TMS 2 WMTS),都有如下共同的特性,基本成为了标准: (1) 坐标系:WGS84 (2) 投影:墨卡托投影(Marcator,正轴等角圆柱投影) ------ ...
OpenLayers3基础教程——OL3基本概念
从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLay ...
openlayers3教程详细_OpenLayers 3 入门教程
OpenLayers 3 入门教程摘要 OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实 ...

OpenLayers3+OpenStreetMap初探

OpenLayers3+OpenStreetMap初探相关推荐

最新文章

热门文章