解析OpenLayers|解析OpenLayers 3加载矢量地图源的问题
一、矢量地图
矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得,所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用,是地图数据中非常重要的组成部分。
为了便于存储,传递,使用,矢量地图会按照一定的格式来表达,比如常见的GeoJSON
,TopoJSON
,GML
,KML
,ShapeFile
等等。 除了最后一个ShapeFile
,其他几个格式的矢量地图OpenLayers 3都支持。
二、使用GeoJson格式加载矢量地图
【解析OpenLayers|解析OpenLayers 3加载矢量地图源的问题】1、项目结构
文章图片
2、map.geojson
文章图片
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.738294707383368],[104.18060302734375,30.691068801620155],[104.22042846679688,30.739475058679485],[104.08859252929688,30.738294707383368]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],[104.08859252929688,30.52323029223123]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,30.51494904517773],[103.86474609375,30.682801890953776],[103.70269775390624,30.675715404167743]]]}}]}3、map.html
OpenLayers 3 :加载矢量地图 - 锐客网
4、运行结果
文章图片
三、获取矢量地图上的所有Feature,并设置样式 1、map2.html
OpenLayers 3 :获取矢量地图上的所有Feature,并设置样式 - 锐客网
2、运行结果
文章图片
文章图片
4、矢量地图坐标系转换
矢量地图用的是
EPSG:4326
,我们可以通过OpenLayers 3内置了地图格式解析器,将坐标转换为EPSG:3857
1、map3.html
OpenLayers 3 :矢量地图坐标系转换 - 锐客网
2、运行结果
文章图片
到此这篇关于OpenLayers 3加载矢量地图源的文章就介绍到这了,更多相关OpenLayers 3加载矢量地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 使用composer自动加载类文件
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)
- [源码解析]|[源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3)
- Android系统启动之init.rc文件解析过程
- 小程序有哪些低成本获客手段——案例解析
- Spring源码解析_属性赋值
- 众泰T500智能互联双加载,让汽车生活更有趣
- ImageLoaders 加载图像
- Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门