电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

2015-OpenLayers-3-入门教程详细版

40页
  • 卖家[上传人]:日度
  • 文档编号:146032980
  • 上传时间:2020-09-25
  • 文档格式:DOCX
  • 文档大小:1.87MB
  • / 40 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 1、OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。最初的版本旨在支持第2版提供的功能,提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本2一样,数据可以被任意投影。最初的版本还增加了一些额外的功能,如能够方便地旋转地图以及显示地图动画。OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本中加入。目录基本概念4Map4View4Source5Layer5总结6Openlayers 3实践71 地图显示71.1创建一副地图71.2 剖析你的地图81.3 Openlayers的资源112 图层与资源122.1 网络地图服务图层122.2 瓦片缓存142.3 专有栅格图层(Bing)182.4 矢量图层202.5 矢量影像233 控件与交互243.1 显示比例尺243.2 选择要素263.3 绘制要素293.

      2、4 修改要素314 矢量样式334.1矢量图层格式334.2矢量图层样式354.3 设置矢量图层的样式38基本概念MapViewSourceLayerMapOpenLayers 3的核心部件是Map(ol.Map)。它被呈现到对象target容器(例如,包含在地图的网页上的div元素)。所有地图的属性可以在构造时进行配置,或者通过使用setter方法,如setTarget()。 var map = new ol.Map(target: map);Viewol. View负责地图的中心点,放大,投影之类的设置。一个ol.View实例包含投影projection,该投影决定中心center的坐标系以及分辨率的单位,如果没有指定(如下面的代码段),默认的投影是球墨卡托(EPSG:3857),以米为地图单位。放大zoom选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由maxZoom(默认值为28)、zoomFactor(默认值为2)、maxResolution(默认由投影在256256像素瓦片的有效成都来计算) 决定。起始于缩放级别0,以每像素maxResolution的单位为分辨率,

      3、后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的,直到缩放级别达到maxZoom。map.setView(new ol.View( center: 0, 0, zoom: 2 ); SourceOpenLayers 3使用ol.source.Source子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如OpenStreetMap、Bing、OGC资源(WMS或WMTS)、矢量数据(GeoJSON格式、KML格式)等。var osmSource = new ol.source.OSM();Layer一个图层是资源中数据的可视化显示,OpenLayers 3包含三种基本图层类型:ol.layer.Tile、ol.layer.Image和ol.layer.Vector。ol.layer.Tile 用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图片网格组成。 ol.layer.Image用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。ol.layer.Vector用于显示在客户端渲染的矢量数据。 var osmLayer

      4、 = new ol.layer.Tile(source: osmSource); map.addLayer(osmLayer);总结上述片段可以合并成一个自包含视图和图层的地图配置: new ol.Map( layers: new ol.layer.Tile(source: new ol.source.OSM() , view: new ol.View( center: 0, 0, zoom: 2 ), target: map );Openlayers 3实践1 地图显示1.1创建一副地图在openlayers中,Map是图层、各种交互以及处理用户交互控件的集合,地图由三个基本成分生成:标记,样式声明和初始化代码。以下是一个完整的OpenLayers3地图示例。 #map height: 256px; width: 512px; OpenLayers 3 example My Map var map = new ol.Map( target: map, layers: new ol.layer.Tile( title: Global Imagery, source: new ol.so

      5、urce.TileWMS( url: http:/maps.opengeo.org/geowebcache/service/wms, params: LAYERS: bluemarble, VERSION: 1.1.1 ) ) , view: new ol.View( projection: EPSG:4326, center: 0, 0, zoom: 0, maxResolution: 0.703125 ) ); (1) 下载https:/ 创建一个新的文件,命名为map.html,将以上代码复制进该文件后放入下载的文件夹的根目录下;(3) 在浏览器中输入:http:/localhost:8000/ol_workshop/map.html,我们将打开一个工作的地图。成功地创建了第一张地图,我们将继续关注地图的组成部分,详见1.2 剖析你的地图。1.2 剖析你的地图正如前一部分演示的那样,一副地图通过将标记,样式声明和初始化代码三部分组织在一起而生成,接下来将详细的介绍这三个组成部分。1.2.1 地图标记标记为上例中的地图生成的一个文档元素:在此示例中,我们用元素作为地图显示的容器,其

      6、他块级元素也能做视图的容器。在这种情况下,我们设置容器的id属性,所以我们可以将其作为地图的对象。1.2.2 地图样式OpenLayers带有一个默认的样式表,指定地图相关的元素应如何显示,我们明确的将样式表引用到map.html页面中。OpenLayers不对地图的大小做预定义,因此在默认样式表之后,我们需要包括至少一个自定义样式声明来说明地图在页面上的空间。 #map height: 256px; width: 512px; 在该示例中,我们使用地图容器的id值作为选择器,并明确定义地图容器的高为256px,宽为512px。样式声明直接包含在文档的部分。在大多数情况下,地图相关的样式说明是链接到外部样式表的一个大型主题网站的一部分。1.2.3 地图初始化生成地图的下一步包含一些初始化代码,在该示例中,我们在文档的前添加元素来实现。 var map = new ol.Map( target: map, layers: new ol.layer.Tile( source: new ol.source.TileWMS( url: http:/maps.opengeo.org/geowebcache/service/wms, params: LAYERS: bluemarble, VERSION: 1.1.1 ) ) , view: new ol.View( projection: EPSG:4326, center: 0, 0, zoom: 0, maxResolution: 0.703125 ) );注:这些步骤的顺序很重要,OpenLayers库必须在在自定义脚本执行之前加载,在此示例中,OpenLayers库在文档的部分加载()。同样的,在文档中作为显示容器的元素(该实例中为)准备好之前,自定义地图初始化代码是不能执行的,将初始化代码添加到文档中的后面,我们能在地图生成前,确保库已加载,显示容器已准备好。接下来,将详细介绍初始化脚本的内容。脚本创建了一个包含一些配置选项的ol.Map对象:target: map我们使用显示容器的id属性来告诉地图构造函数将地图交

      《2015-OpenLayers-3-入门教程详细版》由会员日度分享,可在线阅读,更多相关《2015-OpenLayers-3-入门教程详细版》请在金锄头文库上搜索。

      点击阅读更多内容
    新上传的WORD文档
    最新标签
    发车时刻表 长途客运 入党志愿书填写模板精品 庆祝建党101周年多体裁诗歌朗诵素材汇编10篇唯一微庆祝 智能家居系统本科论文 心得感悟 雁楠中学 20230513224122 2022 公安主题党日 部编版四年级第三单元综合性学习课件 机关事务中心2022年全面依法治区工作总结及来年工作安排 入党积极分子自我推荐 世界水日ppt 关于构建更高水平的全民健身公共服务体系的意见 空气单元分析 哈里德课件 2022年乡村振兴驻村工作计划 空气教材分析 五年级下册科学教材分析 退役军人事务局季度工作总结 集装箱房合同 2021年财务报表 2022年继续教育公需课 2022年公需课 2022年日历每月一张 名词性从句在写作中的应用 局域网技术与局域网组建 施工网格 薪资体系 运维实施方案 硫酸安全技术 柔韧训练 既有居住建筑节能改造技术规程 建筑工地疫情防控 大型工程技术风险 磷酸二氢钾 2022年小学三年级语文下册教学总结例文 少儿美术-小花 2022年环保倡议书模板六篇 2022年监理辞职报告精选 2022年畅想未来记叙文精品 企业信息化建设与管理课程实验指导书范本 草房子读后感-第1篇 小数乘整数教学PPT课件人教版五年级数学上册 2022年教师个人工作计划范本-工作计划 国学小名士经典诵读电视大赛观后感诵读经典传承美德 医疗质量管理制度 2 2022年小学体育教师学期工作总结 2022年家长会心得体会集合15篇
    关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
    手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
    ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.