OpenLayers 3加载矢量地图源

最新推荐文章于 2024-09-12 19:48:44 发布
最新推荐文章于 2024-09-12 19:48:44 发布
阅读量1.8k 收藏 10
点赞数
分类专栏： OpenLayers 3 文章标签： OpenLayers 3 矢量地图 GeoJson Feature
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521890/article/details/122085734
版权

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,           // 设置地图显示层级为10
            projection: '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,           // 设置地图显示层级为10
            projection: '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
            })
        })

        //获取矢量图层上所有的Feature
        var 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地图中加载矢量数据（shp文件）
weixin_55684685的博客
05-13 3577
我们要知道，在ArcGIS、QGIS中经常使用的矢量数据一般为shp格式数据，相当于地图中的layer图层，里面无非就是点、线、面数据，但是在openlayers里面加载的时候只能加载geojson数据，所以我们想加载shp格式数据，第一步就是将shp数据格式转换为geojson数据格式。另外，还要注意坐标系的问题，一定要注意矢量数据的坐标系要和openlayers里面加载的地图的坐标系一致，通常都是用WGS84坐标系（即EPSG:4326），防止出现偏移。矢量数据找要素里面的投影。
OpenLayers 图层(Layers) 详解
热门推荐
研究与专注
04-30 8万+
如果不是专业的地图工作者，看到地图，可能觉得地图就是一张将三维世界映射到二维空间，很多信息混杂在一起表示空间信息的动态可交互图片，其实这只是表面现象。实际上地图是由一个或多个图层组成的，使用不同的图层存储不同类型的地物，比如由存储道路的图层，有展示拥堵情况的图层，通常还有一个含有基础地理信息（比如政区划分）的底图图层。
【Openlayers+百度地图】准确加载百度地图
weixin_41027083的博客
09-12 851
由于ol没有DB09的坐标系，当需要使用openlayers加载百度地图的瓦片资源时，地图的projection最好是DB09，如果使用。也是可以加载出底图的，但会出现点位偏移，位置不准确等问题，点位也会随着zoom变化而移动。的方式加载百度底图，然后再将需要展示的点位数据转为百度墨卡即可。
OpenLayers教程十五：多源数据加载之矢量地图
不睡觉的怪叔叔的博客
07-15 3520
目录 一、矢量地图简介 二、在OpenLayers中直接组织矢量数据 三、通过url加载矢量数据 四、样式设置 一、矢量地图简介 前面介绍的瓦片地图将地理信息以一块块瓦片的形式进行组织并渲染，瓦片的本质是图片，因此不能对瓦片地图进行修改样式、空间分析等操作，而且瓦片不包含属性信息，隐含的空间信息也不能直接获取使用。 矢量数据使用矢量数据模型来组织地理信息，矢量数据模型...
openlayers2 wfs方式加载矢量图层
weixin_33691700的博客
09-11 265
在地图中为了增强交互效果，需要加载一层矢量地图。如何通过请求wfs的方式加载矢量地图呢？ function getParkingLayerFunc(mapUrl,parkingLayerName,onComplete){ //获取地图对象 var map = ****.getMap(); //矢量图层默认状态下的style var def...
openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法
01-08
OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。 加载矢量地图数据的两种方法 使用OpenLayers加载矢量地图数据可以有两种方法。一是直接加载本地geojson格式的文件；二是将矢量地图数据发布到GIS服务器，然后使用OpenLayers请求WFS服务调取矢量地图数据。（以下以GeoServer为例） 这两种方法在使用时都可能会出现跨域问题（Console中以Access to XMLHttpRequest 开头的错误)
OpenLayer学习之矢量地图
weixin_30240349的博客
06-13 249
一、首先了解下矢量地图和栅格地图 矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，矢量地图放大和缩小不会失真（图片你要是放大一定程度明显可以看出一个一个小格→栅格地图的缺点）。为了便于存储，传递，使用，矢量地图会按照一定的格式来表达，比如常见的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。 除了最后一个Shape...
用openlayers实现矢量地图数据的展示
GIS工具
03-06 7870
如果我们有一些矢量数据，如何利用OPENLAYERS将这些数据在网络上进行发布呢？我向大家介绍一下我使用过的两种方法： 1. 将数据转换成GEOJSON、KML等网络矢量格式，然后用OPENLAYERS在浏览器中进行展示。 2. 用GISSERVER发布成OGC服务，然后用OPENLAYERS在浏览器中进行展示。见： https://blog.csdn.net/qq_...
openlayers 加载天地图示例
02-24
以上代码创建了一个OpenLayers地图实例，并添加了天地图的矢量图层。值得注意的是，你需要根据天地图的官方文档来完善分辨率数组和WMTS服务的URL参数，确保图层能够正确加载。 此外，你还可以添加更多的功能，比如...
openlayers加载瓦片地图并手动标记坐标点
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
openlayers5加载百度地图.zip
06-18
3. **加载百度地图图层**：在OpenLayers 5中创建一个TileLayer实例，并设置其URL为百度地图的瓦片服务地址。这通常是带有缩放级别、经度和纬度参数的动态URL。 4. **视图设置**：设置地图的初始视图，包括中心位置...
openlayers 矢量图层注记
01-03
openlayers 中利用矢量图层添加注记的示例。
openlayers5加载天地图影像.zip
06-23
3. **加载天地图影像层**：天地图提供的是WMTS服务，所以我们需要创建一个WMTS源并添加到地图中。 ```javascript var tileLayer = new ol.layer.Tile({ source: new ol.source.WMTS({ url: '...
OpenLayers(5.x)加载离线矢量图层OpenMapTiles Map Server
DavidWed的博客
04-25 2923
需求背景 某产品需要展示离线OSM地图，一般地图下载仅支持下载栅格数据，数据量非常大，因此选择矢量数据。 可在openmaptiles.com进行下载（免费版有水印） 搭建离线服务 矢量数据为mbtiles，是一种基于mysql的地图切片数据库，无法通过像栅格数据XYZ的形式直接加载，需要搭建地图服务，可以自己搭建，也可以使用TileServer GL或者OpenMapTiles Map Serv...
OpenLayers之多源数据加载七：矢量地图
不睡觉的怪叔叔的博客
08-09 4313
一、矢量地图介绍     矢量地图的图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。     矢量图形最大的优点是无论放大、缩小或旋转等图形都不会失真。矢量地图在地图项目中存在着大量的应用，是地图数据中非常重要的组成部分。     为了便于存储、传递、使用，矢量地图会按照一定的格式来表达，比如常...
Openlayers2图层加载（二）加载矢量图层
此爱如少年
11-16 1887
加载矢量图层文件 通过WMS请求获取到图层，其实是一张张图片拼在一起的。而矢量图层，是由矢量数据来构造的。OpenLayer是中支持的矢量数据文件格式较多，如GeoJSON、KML、XML等。 以加载GeoJson为例，如下 数据源：GeoJSON文件 示例数据一级河流，命名为river.geosion。 function initMap(){ var map,baseLayer map =...
（四）openlayers加入矢量图层.json文件
fang427的博客
04-22 368
openlayers加入矢量图层.json文件
260：vue+openlayers 通过webgl方式加载矢量图层
大剑师兰特的GIS世界
01-30 1317
本示例介绍如何在vue+openlayers中通过webgl方式加载矢量图层。在做这个示例的时候，采用vite的方式而非webpack的方式。这里的基础设置需要改变一下。 ol的版本7.5.2或者更高。
openlayers3同时加载矢量地图和卫星地图
03-09 4284
我使用的是geoserver地图服务，有个项目需要将矢量地图和卫星地图一起显示出来，网上查了一遍，后自己又研究了下，现总结出来。 openlayers3是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。 代码如下： var format = 'image/png'; var pr
openlayers 加载矢量服务
最新发布
10-13
OpenLayers是一个强大的JavaScript库，用于创建交互式地图应用。如果你想在OpenLayers中加载矢量服务，通常指的是WFS（Web Feature Service）或WMS（Web Map Service）提供的地理数据，它支持KML、GeoJSON等多种矢量数据格式。 以下是基本步骤： 1. 引入OpenLayers库：首先，在HTML文件中引入OpenLayers的JS文件。 ```html <script src="path/to/openlayers.js"></script> ``` 2. 初始化地图：创建一个`<div>`元素用于显示地图，并设置它的大小。 ```html <div id="map" style="width: 600px; height: 400px;"></div> ``` 3. 创建Map实例：在JavaScript中初始化地图并设定投影。 ```javascript var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }), projection: 'EPSG:4326' }); ``` 4. 加载矢量服务：使用`ol.source.Vector`或`ol.source.WMTS`（如果数据是瓦片形式），并配置URL。 ```javascript var vectorSource = new ol.source.Vector({ url: 'your_vector_wfs/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=your_layer_name', format: new ol.format.GeoJSON() // 根据服务提供者选择合适的格式 }); // 将矢量层添加到地图上 var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大树下躲雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值