加载wkt就如此简单 -来自openlayers

最新推荐文章于 2024-04-24 17:15:00 发布
最新推荐文章于 2024-04-24 17:15:00 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zw3413/article/details/85337269
版权

一个简单的加载wkt到地图的示例，代码来自openlayers官网。

<!DOCTYPE html>
<html>
  <head>
    <title>WKT</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import WKT from 'ol/format/WKT.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {OSM, Vector as VectorSource} from 'ol/source.js';

      var raster = new TileLayer({
        source: new OSM()
      });

      var wkt = 'POLYGON((10.689 -25.092, 34.595 ' +
          '-20.170, 38.814 -35.639, 13.502 ' +
          '-39.155, 10.689 -25.092))';

      var format = new WKT();

      var feature = format.readFeature(wkt, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
      });

      var vector = new VectorLayer({
        source: new VectorSource({
          features: [feature]
        })
      });

      var map = new Map({
        layers: [raster, vector],
        target: 'map',
        view: new View({
          center: [2952104.0199, -3277504.823],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

 

凌渊阁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据
linzi19900517的博客
03-01 2892
WebGIS 开发中，对于数据量不是很大的场景，可以直接从数据库读取数据，通过创建点线面要素（Feature），然后添加到矢量图层（vectorLayer）中，在地图上展示。添加点线面的方法可以封装一下，方便使用。...
Vue+OpenLayers7入门到实战：OpenLayers加载wkt格式数据，OpenLayers解析wkt格式的要素数据并渲染到地图上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 215
本章介绍如何使用OpenLayers7在地图上加载并解析wkt格式数据，以及渲染wkt格式的要素数据到地图上的功能。使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》
openlayers渲染wkt数据
jimjiayu
09-15 665
openlayers渲染wkt数据
要素类WKT文本获取
最新发布
fungis
04-24 863
要素类中的单个要素转为WKT格式的文本存储到TXT中、多要素将多个Polygon转为MultiPolygon存储到TXT中
OpenLayer 将WKT转换为Feature要素
西柚2015地信小白GISer
01-14 925
通常前后端geometry交互都是通过WKT完成的，前端一般使用后台返回的WKT来进行数据渲染。 OpenLayer将WKT转换为Feature需要进行以下步骤: 如下图引入ol/format/WKT~WKT 使用方法readFeature(source,opt_options) 使用方法 source: WKT字符串 opt_options: 从上步骤图片可以看出主要是设置要素数据的投影 ...
openlayers实现在线编辑
weixin_30641999的博客
05-27 472
概述： 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为： http://blog.csdn.net/gisshixisheng/article/details/44310765 思路： 前后台的数据交互以wkt的形式，加载已完成对象用wkt，对象更新完成之后将...
Openlayers API 参考中文版
07-05
OpenLayers 支持多种类型的图层，如TileLayer（瓦片图层）用于加载预分割的地图图片，VectorLayer（矢量图层）用于动态绘制地理数据，以及ImageLayer（图像图层）用于一次性加载整个图像作为地图背景。 控件是用户...
OpenLayersPolygonsMerge:在OpenLayers中合并两个相邻的多边形
04-05
在GIS（地理信息系统）领域，OpenLayers是一个广泛使用的开源JavaScript库，它允许开发人员在Web浏览器中创建交互式地图。这个“OpenLayersPolygonsMerge”项目专注于一个特定的几何操作，即如何在OpenLayers中合并...
asp.net mvc openlayers入门小程序
05-04
OpenLayers作为开源的Web地图库，允许开发者在Web页面上加载多种地图服务，如Google Maps、Bing Maps或OpenStreetMap等。它提供了丰富的API，用于绘制点、线、多边形，以及添加图层、控制、事件监听等功能。在这个小...
OpenLayers项目分析
10-09
在示例代码中，`OpenLayers.Map`用于创建地图，`OpenLayers.Layer.WMS`用于加载WMS服务，`OpenLayers.Bounds`定义了地图的边界，`OpenLayers.Layer.GML`则用于加载GML格式的地理数据。 OpenLayers的灵活性和强大...
OpenLayers技术研究参考文档
10-19
在使用 OpenLayers 时，需要实例化一个地图类 OpenLayers.Map，加载 WMS 和 GML 文件，添加控件 OpenLayers.Control 等。 OpenLayers 的优点包括： * 灵活的数据格式支持 * 丰富的地图数据资源 * 无浏览器依赖性 *...
7.（地图数据篇）wkt坐标互转geojson坐标（前端js）.zip
06-04
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/117551395
（转）openlayers实现在线编辑
06-09 216
http://blog.csdn.net/gisshixisheng/article/details/46054949 概述： 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为： http://blog.csdn.net/gisshixisheng/article/deta...
Openlayers实战：加载WKT文件
大剑师兰特的GIS世界
07-19 382
在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载WKT文件。WKT格式是一种文本格式，用于描述二维和三维几何对象的空间特征。WKT是“Well-Known Text”的缩写，是一种开放的国际标准，由Open Geospatial Consortium（OGC）定义和维护。WKT格式通常用于在计算机系统之间交换空间数据，例如在GIS（地理信息系统）软件和数据库之间。
ARCGIS API 加载WKT(terraformers工具的使用)
QQ24382327博客
10-23 2230
需求场景:从接口获得WKT格式数据，在前端通过ARCGIS JS API呈现到页面。 ARCGIS JS API 无法直接使用WKT格式数据，但通过terraformers工具的转换后可以使用。terraformers是Esri的一个开源项目，参考：https://github.com/Esri/Terraformer，主要作用是可以将wkt转换为geometry。 直接上代码，为了测试方便，接口数据用测试数据替代，其他引用的模块和地图都来自互联网，复制可直接运行。 <!DOCTYPE html&g
openlayers处理后台发送的GeoJSON或WKT字符串
weixin_42547014的博客
10-23 1227
【处理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
vue+ol实现 ol 地图加载geojson
bitree1的博客
05-12 9261
一、背景 公司需要个简单的二维底图，加载点线面数据，为了省时间就用openlayers框架写一个简单的加载方法，openlayers核心包含Map对象、View视图、Layer图层、Source来源、Feature等特征 二、加载配置 三、地图初始化 import esb from '@/plugins/esb' import 'ol/ol.css' import Map from 'ol/Map' import View from 'ol/View' import { getWidth,getC
Openlayers中多边形的聚合
dreamgis的专栏
05-28 1691
关于OpenLayers的Cluster ol.source.Cluster ol利用这个js对象实现对地图上feature进行聚合展示的控制，所有的features需要被放在一个feature数组中作为ol.source.Vector中features属性进行载入。 下面就是官方针对Cluster的API文档： new ol.source.Cluster(options) options: Constructor options. Name Type Description a
OpenLayers6入门，读取wkt格式数据，OpenLayers解析并显示wkt格式的要素数据
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
09-11 541
本章介绍OpenLayers如何解析并显示wkt格式的要素数据。使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》
openlayers wkt 4326转3857坐标系
03-09
OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图应用程序。它提供了丰富的功能和工具，包括地图显示、地图控制、图层管理等。 WKT（Well-Known Text）是一种文本格式，用于表示地理空间对象的几何形状。4326和3857是两种常见的地理坐标系，分别代表WGS84和Web墨卡托投影。 在OpenLayers中，可以使用proj库来进行坐标系的转换。具体来说，将WKT格式的几何对象从4326坐标系转换为3857坐标系的步骤如下： 1. 首先，需要定义源坐标系和目标坐标系： ```javascript var sourceProjection = 'EPSG:4326'; var targetProjection = 'EPSG:3857';``` 2. 然后，创建一个坐标转换器： ```javascript var transform = ol.proj.getTransform(sourceProjection, targetProjection); ``` 3. 接下来，将WKT格式的几何对象解析为OpenLayers的几何对象： ```javascript var wkt = new ol.format.WKT(); var geometry = wkt.readGeometry(wktString); ``` 4. 最后，使用坐标转换器将几何对象的坐标从源坐标系转换为目标坐标系： ```javascript geometry.transform(sourceProjection, targetProjection); ``` 完成以上步骤后，geometry对象中的坐标就已经转换为3857坐标系了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值