一、首先了解下矢量地图和栅格地图

矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,矢量地图放大和缩小不会失真(图片你要是放大一定程度明显可以看出一个一个小格→栅格地图的缺点)。为了便于存储,传递,使用,矢量地图会按照一定的格式来表达,比如常见的GeoJSONTopoJSONGMLKMLShapeFile等等。 除了最后一个ShapeFile,其他几个格式的矢量地图OpenLayers 3都支持,使用起来也是非常的简单。

二、矢量图层的构成

矢量图层是在客户端渲染的,在 web 环境中,对应的就是浏览器。构成一个矢量图层的包含一个数据(source)和一个样式(style),数据构成矢量图层的要素,样式规定要素显示的方式和外观。一个初始化成功的矢量图层包含一个到多个要素(feature),每个要素由地理属性(geometry)和多个其他的属性,可能包含名称等。

三、初始化图层:

new ol.layer.Vector({source: new ol.source.Vector({url: '../data/geojson/line-samples.geojson',     // 地图来源format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类})})
  • 加载代码之所以这么简单,是因为OpenLayers 3内置了对应矢量地图格式的解析类,比如ol.format.GeoJSON。 它们都位于包ol.format下面,可以在API官方文档中查询得到。 如果是shapefile这种不支持的,则需要自己解析。 解析后,矢量地图都会转换为对应于OpenLayers 3中的feature。 所以,当加载完成后,可以通过sourcegetFeatures方法来获取所有的矢量图形。
  • 需要注意坐标系,因为.geojson文档里用的是和当前地图用的不一样的坐标系。

四、获取得要素

那么,在一个矢量图层中怎么取得它的某个 feature 呢,一般的想法是 vector.getFeature(),其实不是的,vector 的数据包含在 source 中,要取得 vector 的 feature 数据,要在 source 中,例如 vector.getSource().getFeatures(),该函数会返回一个 feature array,直接使用 [ ],取用即可,或者根据要素的 ID 取得(getFeatureById())。

同样的,只要数据相关的操作,都要得到 vector 的 source 实例,然后进行操作,例如 添加要素(addFeature)、删除要素(removeFeature),对每个要素进行相同的操作(forEachFeature)。

五、取得要素的 geometry

利用 getGeometry() 可以获得要素的地理属性,这个函数当然返回要素包含的 geometry,geometry 包含很多类型,主要有 point、multi point、linear ring、line string、multi line string、polygon、multi polygon、circle。

取得 geometry 后,就可以获得要素的坐标了,可以根据坐标做一些地理判断,比如判断 一个坐标是否位于要素内(containsCoordinate(coordinate) 或者 containsXY(x, y)),取得要素的中心坐标等。

转载于:https://www.cnblogs.com/tuboshu/p/10752387.html

OpenLayer学习之矢量地图相关推荐

  1. OpenLayers之多源数据加载七:矢量地图

    一.矢量地图介绍 矢量地图的图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小. 矢量图形最大的优点是无论 ...

  2. Tesla AI Day视觉自动驾驶技术解读:感知+规划+矢量地图+自动标注+仿真

    作者 | 赵行  编辑 | 汽车人 原文链接:https://zhuanlan.zhihu.com/p/570824078 点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干 ...

  3. Autoware实车测试记录(一)--前期准备以及使用Autoware Maptool插件进行矢量地图的绘制

    一.前言 前段时间一直在学习Lio-sam的程序,在学习完源码后继续学习开源的自动驾驶软件Autoware,这个软件可以看作是很多功能包的集合,在一个人机交互界面对各个模块功能进行参数设置.启动和关闭 ...

  4. OpenLayer学习之OGC数据

    一.OGC简介 OGC是一个开源GIS公益行业协会,致力于促进采用新的技术和商业方式来提高地理信息的互操作性,OGC也推出了支持OGC规范的WebGIS产品.WebGIS 遵循OGC的规范已经成为地理 ...

  5. 矢量地图包——让移动端地图飞起来

    众所周知,由于移动设备自身的限制,对移动端地图数据的要求一般比桌面端更高,而矢量地图包性能高.显示好.体积小.更新快.易传输等特点,恰恰满足了移动端的需求.正因如此,二者成为完美搭档,擦出了美妙的火花 ...

  6. 特斯拉自动驾驶算法和模型解读(感知/规划/矢量地图/自动标注等)

    编辑 | 焉知汽车 点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干货,即可获取 点击进入→自动驾驶之心[全栈算法]技术交流群 特斯拉是一个典型的AI公司,过去一年训练了7 ...

  7. 超棒的jQuery矢量地图生成插件 - JQVAMP

    为什么80%的码农都做不了架构师?>>>    日期:2012-5-14  来源:GBin1.com 在线演示  本地下载 是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款j ...

  8. 自定义数据格式的矢量地图实现

    Update *原文链接:http://blog.csdn.net/tyc129/article/details/70477131* 项目已重构至2.0,启用了新的数据结构和代码结构.基本弥补了初版的 ...

  9. Cesium矢量地图插件CesiumVectorTile 发布新版本

    Cesium矢量地图插件CesiumVectorTile 发布新版本 一周前CesiumVectorTile 1.2.1版本就已经更新到npm里了,本次更新主要解决Cesium最新版本适配问题. Ce ...

最新文章

  1. .net中使用反射的简单例子
  2. linux I/O--五种I/O模型(一)
  3. 043_CSS32D转换
  4. ctf php sql注入,CTF—攻防练习之HTTP—SQL注入(SSI注入)
  5. LeetCode 1941. 检查是否所有字符出现次数相同
  6. MySQL将一张表数据插入到另一张表
  7. 7-13爬虫入门之BeautifulSoup对网页爬取内容的解析
  8. 将原生安卓项目封装为cordova插件实例分析
  9. 对Ajax返回的json数据做处理报错
  10. ​【UI界面】Foobar2000 FlatLite 整合版
  11. 编译原理第一章笔记--绪论
  12. 软件测试方法-测试用例
  13. 自己建设网站需要学习什么?
  14. 蒟蒻信安笔记4:CTF实践
  15. 偏微分方程1-常微分方程求解方法回顾
  16. STM32F7--->FMC(可变存储控制器) Flexible Memory Controller
  17. 亚马逊如何创业?身为小白的我适合创业亚马逊吗
  18. 认识LTE(六): LTE中的信道特征以及信道估计技术
  19. 解析|当前企业OA系统面对的困难与解决方案
  20. python计算给定的日期的星期_Python计算给定日期的周内的某一天

热门文章

  1. vc2010 mysql5.7_VC2010利用MySQL++访问mysql. 及连接池示例
  2. byte转换为string乱码_每日一课 | 如何将int转换为String
  3. uniapp防抖操作
  4. Redis 实用技术——事务
  5. Spring Boot————Spring Boot启动流程分析
  6. 图 之遍历----深度优先遍历0.o
  7. 计算机科学陈国华,科学网—模式识别与智能系统是个什么专业? - 晏燕华的博文...
  8. 判断html()中有长度,VBS 字符串长度判断的问题
  9. Android实现自定义相册,在Android Gallery App中创建自定义相册
  10. 基于javaweb(springboot+mybatis)网上酒类商城项目设计和实现以及文档报告