├── contents ├── ch-preface │ └── index.md ├── codes │ └── example.html ├── ch-ol5-intro │ ├── first-knowledge.md │ └── index.md ├── readme.md ├── book.json └── Summary.md ├── README.md ├── LICENSE └── Development.md /contents/ch-preface/index.md: -------------------------------------------------------------------------------- 1 | # 序言 2 | [import,lang:"html"](../codes/example.html) -------------------------------------------------------------------------------- /contents/codes/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 张三是一个厉害的人。 4 | 5 | -------------------------------------------------------------------------------- /contents/ch-ol5-intro/first-knowledge.md: -------------------------------------------------------------------------------- 1 | # 初识OpenLayers 5 2 | OpenLayers的官网声称：OpenLayers能让你非常容易地构建一个动态地图于任意的网页中。 -------------------------------------------------------------------------------- /contents/ch-ol5-intro/index.md: -------------------------------------------------------------------------------- 1 | # OpenLayers 5介绍 2 | 本章节将对OpenLayers做一个简单的介绍，从解决的业务问题出发，结合行业发展，应用需求，逐步扩展到其具备的功能特点和优势，以及发展历史。 -------------------------------------------------------------------------------- /contents/readme.md: -------------------------------------------------------------------------------- 1 | # OpenLayers 5 Primer 2 | 3 | 这是一本面向中国的OpenLayers V5版本初学者的入门教程。如果您是OpenLayers最新版本的初学者，该教程将帮助您降低学习曲线。如果您是OpenLayers旧版本的使用者，该教程将帮助您快速入手最新版本。 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ol5-primer 2 | ## 概要 3 | 这是一本OpenLayers 5的入门教程，由众多OpenLayers爱好者一起编写，本着回馈社区，帮助更多初学者，爱好者的心愿，走到了一起，共同编写这本教程。同时，我们也期待更多的同仁参与，我们相信您的参与，必然会带来更多帮助，打造更好的教程。 4 | 5 | ## 教程 6 | * 整个教程的目录请移步到[ol5-primer目录](./contents/Summary.md)。 7 | * 本教程还在不断完善中，一旦修订完成，就会上线。 8 | * 作为一本入门教程，**简单明了，通俗易懂**是我们追求的目标。 9 | * 作为一本入门教程，**准确无误**是第一要务，我们当竭尽全力，也期待大家的反馈。 10 | 11 | ## 参与方式 12 | * 如果您有意愿参与，请参考[Development](./Development.md)。 13 | * 如果您有新的建议或者问题，可以直接提issue，相信您的参与会帮助到更多的人。 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 openlayer-tutorial-group 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /contents/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": "3.x.x", 3 | "title": "OpenLayers 5 Primer", 4 | "description": "这是一本为初学者准备的OpenLayers 5入门书籍", 5 | "structure": { 6 | "readme": "readme.md", 7 | "summary": "summary.md" 8 | }, 9 | "plugins": [ 10 | "-lunr", "-search", "search-pro", 11 | "baidu", 12 | "katex", 13 | "github-buttons", 14 | "github", 15 | "include-codeblock", 16 | "ace", 17 | "chapter-fold" 18 | ], 19 | "pluginsConfig": { 20 | "theme-default": { 21 | "showLevel": true 22 | }, 23 | "baidu": { 24 | "token": "598c9c941360724a65331e7d9a66c9b6" 25 | }, 26 | "search": { 27 | "maxIndexSize": 10000 28 | }, 29 | "github-buttons":{ 30 | "buttons": [{ 31 | "user": "openlayer-tutorial-group", 32 | "repo": "ol5-primer", 33 | "type": "star", 34 | "size": "small", 35 | "count": true 36 | },{ 37 | "user": "openlayer-tutorial-group", 38 | "repo": "ol5-primer", 39 | "type": "watch", 40 | "size": "small", 41 | "count": true 42 | }] 43 | }, 44 | "github": { 45 | "url": "https://github.com/openlayer-tutorial-group/ol5-primer" 46 | }, 47 | "include-codeblock": { 48 | "template": "acefull", 49 | "unindent": true, 50 | "theme": "monokai" 51 | }, 52 | "sharing": { 53 | "facebook": false, 54 | "twitter": true, 55 | "google": false, 56 | "weibo": true, 57 | "instapaper": false, 58 | "vk": false, 59 | "all": [ 60 | "weibo", 61 | "facebook", 62 | "google", 63 | "twitter" 64 | ] 65 | }, 66 | "chapter-fold":{} 67 | } 68 | } -------------------------------------------------------------------------------- /Development.md: -------------------------------------------------------------------------------- 1 | # 教程编写说明 2 | ---- 3 | ## 1. 首要说明 4 | * 首要申明：教程组的所有成员是一个团队，而不是团体，**相互尊重，相互帮助，团结共进**。 5 | * 作为一本入门教程，**责任重大**，团队所有成员应竭尽全力确保教程内容**准确无误**，切忌误人子弟。 6 | * 作为一本入门教程，理应做到**简洁明了，通俗易懂**，凡是能达成该目的所有技术手段和呈现方式都值得提倡。 7 | ## 2. 注意事项 8 | * 请尽量使用中文，专业术语除外，比如OpenLayers，WMTS，TMS等 9 | * 本教程采用GitBook工具来生成教程，在参与教程编写之前，请先自行学习了解GitBook，Markdown的相关知识（可参见[GitBook 使用教程][1]和[Markdown语法][2]）。 10 | * GitBook使用3.x.x版本，适配的Node版本要小于等于6，否则不行。 11 | ## 3. 编写规范 12 | * 教程编写采用认领制，具体参见下面的认领制度。 13 | * 编写时，请先Fork项目，在Fork出来的项目中编写，然后PR到本项目。经过团队两人以上的Review通过后，方能合入。 14 | * 如果因为有事不能如期完成认领任务，需要反馈给我们的Master，并提交自己完成的部分，方便后续其他认领者接着做。如果过期没完成，也没有反馈，我们将会直接征求其他同学来认领，以保障整个教程持续下去。 15 | * 目录结构规范： 16 | * 教程相关的信息都在contents目录里面; 17 | * 相关章节的文档都按照章节放在contents/chxxx目录下； 18 | * 文件命名按照章节编号命名，并遵循层级目录结构。例如：第一章的主页面命名为contents/ch-xxx/index.md(xxx根据章节自定义命名，取一个有意义的名字，同时避免同其他章节同名，只有章节主页面可以命名为index.md)，第一章第一节页面命名为contents/ch-xxx/xxx.md; 如果第一章第一节下面还有子级，需要按层次创建目录，并命令为contents/ch-xxx/xxx/index.md, contents/ch-xxx/xxx/xxx.md；例如： 19 | * ch-view 20 | - index.md 21 | - view-dev 22 | + move-map.md 23 | + view-range.md 24 | 25 | * 用到的示例代码统一放在contents/codes下面，并按照文档目录结构存放； 26 | * 图片统一放在contents/images下面，并按照文档目录结构存放； 27 | * 在文档中添加示例代码，统一使用GitBook插件include-codeblock引入展示，插件已配置好，仅需要在编写文档时，用[import](path/document.md)来引入，更详细的语法参见[include-codeblock插件主页][3] 28 | ## 4. 认领制度流程 29 | * 认领前请查看最新目录章节的认领情况，选择未认领的章节进行认领。 30 | * 通过在企划群里面发消息（认领的章节及详细时间周期）给SM申请认领。 31 | * 团队讨论确认后，回复消息给认领人，通知认领成功与否。 32 | * 认领成功后，目录章节会更新认领情况。 33 | ## 5. 交流工具 34 | * 目前采用QQ群进行沟通协作，有问题及需要都可以加入QQ群693790689。 35 | * 有任何和教程相关的问题，可以在群里找我们的ScrumMaster，或者管家，ScrumMaster和管家在群名片都有备注。 36 | ## 6. GitBook环境简要搭建 37 | * 安装node v6的版本和对应的npm。 38 | * 执行命令`npm install -g gitbook-cli`安装对应的命令行工具。 39 | * 进入目录contents。 40 | * 执行命令`gitbook init`进行初始化。 41 | * 执行命令`gitbook install`安装相应的插件。 42 | * 执行命令`gitbook build`进行构建。 43 | * 执行命令`gitbook serve`启动服务，在浏览器访问[http://localhost:4000][4]即可看到教程页面。 44 | 45 | 46 | [1]: https://www.jianshu.com/p/421cc442f06c 47 | [2]: http://gitbook.hushuang.me/syntax/markdown.html 48 | [3]: https://plugins.gitbook.com/plugin/include-codeblock 49 | [4]: http://localhost:4000 -------------------------------------------------------------------------------- /contents/Summary.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](readme.md) 4 | * [序言](ch-preface/index.md) 5 | 6 | ### 入门 7 | * [OpenLayers 5 介绍](ch-ol5-intro/index.md) 8 | * [初识OpenLayers 5](ch-ol5-intro/first-knowledge.md) 9 | * OpenLayers的应用场景 10 | * OpenLayers 5组成部分 11 | * 官网Example和API说明 12 | * 地图实战 13 | * 环境搭建 14 | * 构建一个地图页 15 | * 认识地图组件 16 | * 解析地图代码 17 | * 同框架集成 18 | * 同VUE集成 ([@alex2wong](https://github.com/alex2wong) 3.4-3.31) 19 | * 同React集成 ([@Liquid-Zhangliquan](https://github.com/Liquid-Zhangliquan) 3.3-3.31) 20 | * 同Angular集成 21 | * 基本应用开发 22 | * 基本要素应用开发 23 | * 添加、修改、删除图标 24 | * 添加、修改、删除线 25 | * 添加、修改、删除多边形 26 | * 添加、修改、删除Overlay 27 | * 地图控件应用开发 28 | * 应用缩放控件 29 | * 应用比例尺控件 30 | * 应用旋转控件 31 | * 应用鼠标位置控件 32 | * 应用全屏控件 33 | 34 | ### 进阶 35 | * View详解 36 | * 理解View 37 | * 理解坐标系统 38 | * View开发 39 | * 控制地图移动 ([@pointGH](https://github.com/pointGH) 3.2-3.31) 40 | * 控制显示范围 ([@pointGH](https://github.com/pointGH) 3.2-3.31) 41 | * 控制缩放层级 42 | * Source与Layer详解 43 | * 添加多个图层 44 | * Source与Layer之间的关系 45 | * 应用不同类型的图层 46 | * 应用矢量图层 47 | * 应用标量图层 48 | * 控制多个图层 49 | * 瓦片地图 50 | * 最简单的瓦片地图加载方式 51 | * 万能瓦片地图加载秘籍 52 | * 样式应用 53 | * 改变基本要素的样式 54 | * 改变矢量图层的样式 55 | * 动态改变样式 56 | * 几种特殊样式 57 | * 自绘样式 58 | * 事件应用 59 | * 事件的作用 60 | * 常用事件 61 | * 使用事件 62 | * 自定义事件 63 | * 控件应用 64 | * 控件原理 65 | * 内置所有控件 66 | * 控件美颜 67 | * 自定义控件 68 | 69 | ### 高阶 70 | * LOD与分辨率 71 | * LOD原理 72 | * 瓦片计算 73 | * 分辨率 74 | * 自定义坐标系 75 | * 自定义瓦片地图及加载 76 | * 动画 77 | * 简单动画 78 | * 高级动画 79 | * 交互 80 | * 要素选取和识别 81 | * 修改、保存要素 82 | * 服务集成 83 | * 与GeoServer集成 84 | * 集成WMS服务 85 | * 集成WMTS服务 86 | * 集成WFS服务 87 | * 与arcgis集成 88 | * 集成WMS服务 89 | * 集成WMTS服务 90 | * 集成WFS服务 91 | * 与supermap集成 92 | * 通过WMS协议集成 93 | * 通过WMTS协议集成 94 | * 通过WFS协议集成 95 | * 组件集成 96 | * 集成echart ([@sakitam-fdd](https://github.com/sakitam-fdd) 3.4-3.15) 97 | * 集成D3 98 | * 集成threejs ([@萌萌哒的熊哥](https://github.com/kelina01) 3.4-6.4) 99 | 100 | ### 案例 101 | * 轨迹回放 102 | * 区域截图 103 | * 。。。。（征集） 104 | 105 | ### 深入解析 106 | * 框架解析 107 | * 源码解析 108 | * View源码解析 109 | * Source源码解析 110 | * Layer源码解析 111 | * 渲染流程源码解析 112 | * Canvas绘制源码解析 113 | * WebGL绘制源码解析 114 | * 。。。。（征集） 115 | 116 | ### 问题 117 | * 常见问题 118 | 119 | ### 附录 120 | * 常用地理坐标系 121 | * EPSG:3857 122 | * EPSG:4326 123 | * OGC翻译 ([@690788010](https://github.com/690788010])+[@leopold2019](https://github.com/leopold2019])+[@Homxu](https://github.com/homxuwang) 3.3-6.3) 124 | 125 | --------------------------------------------------------------------------------