OpenLayers 3加载矢量地图源

一、矢量地图

矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用，是地图数据中非常重要的组成部分。

为了便于存储，传递，使用，矢量地图会按照一定的格式来表达，比如常见的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。除了最后一个ShapeFile，其他几个格式的矢量地图OpenLayers 3都支持。

二、使用GeoJson格式加载矢量地图

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

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :加载矢量地图</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head><body><div id='map' style='width: 1000px;height: 800px;margin: auto'></div><script>/***  创建地图*/new ol.Map({// 设置地图图层layers: [//创建一个使用Open Street Map地图源的图层new ol.layer.Tile({source: new ol.source.OSM()}),//加载一个geojson的矢量地图new ol.layer.Vector({source: new ol.source.Vector({url: 'geojson/map.geojson',     // 地图来源format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类})})],// 设置显示地图的视图view: new ol.View({center: [104,30],       // 设置地图显示中心于经度104度，纬度30度处zoom: 10,           // 设置地图显示层级为10projection: 'EPSG:4326'     //设置投影}),// 让id为map的div作为地图的容器target: 'map'})</script>
</body>
</html>

4、运行结果

三、获取矢量地图上的所有Feature,并设置样式

1、map2.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :获取矢量地图上的所有Feature,并设置样式</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head><body><div id='map' style='width: 800px;height:500px;margin: auto'></div>
<br>
<div style='width: 800px;margin: auto'><button type="button" onclick = 'updateStyle()' >修改Feature样式</button>
</div><script>/***  创建地图*/var map = new ol.Map({// 设置地图图层layers: [//创建一个使用Open Street Map地图源的图层new ol.layer.Tile({source: new ol.source.OSM()}),],// 设置显示地图的视图view: new ol.View({center: [104,30],       // 设置地图显示中心于经度104度，纬度30度处zoom: 10,           // 设置地图显示层级为10projection: 'EPSG:4326'     //设置投影}),// 让id为map的div作为地图的容器target: 'map'});//创建一个矢量地图源图层，并设置样式var  vectorLayer =  new ol.layer.Vector({source: new ol.source.Vector({url: 'geojson/map.geojson',     // 地图来源format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类}),// 设置样式，颜色为绿色，线条粗细为1个像素style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'green',size: 1})})});map.addLayer(vectorLayer);/*** 获取矢量图层上所有的Feature,并设置样式*/function updateStyle(){//创建样式，颜色为红色，线条粗细为3个像素var  featureStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',size: 3})})//获取矢量图层上所有的Featurevar features =  vectorLayer.getSource().getFeatures()//遍历所有的Feature，并为每个Feature设置样式for (var i = 0;i<features.length;i++){features[i].setStyle(featureStyle)}}</script>
</body>
</html>

2、运行结果

4、矢量地图坐标系转换

矢量地图用的是EPSG:4326，我们可以通过OpenLayers 3内置了地图格式解析器，将坐标转换为EPSG:3857

1、map3.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta content='always' name='referrer'><title>OpenLayers 3 :矢量地图坐标系转换</title><link href='ol.css ' rel='stylesheet' type='text/css'/><script type='text/javascript' src='ol.js' charset='utf-8'></script><script src="jquery-3.6.0.js"></script>
</head><body><div id='map' style='width: 1000px;height: 800px;margin: auto'></div><script>/***  创建地图*/var map = new ol.Map({// 设置地图图层layers: [//创建一个使用Open Street Map地图源的图层new ol.layer.Tile({source: new ol.source.OSM()})],// 设置显示地图的视图view: new ol.View({center: ol.proj.fromLonLat([104,30]),       // 设置地图显示中心于经度104度，纬度30度处zoom: 10,           // 设置地图显示层级为10}),// 让id为map的div作为地图的容器target: 'map'});// 加载矢量地图function addGeoJSON(data) {var layer = new ol.layer.Vector({source: new ol.source.Vector({features: (new ol.format.GeoJSON()).readFeatures(data, {     // 用readFeatures方法可以自定义坐标系dataProjection: 'EPSG:4326',                            // 设定JSON数据使用的坐标系featureProjection: 'EPSG:3857'                          // 设定当前地图使用的feature的坐标系})})});map.addLayer(layer);};$.ajax({url: 'geojson/map.geojson',success: function(data, status) {// 成功获取到数据内容后，调用方法将矢量地图添加到地图addGeoJSON(data);}});</script>
</body>
</html>

2、运行结果

OpenLayers 3加载矢量地图源相关推荐

Openlayers之加载谷歌地图
1.谷歌地图瓦片构成我们用浏览器打开谷歌地图,然后按下F12键,查看网络资源中的地图瓦片,可以发现瓦片URL中变化的部分为1i.2i和3i后面的数字,经过分析可以知道1i后面的应该是瓦片的级别,2i ...
Openlayers之加载Stamen地图
1.Stamen地图瓦片构成我们使用浏览器打开Stamen地图,按下F12查看网络资源,可以发现其瓦片URL非常直观明了,与OpenStreetMap的地图瓦片URL差不多,最终可以得到其通用URL ...
005：vue+openlayers加载Mapbox地图示例
第005个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载Mapbox地图. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果示例效果 ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
Openlayers加载离线地图Arcgis瓦片
文章目录一.介绍二.快速入门一.下载地图瓦片二.OpenLayers加载离线Arcgis瓦片一.介绍 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类 ...
Openlayers 2.X加载高德地图
概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图. 实现效果: 高德地图高德影像图中:蓝色的省市边界为我本机发布的,能够与高 ...
（转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
OpenLayers教程十一：多源数据加载之用最简单的方式加载瓦片地图
目录一.加载OpenStreetMap 二.加载Stamen Map 三.加载Bing Map OpenLayers封装了一些瓦片地图源类用于加载瓦片地图,这些类包括: ol.source.OSM ...
Openlayers中加载GeoJson文件显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解: cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等 cesium 在线例子内容概览 cesium 实现矢量瓦片加载效果 ...

OpenLayers 3加载矢量地图源

OpenLayers 3加载矢量地图源

一、矢量地图

二、使用GeoJson格式加载矢量地图

1、项目结构

2、map.geojson

3、map.html

4、运行结果

三、获取矢量地图上的所有Feature,并设置样式

1、map2.html

2、运行结果

4、矢量地图坐标系转换

1、map3.html

2、运行结果

OpenLayers 3加载矢量地图源相关推荐

最新文章

热门文章