OpenLayer学习之矢量地图

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

 

矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,矢量地图放大和缩小不会失真(图片你要是放大一定程度明显可以看出一个一个小格→栅格地图的缺点)。为了便于存储,传递,使用,矢量地图会按照一定的格式来表达,比如常见的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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570726.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件拷贝(字符、字节)

1.字节流byte:读入到字节数组后,返回一个长度len,如果没有读到数据,len-1 2.字符流char:同样是-1 3.代码生成器:null 一行一行地读 4.键盘录入,写入文件 5.构造器,追加用true 6.类…

HBae找不到协处理器导致RegionServer全部挂掉

一、问题背景: 跟兄弟单位公用一个大数据集群,通过Dataspace结合Kerberos控制数据的访问,我们生产环境中用到的OLAP工具Kylin,在升级Kylin的过程中,由于删除了旧的协处理器,导致原来数据继续去寻找目标协处…

Spark SQL的整体实现逻辑

1、sql语句的模块解析 当我们写一个查询语句时,一般包含三个部分,select部分,from数据源部分,where限制条件部分,这三部分的内容在sql中有专门的名称: 当我们写sql时,如上图所示,在进…

Mysql的高可用方案及主从详细配置

1、常用的高可用MySQL解决方案: 数据库作为最基础的数据存储服务之一,在存储系统中有着非常重要的地位,因此要求其具备高可用性无可厚非。能实现不同SLA(服务水平协定)的解决方案有很多种,这些方案可以保证数据 库服务器在硬件或…

vue3+element plus组件库中el-carousel组件走马灯特效,当图片变动时下面数字也随着图片动态变化

1.效果图 2.html <section style"height:30%"><div class"left-img1-title"><img src"../assets/img/title.png"alt""srcset""><div class"text">回收垃圾数量</div></div>…

数据库MySQL/mariadb知识点——数据类型

数据类型 所谓的列类型&#xff0c;其实就是指数据类型&#xff0c;即对数据进行统一的分类&#xff0c;从系统的角度出发是为了能够使用统一的方式进行管理&#xff0c;更好的利用有限的空间。 在 SQL 中&#xff0c;将数据类型分成了三大类&#xff0c;分别为&#xff1a;数值…

期货大赛项目|九,fileinput插件的应用

引入JS和CSS bundles.Add(new ScriptBundle("~/bundles/fileinputJs").Include( "~/Content/vendors/bootstrap-fileinput-master/js/fileinput.min.js", "~/Content/vendors/bootstrap-fileinput-master/js/locales/zh.js", "~/Scripts/fi…

PLSQL中文显示乱码(问号)

1、输入 select * from V$NLS_PARAMETERS 查看第一行value值是否为简体中文 simplified chinese 实际显示为&#xff1a;AMERICAN 2、设置本地环境变量 &#xff1a;NLS_LANG NLS_LANGAMERICAN_AMERICA.ZHS16GBK NLS_LANG的值为三个划线值拼接而成。 3、重新打开PLSQL…

Mybatis下collections使用pageHelper进行分页

pageHelper在对mybatis一对多分页时造成查询总页数结果不对的情况。 可以做出如下修改&#xff1a; service层&#xff1a; public CommonResult worksList(String userId, int page, int pageSize) throws Exception { PageHelper.startPage(page, pageSize); List<…

解决ubuntu系统root用户下Chrome无法启动问题

说明&#xff1a;本文转载自-https://www.cnblogs.com/hbsygfz/p/8409517.html 由于ubuntu16.04系统自带的是Firefox浏览器&#xff0c;需要安装Chrome浏览器&#xff0c;但是在root用户下安装后发现&#xff0c;Chrome无法正常启动。安装及问题解决具体如下&#xff1a; 1. …

mysql ERROR 1045 和2058时(28000): 错误解决办法

mysql ERROR 1045 (28000): 错误解决办法 听语音|浏览&#xff1a;54286|更新&#xff1a;2018-02-23 14:34|标签&#xff1a;mysql 1234567分步阅读ERROR 1045 (28000): Access denied for user ODBClocalhost (using password: NO) ERROR 1045 (28000): Access denied for us…

maven POM总结

可继承的字段 version property 其他占坑&#xff1a; parent import scope Dependency_Management中的scope是可以被继承的&#xff0c;http://maven.apache.org/pom.html#Dependency_Management name 不可继承 artifactId 不可继承 &#xff0c; 确定打包的最终名称。 这个…

JVM从入门到放弃——JVM内存模型

前言 Java和C或者是C相比较而言&#xff0c;最大的区别是C系列的程序员在编写代码的时候&#xff0c;总是要对程序中的变量进行释放内存的操作&#xff0c;所以在编写C或者是C的程序员需要格外的谨慎&#xff0c;因为他们对程序的内存有着很高的权限&#xff0c;这样虽然是特点…

485. Max Consecutive Ones - LeetCode

Question 485. Max Consecutive Ones Solution 题目大意:给一个数组,取连续1的最大长度 思路:遍历数组,连续1就加1,取最大 Java实现: public int findMaxConsecutiveOnes(int[] nums) {if (nums null) return 0;int result 0;int tmp 0;for (int i : nums) {if (i 1) {tmp;…

MacBook创建docker私有仓库docker server gave HTTP response to HTTPS client 问题处理办法

在 mac上搭建一个私有仓库&#xff0c;在向仓库push镜像时&#xff0c;会报如下错误&#xff1a; #docker push 192.168.163.131:5000/test Get https://192.168.163.131:5000/v1/_ping: http: server gave HTTP response to HTTPS client 百度了下答案发现都不试用mac版本的d…

Redis基础1(定义及基础)

Redis 定义&#xff1a;Redis是一个软件&#xff0c;帮助开发者对一台机器的内存进行操作 安装redis软件方法&#xff1a; 超链接地址&#xff1a;https://www.cnblogs.com/L5251/articles/9146881.html Python中下载依赖包 pip3 install redis 测试Redis是否安装成功 # 1、引入…

vue-cli安装

、安装vue-cli 命令&#xff1a;npm install vue-cli -g -g表示全局安装 2、初始化项目 命令&#xff1a;vue init webpack my-project 使用vue命令初始化项目&#xff0c;并使用webpack打包 此时会跳出一系列问题&#xff0c;除了eslint那一项&#xff0c;其余的均可回答yes&a…

修复病毒破坏的文件关联并恢复程序图标

1.破坏文件关联的两种方式&#xff1a; &#xff08;1&#xff09;修改特定扩展名文件的对应名称。以.exe文件为例&#xff1a; 正常注册表中&#xff0c;.exe文件对应名称为&#xff1a; HKEY_CLASSES_ROOT\.exe &#xff08;默认&#xff09; exefile 病毒为…

双击程序后系统弹框“您无权访问此程序”的解决办法

xp下&#xff1a;我的电脑>工具>文件夹选项>查看&#xff0c;勾掉使用简单文件共享选项。如下图&#xff1a; 此时&#xff0c;在右键点击程序图标时&#xff0c;选项卡中会出现“安全”选项卡。如下图&#xff1a; 修改everyone为Administrator...并设置完全控制权限…

adb常用操作命令

1、adb devices 查看当前链接设备&#xff0c;列出连接到计算机的Android设备或者模拟器 2、adb install <apk文件路径> 安装软件 3、adb uninstall <软件名> 卸载apk之前要先查看报名&#xff1a; 知晓包名之后&#xff0c;就可以运用命令卸载该APK 4、adb shell …