logo资料库

OpenLayers3-入门教程详细版.docx

发布时间：2022-05-30 发布人：admin 分类：说明书 资料大小：1.88M 资料格式：docx 举报 版权申诉
第1页 / 共41页
第2页 / 共41页
第3页 / 共41页
第4页 / 共41页
第5页 / 共41页
第6页 / 共41页
第7页 / 共41页
第8页 / 共41页
资料共41页，剩余部分请下载后查看
    基本概念
    Map
    View
    Source
    Layer
    总结
    Openlayers 3实践
    1 地图显示
    1.1创建一副地图
    1.2 剖析你的地图
    1.2.1 地图标记
    1.2.2 地图样式
    1.2.3 地图初始化
    1.3 Openlayers的资源
    1.3.1 通过示例学习
    1.3.2查看API参考
    2 图层与资源
    2.1 网络地图服务图层
    2.1.1 创建图层
    2.1.2 The ol.layer.Tile构造函数
    2.1.3 The ol.source.TileWMS构造函数
    2.2 瓦片缓存
    2.2.1 ol.source.XYZ
    2.2.2 ol.source.OSM
    2.2.2.1 投影
    2.2.2.2 图层创建
    2.2.2.3 样式
    2.2.2.4 属性控件配置
    2.3 专有栅格图层（Bing）
    2.4 矢量图层
    2.4.1 添加矢量图层
    2.4.2 详细说明
    2.5 矢量影像
    2.5.1 ol.source.ImageVector
    2.5.2 详细说明
    3 控件与交互
    3.1 显示比例尺
    3.1.1创建比例尺
    3.1.2 移动比例尺控件
    3.2 选择要素
    3.3 绘制要素
    3.4 修改要素
    4 矢量样式
    4.1矢量图层格式
    4.1.1 ol.format
    4.2矢量图层样式
    4.2.1 基础样式
    4.2.2 符号化 
    4.2.3 ol.style.Style
    4.2.4 伪类
    4.3 设置矢量图层的样式
    OpenLayers 3 入门教程 摘要 OpenLayers 3 对 OpenLayers 网络地图库进行了根本的重新设计。版本 2 虽然被广泛使用，但 从 JavaScript 开发的早期发展阶段开始，已日益现实出它的落后。 OL3 已运用现代的设计模式 从底层重写。 最初的版本旨在支持第 2 版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢 量数据格式。与版本 2 一样，数据可以被任意投影。最初的版本还增加了一些额外的功能，如 能够方便地旋转地图以及显示地图动画。 OpenLayers 3 同时设计了一些主要的新功能，如显示三维地图，或使用 WebGL 快速显示大型 矢量数据集，这些功能将在以后的版本中加入。 自由分享-harryfly
    目录 基本概念 Map View Source Layer 总结 Openlayers 3 实践 1 地图显示 1.1 创建一副地图 1.2 剖析你的地图 1.3 Openlayers 的资源 2 图层与资源 2.1 网络地图服务图层 2.2 瓦片缓存 2.3 专有栅格图层（Bing） 2.4 矢量图层 2.5 矢量影像 3 控件与交互 3.1 显示比例尺 OpenLayers 3 入门教程 | 1 3 3 3 4 4 5 6 6 6 7 10 11 11 13 17 19 22 23 23
    3.2 选择要素 3.3 绘制要素 3.4 修改要素 4 矢量样式 4.1 矢量图层格式 4.2 矢量图层样式 4.3 设置矢量图层的样式 OpenLayers 3 入门教程 | 2 25 28 30 32 32 34 37
    OpenLayers 3 入门教程 | 3 基本概念 Map OpenLayers 3 的核心部件是 Map（ol.Map）。它被呈现到对象 target 容器（例如，包含 在地图的网页上的 div 元素）。所有地图的属性可以在构造时进行配置，或者通过使用 setter 方 法，如 setTarget（）。
    View ol. View 负责地图的中心点，放大，投影之类的设置。
    OpenLayers 3 入门教程 | 4 一个 ol.View 实例包含投影 projection，该投影决定中心 center 的坐标系以及分辨率的 单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地 图单位。 放大 zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由 maxZoom （默 认值为 28）、zoomFactor （默认值为 2）、maxResolution （默认由投影在 256×256 像素瓦片 的有效成都来计算） 决定。起始于缩放级别 0，以每像素 maxResolution 的单位为分辨率，后续 的缩放级别是通过 zoomFactor 区分之前的缩放级别的分辨率来计算的，直到缩放级别达到 maxZoom 。 map.setView(new ol.View({ center: [0, 0], zoom: 2 })); Source OpenLayers 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。
    OpenLayers 3 入门教程 | 5 ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级 别组织的瓦片图片网格组成。 ol.layer.Image 用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。 ol.layer.Vector 用于显示在客户端渲染的矢量数据。 var osmLayer = new ol.layer.Tile({source: osmSource}); map.addLayer(osmLayer); 总结 上述片段可以合并成一个自包含视图和图层的地图配置：
    OpenLayers 3 入门教程 | 6 Openlayers 3 实践 1 地图显示 1.1 创建一副地图 在 openlayers 中，Map 是图层、各种交互以及处理用户交互控件的集合，地图由三个基本 成分生成：标记，样式声明和初始化代码。以下是一个完整的 OpenLayers3 地图示例。 OpenLayers 3 example

    My Map

    （1） 下载 https://github.com/openlayers/ol3-workshop/archive/resources.zip，并将该 文件夹放在网络服务器的根目录下； （2） 创建一个新的文件，命名为 map.html，将以上代码复制进该文件后放入下载的文件 夹的根目录下； （3） 在浏览器中输入：http://localhost:8000/ol_workshop/map.html，我们将打开一个 工作的地图。 成功地创建了第一张地图，我们将继续关注地图的组成部分，详见 1.2 。 1.2 剖析你的地图
    分享到：
    赞 收藏

    相关推荐

    资料库

    开发技术

    共收录19306份资料，累计14个分类，关注成员有19位，主要包括：Actionscript,Javascript,PHP,VB,Perl,Delphi,Python,C#,C,Java,C++,Web开发,硬件开发,其它

    热门标签

    Actionscript Javascript PHP VB Perl Delphi Python C# C Java C++ Web开发 硬件开发 其它

    最新资料