欢迎来到天天文库
浏览记录
ID:40568578
大小:2.37 MB
页数:42页
时间:2019-08-04
《OpenLayers 3 入门教程》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、OpenLayers3入门教程
2、41OpenLayers3入门教程DerectBy:黄进OpenLayers3入门教程
3、41摘要OpenLayers3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。OL3已运用现代的设计模式从底层重写。最初的版本旨在支持第2版提供的功能,提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本2一样,数据可以被任意投影。最初的版本还增加了一些额外的功能,如能够方便地旋转地图
4、以及显示地图动画。OpenLayers3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本中加入。OpenLayers3入门教程
5、41目录基本概念4Map4View4Source5Layer5总结6Openlayers3实践71地图显示71.1创建一副地图71.2剖析你的地图81.3Openlayers的资源112图层与资源122.1网络地图服务图层122.2瓦片缓存142.3专有栅格图层(Bing)182.4矢量图层202.5矢量影像233控件与交互24
6、3.1显示比例尺243.2选择要素263.3绘制要素29OpenLayers3入门教程
7、413.4修改要素314矢量样式334.1矢量图层格式334.2矢量图层样式354.3设置矢量图层的样式38OpenLayers3入门教程
8、41基本概念MapViewSourceLayerMapOpenLayers3的核心部件是Map(ol.Map)。它被呈现到对象target容器(例如,包含在地图的网页上的div元素)。所有地图的属性可以在构造时进行配置,或者通过使用setter方法,如setTarget()。9、="map"style="width:100%,height:400px">
9、="map"style="width:100%,height:400px">
10、41一个ol.View实例包含投影projection,该投影决定中心center 的坐标系以及分辨率的单位,如果没有指定(如下面的代码段),默认的投影是球墨卡托(EPSG:3857),以米为地图单位。放大zoom 选项是一种方便的方
11、式来指定地图的分辨率,可用的缩放级别由maxZoom (默认值为28)、zoomFactor (默认值为2)、maxResolution (默认由投影在256×256像素瓦片的有效成都来计算)决定。起始于缩放级别0,以每像素maxResolution 的单位为分辨率,后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的,直到缩放级别达到maxZoom 。map.setView(newol.View({center:[0,0],zoom:2}));SourceOpenLayers3使用ol.
12、source.Source子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如OpenStreetMap、Bing、OGC资源(WMS或WMTS)、矢量数据(GeoJSON格式、KML格式…)等。varosmSource=newol.source.OSM();Layer一个图层是资源中数据的可视化显示,OpenLayers3包含三种基本图层类型:ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。OpenLayers3入门教程
13、41ol.layer.Tile用于显示
14、瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图片网格组成。ol.layer.Image用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。ol.layer.Vector用于显示在客户端渲染的矢量数据。varosmLayer=newol.layer.Tile({source:osmSource});map.addLayer(osmLayer);总结上述片段可以合并成一个自包含视图和图层的地图配置:15、>
15、>
16、41Openlayers3实践1地图显示1.1创建一副地图在open
此文档下载收益归作者所有