Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据

已于 2024-07-26 11:48:17 修改
阅读量2.9k 收藏 11
点赞数 3
分类专栏： Openlayers 实战教程 文章标签： openlayers openlayers 点线面 openlayers 数据格式 openlayers wkt wkb wkt geojson
于 2022-03-01 21:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linzi19900517/article/details/123210537
版权
Openlayers 实战教程 专栏收录该内容
35 篇文章 106 订阅 ¥9.90 ¥99.00
订阅专栏
本教程介绍了如何在 OpenLayers 中使用 WKT, WKB 和 GeoJSON 格式的数据来创建并显示点、线和面的地理要素。文章提供了一个在线示例，并说明了在 WebGIS 开发中直接从数据库获取数据并将其转换为地图元素的过程。" 113671318,10292934,Python Pandas 双轴时间序列折线图教程,"['Python数据可视化', 'Pandas图表', '时间序列分析']
摘要由CSDN通过智能技术生成

Openlayers 教程 - 地图添加 WKT WKB GeoJson 格式的点线面数据

在这里插入图片描述

WebGIS 开发中，对于数据量不是很大的场景，可以直接从数据库读取数据，通过创建点线面要素（Feature），然后添加到矢量图层（vectorLayer）中，在地图上展示。添加点线面的方法可以封装一下，方便使用。

WebGIS 数据最好符合标准，这里介绍 WKT WKB GeoJson 三种常见格式数据。

2022年10月23日 已修改示例，增加数据转换工具。

Openlayers 添加 WKT WKB GeoJson 格式点线面数据

<html lang
了解本专栏 订阅专栏 解锁全文
非科班Java出身GISer
关注
专栏目录
订阅专栏
Openlayers实战：加载WKT文件
大剑师兰特的GIS世界
07-19 402
在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载WKT文件。WKT格式是一种文本格式，用于描述二维和三维几何对象的空间特征。WKT是“Well-Known Text”的缩写，是一种开放的国际标准，由Open Geospatial Consortium（OGC）定义和维护。WKT格式通常用于在计算机系统之间交换空间数据，例如在GIS（地理信息系统）软件和数据库之间。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2125
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
openlayers渲染wkt数据
jimjiayu
09-15 732
openlayers渲染wkt数据
Openlayers中Feature与WKT之间的转换，Feature坐标系的转换 WKT与GEOJSON转换
Light_10的博客
07-17 210
【代码】Openlayers中Feature与WKT之间的转换，Feature坐标系的转换。
OpenLayers6入门，读取wkt格式数据，OpenLayers解析并显示wkt格式的要素数据
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
09-11 620
本章介绍OpenLayers如何解析并显示wkt格式的要素数据。使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》
加载wkt就如此简单 -来自openlayers
zw3413的专栏
12-29 3038
一个简单的加载wkt到地图的示例，代码来自openlayers官网。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;WKT&lt;/title&gt; &lt;link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol
meethigher-基于openlayers的wkt绘制展示功能
meethigher的博客
05-22 1282
平时经常跟经纬度打交道，绘制经纬度目前常用的三个结构：geojson、wkt、wkb。这篇文章简单记录下，实现wkt绘制展示的过程。
7.（地图数据篇）wkt坐标互转geojson坐标（前端js）.zip
06-04
在IT行业中，地理信息系统（GIS）是处理地理位置信息的关键领域，而WKT（Well-Known Text）和GeoJSON是两种常见的地理数据格式。本篇文章主要探讨如何在前端JavaScript环境中进行这两种格式之间的转换。 WKT是一种...
Openlayers 教程 12 - 地图中的各种定位：定位点、线、面以及图层等
linzi19900517的博客
03-17 6374
地图定位是非常常用的功能，本教程介绍定位到点、范围、图形要素 feature、图层 layer。
Openlayers入门教程 --- 万字长篇
大剑师兰特的GIS世界
03-13 5111
也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
029：vue+openlayers:使用MVT格式读取瓦片数据（示例代码）
大剑师兰特的GIS世界
08-11 1080
本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据，并显示图形。直接复制vue+openlayers源代码，操作2分钟即可运行实现效果
点线面数据处理（wkt，geojson互转）
taozi8957的博客
12-13 3303
点线面数据处理
openlayers 渲染wkt数据，标记中心值并弹窗
u013925989的博客
07-20 3342
function drawFatureSelectRow(vwkt,vl,name,phone,address){ var feature = new OpenLayers.Format.WKT().read(vwkt); var gml = new OpenLayers.Format.GML(); var style = { strokeColor:
Openlayers实战：输入WKT数据，输出GML、Polyline、GeoJSON格式数据
大剑师兰特的GIS世界
07-21 411
在Openlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是输入WKT数据，输出GML、Polyline、GeoJSON格式数据地理位置标记语言 (GML) 是由 OpenGIS 协会 “地理位置标记语言 V2” 规范定义的地理信息的 XML 编码。在 databast 中提供了多个函数，用于从地理标记语言 (GML) 格式的数据生成几何图形。Polyline用于以编码折线算法格式读取和写入数据的特征格式。读取要素时，假定坐标为二维且按 [纬度、经度] 顺序。
openlayers处理后台发送的GeoJSON或WKT字符串
weixin_42547014的博客
10-23 1250
【处理WKT格式字符串】 var splitfeature = new ol.format.WKT().readFeature(('WKT字符串'), { dataProjection: 'EPSG:4326', //目标坐标系 featureProjection: 'EPSG:4326' //当前坐标系 }); source.addFeatures(splitfeature); var vectorLayer = new ol.layer.Vector({source: sourc
openlayers以WKT或GeoJSON格式获取图形
weixin_42547014的博客
10-23 1770
【获取特定的】 前提：明确矢量图形的feature //WKT var wktshape = new ol.format.WKT().writeFeature(editorSource.getFeatures()[0]); //GeoJSON var jsonshape = new ol.format.GeoJSON().writeFeature(editorSource.getFeatures()[0]); 【获取刚刚画完的】 //新建draw对象 var draw = new ol.interact
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
openlayers显示GeoJson合适的点线面
04-27
OpenLayers是一个开源的JavaScript库，用于在Web上显示地图和地理数据。它提供了丰富的功能和灵活的API，可以用于显示各种地理数据，包括点、线和面。 要在OpenLayers中显示GeoJSON的点、线和面，可以按照以下步骤进行操作： 1. 创建一个OpenLayers地图对象： ```javascript var map = new ol.Map({ target: 'map', // 指定地图容器的ID或元素 layers: [ // 添加地图图层 new ol.layer.Tile({ source: new ol.source.OSM() // 使用OpenStreetMap作为底图 }) ], view: new ol.View({ center: [0, 0], // 地图中心点的坐标 zoom: 10 // 地图缩放级别 }) }); ``` 2. 创建一个GeoJSON格式的数据源： ```javascript var geojsonObject = { 'type': 'FeatureCollection', 'features': [ // 添加点、线、面的GeoJSON要素 { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [0, 0] // 点的坐标 }, 'properties': { 'name': 'Point' // 点的属性信息 } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[0, 0], [1, 1]] // 线的坐标数组 }, 'properties': { 'name': 'LineString' // 线的属性信息 } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[0, 0], [1, 1], [1, 0], [0, 0]]] // 面的坐标数组 }, 'properties': { 'name': 'Polygon' // 面的属性信息 } } ] }; var vectorSource = new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geojsonObject) }); ``` 3. 创建一个矢量图层，并将数据源添加到图层中： ```javascript var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); // 将矢量图层添加到地图中 ``` 通过以上步骤，你就可以在OpenLayers地图上显示GeoJSON的点、线和面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

非科班Java出身GISer

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

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

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

打赏作者

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

抵扣说明：

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

余额充值