言成言成啊 | Kit Chen's Blog

基于openlayers的wkt绘制展示功能

发布于2022-05-22 01:48:26,更新于2022-09-04 14:18:45,标签:javascript html  转载随意,文章会持续修订,请注明来源地址:https://meethigher.top/blog

平时经常跟经纬度打交道,绘制经纬度目前常用的三个结构:geojson、wkt、wkb。这篇文章简单记录下,实现wkt绘制展示的过程。

一、效果图

放最后成果图,以及源码

小屏效果

大屏效果

二、具体源码

Gis基础知识

先说要点,由于openStreetMap是个平面,以米为单位,平面就是投影坐标系了。openstreetmap是基于3857投影坐标系的。

而我们用的经纬度,是以度为单位的,这种的叫做地理坐标系。目前主流的地理坐标系就是4326。

常见wkt都是以经纬度来存储,也就是地理坐标系。openstreetmap是基于3857投影坐标系的。

为了方便在openstreetmap上图,我们需要转换坐标系。

将地图点转为wkt时,要把3857转为4326。

在wkt转换为地图点时,要把4326转为3857。

这边一开始想着可以自定义是否要转换4326,还是其他,想了一下,好像没啥必要。就目前我实际使用中,都是4326和3857。

三、参考致谢

老规矩,先放抄袭来源。

  1. OpenLayers - Welcome
  2. clydedacruz/openstreetmap-wkt-playground: Plot and visualize WKT shapes on OpenStreetMap
  3. 根据背景颜色的亮度调整字体的颜色 - SegmentFault 思否
  4. html中rem的理解&简单运用示例_Zhi.C.Yue的博客-CSDN博客_html rem
  5. Measure - OpenLayers
发布:2022-05-22 01:48:26
修改:2022-09-04 14:18:45
链接:https://meethigher.top/blog/2022/wkt-show-on-openlayers/
标签:javascript html 
付款码 打赏 分享
若无法评论请科学上网
shift+ctrl+1可控制目录显示