点线面数据处理(wkt,geojson互转)

  •   点线面数据

点:[103.8810, 31.0896]

线:[[103.7767, 30.8424],[104.2546, 30.8150],[104.3068, 30.4552]]

面:[[[103.8810, 31.0896],[104.0129, 30.8891],[103.7520, 30.8809],[103.8810, 31.0896]]]

  •  wkt数据

点:POINT(103.365926 30.558386)

线:LINESTRING(104.079727 30.540988,104.067608 30.535152)

面:POLYGON ((103.88109322629896 31.089692013481724, 104.01292916379867 30.88919152520053, 103.75200387083044 30.880951779106482, 103.88109322629896 31.089692013481724))

多面:MULTIPOLYGON(((104.4685243069 30.3336904936,104.4670262929 30.33037331,104.4644834911 30.3312774512,104.464433366 30.3313740694,104.4659245068 30.3346309237,104.4685243069 30.3336904936)))

  •  点线面数据转为geojson

 turf文档

import * as turf from '@turf/turf';

点转为geojson :

let point = turf.point([104,31])

geojson 格式:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    104,
                    31
                ]
            },
            "properties": {
                "title": "99",
                "color": "#B9EB14",
                "symbol":"风格独特"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    104.001,
                    31
                ]
            },
            "properties": {
                "title": "0",
                "symbol": "海角天涯",
                "color": "#D13C3C"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    104.002,
                    31
                ]
            },
            "properties": {
                "title": "8",
                "symbol": "特别的晚风",
                "marker-size":12,
                "color": "#C49D22"
                
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    104.003,
                    31
                ]
            },
            "properties": {
                "title": "2",
                "symbol": "那年仲夏你背上行囊离开家古道旁我欲语泪先下庙里求签我哭诉青梅等竹马",
                "color": "#8EE3A6"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    104.004,
                    31
                ]
            },
            "properties": {
                "title": "3",
                "symbol": "似水中月情迷着镜中花竹篱笆木琵琶拱桥月下谁在弹唱思念远方牵挂",
                "color": "#34BE96"
            }
        }
        
    ]
}

 线转为geojson :turf.lineString([[103.7767, 30.8424],[104.2546, 30.8150],[104.3068, 30.4552]])

面转为geojson :turf.polygon([[[103.8810, 31.0896],[104.0129, 30.8891],[103.7520, 30.8809],[103.8810, 31.0896]]])

  •  geojson与wkt互转

import { stringify, parse } from 'wellknown'; // 坐标转换

stringify:geojson转wkt;

parse:wkt转geojson; 

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在OpenLayers中,可以通过创建要素(Feature)并将其添加到矢量图层(VectorLayer)中来创建点线面。对于数据量不大的场景,可以直接从数据库读取数据,并将其换为要素,然后添加到矢量图层中以在地图上展示。可以封装一个方法来方便地添加点线面。 例如,在WebGIS开发中,可以使用以下代码创建点线面图层: ```javascript // 创建点线面图层 addDrawLayer() { // 创建矢量数据源 const draw_source = new ol.source.Vector(); // 创建点线面图层 const draw_vector = new ol.layer.Vector({ source: draw_source, title: '自由图层绘制点线面', name: 'operateTu', visible: true, zIndex: 99999, style: new ol.style.Style({ fill: new ol.style.Fill({ color: "rgba(255, 255, 255, 0.2)", }), stroke: new ol.style.Stroke({ color: "#ffcc33", width: 3, }), image: new ol.style.Icon({ src: require('@/assets/index/dingwei-tu.png'), scale: 1, }), }), }); // 将图层添加到地图中 this.map.addLayer(draw_vector); } ``` 这段代码创建了一个名为`draw_vector`的矢量图层,并设置了图层的样式。可以根据需要自定义样式。然后,将该图层添加到地图中即可。 请注意,这只是一个示例代码,具体的实现可能会根据项目的需求有所不同。 #### 引用[.reference_title] - *1* [Openlayers 添加 WKT WKB GeoJson 格式点线面数据](https://blog.csdn.net/linzi19900517/article/details/123210537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [openlayers6 第一篇绘制点线面](https://blog.csdn.net/m0_65607651/article/details/130517064)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [openlayers3基础点线面添加](https://blog.csdn.net/qq_35091287/article/details/109112342)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

小满blue

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

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

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

打赏作者

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

抵扣说明:

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

余额充值