![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
OpenLayers官方教程
JaedongXue
这个作者很懒,什么都没留下…
展开
-
openlayers官方教程(九)Vector Data——Downloading features
Downloading features在上传和编辑数据之后,我们想要用户来下载我们的结果。我们需要将数据序列化为GeoJSON格式,并且创建用于在浏览器中触发保存文件的downLoad属性。同时,我们添加一个...翻译 2018-05-29 19:04:38 · 947 阅读 · 0 评论 -
openlayers官方教程(十)Vector Data——Making it look nice
Making it look nice前面已经完成了基础的功能,包括导入、编辑、导出。但是没有做一下美化,当你创建了一个矢量图层,会默认很多样式。编辑过程中的交互也是默认的样式,你可能注意到在编辑过程中线条很粗,这个可以通过向矢量图层和交互提供style来控制这些属性。Static style如果我们给所有要素集定义通用的样式,可以如下配置:const layer = new VectorLaye...翻译 2018-05-29 22:06:31 · 747 阅读 · 1 评论 -
openlayers官方教程(四)Vector Data——Rendering GeoJSON
Rendering GeoJSON渲染GeoJson数据,以工程文件夹下data/countries.json为例,来导入此GeoJson数据并渲染。首先,编辑index.xml<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>OpenLayers&..翻译 2018-05-24 19:09:28 · 1295 阅读 · 0 评论 -
openlayers官方教程(三)Basics——Zooming to your location
Zooming to your location浏览器提供了获取用户当前位置的API,我们可以利用这个来定位当前用户所在。Application changes首先,将map赋值到一个常量,就可以从其他组件中获取mapconst map = new Map({在main.js中增加如下代码,来实现定位的功能navigator.geolocation.getCurrentPosition(funct...翻译 2018-05-24 18:44:23 · 990 阅读 · 0 评论 -
openlayers官方教程(二)Basics——Creating a map
Creating a mapWorking exampleThe markup首先,我们在工程目录下创建一个index.html文件,如下所示:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>OpenLayers</title>翻译 2018-05-24 18:36:17 · 2481 阅读 · 0 评论 -
openlayers官方教程(一)Introduction
近期开始学习openlayers,发现国内不少中文资源较老,还是看官方文档方便,根据自己的理解,把核心用博客记录下来,方便自己学习回顾。Setup这版说明是从获取openlayers-workshop-en.zip获取开始,去官网下载https://github.com/openlayers/workshop/releases解压后,dos命令切换到解压后的文件夹。npm install运行上面命...翻译 2018-05-24 18:16:54 · 20408 阅读 · 7 评论 -
openlayers官方教程(八)Vector Data——Snapping
Snapping你可能已经发现一个问题:虽然很容易就画出新的features,但是新画出的features跟原有的features没有拓扑关系。除此之外,当在修改features时,我们在多边形内增加洞会打断原有的拓扑结构。snap交互可以帮我在编辑和画features时候保持拓扑结构。第一步,同样是在main.js中导入Snap包import Snap from 'ol/interaction/...翻译 2018-05-25 12:22:38 · 2135 阅读 · 0 评论 -
openlayers官方教程(七)Vector Data——Drawing new features
Drawing new features前面两篇文章我们已经实现了数据的加载和修改,下一步来实现draw交互,可以使用户画新的features并添加到数据源中。首先第一步,还是在main.js中导入Draw包import Draw from 'ol/interaction/Draw';其次,创建一个draw交互并添加到矢量数据源map.addInteraction(new Draw({ typ...翻译 2018-05-25 12:22:27 · 560 阅读 · 0 评论 -
openlayers官方教程(六)Vector Data——Modifying features
Modifying features我们已经能够将数据载入,现在我们要去编辑这些features,利用Modify交互可以实现对矢量数据源的编辑首先,在main.js中导入Modify交互import Modify from 'ol/interaction/Modify';下一步,在矢量图层上创建一个新的交互,并添加到图层map.addInteraction(new Modify({ sour...翻译 2018-05-24 22:27:24 · 1127 阅读 · 0 评论 -
openlayers官方教程(五)Vector Data——Drag and drop
Drag and drop我们可以使用DragAndDrop来实现交互,之前我们通过GeoJSON来分析features,但是通过交互可以实现多个features的使用。首先,还是将Map建立常量map的引用:const map = new Map({在main.js中导入drag and drop interactionimport DragAndDrop from 'ol/interactio...翻译 2018-05-24 22:16:09 · 1080 阅读 · 0 评论 -
openlayers官方教程(十一)Vector Tiles——The VectorTile layer
The VectorTile layer我们已经知道如何载入瓦片图片,并且能够用不同的方法载入渲染矢量地图。但是我们如何能够用传输到浏览器更快的瓦片的同时,能够样式化数据?这就是矢量瓦片的作用,openLayer通过vectorTile层来支持矢量瓦片。A world map rendered from vector data同样需要在index.html中定义基础的东西:<!DOCTYPE...翻译 2018-05-29 22:26:14 · 9305 阅读 · 1 评论