geojson格式展示

18 篇文章 0 订阅

geojson格式展示:第一种后端返回格式如下:

let lineGojson={
"coordinates": [
[6.41, -12.38],
[6.34, -11.88],
[6.29, -11.38],
[6.2, -10.96],
[6.1, -10.61],
[5.98, -10.32],
[5.8, -10.11],
[5.58, -9.96],
[5.3, -9.91],
[5.01, -9.93],
[4.71, -9.95],
[4.39, -9.91],
[4.09, -9.84],
[3.81, -9.74],
[3.53, -9.66],
[3.22, -9.61],
[2.9, -9.59],
[2.55, -9.59],
[2.19, -9.63],
[1.81, -9.67],
[1.41, -9.69],
[1.0, -9.69],
[0.57, -9.68],
[0.14, -9.65],
[-0.27, -9.65],
[-0.63, -9.69],
[-0.91, -9.8],
[-1.13, -9.97],
[-1.3, -10.21],
[-1.42, -10.5],
[-1.48, -10.86],
[-1.51, -11.25],
[-1.51, -11.68],
[-1.5, -12.13],
[-1.51, -12.58],
[-1.52, -13.03],
[-1.57, -13.51],
[-1.64, -14.0],
[-1.74, -14.46],
[-1.92, -14.88],
[-2.15, -15.23],
[-2.45, -15.51],
[-2.81, -15.71],
[-3.22, -15.84],
[-3.66, -15.89],
[-4.12, -15.84]
],
"type": "LineString"
}

代码中可以如此获取后端返回的geojson格式

        import { GeoJSON } from "ol/format.js";
        const format = new GeoJSON();
        const finalJson = format.readFeatures(lineGojson);//获取后端数据

        let citySource = new VectorSource({
          features: finalJson,
          format: new GeoJSON()
        })
        const cityVector = new VectorLayer({
          source: citySource
          // zIndex: 999999
        });
        const map = new Map({
          layers: [cityVector],
          target: "map",
          view: new View({
            center: [0, 0],
            zoom: 2,
          }),
        });
        map.addLayer(cityVector)

第二种方式是读取有geojson格式的文件,可在public新建history.geojson格式问题,直接从路径读取。

    const cityVector = new VectorLayer({
      source: new VectorSource({
        url: "data/geojson/history.geojson",
        format: new GeoJSON(),
      }),
    });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值