geojson格式展示

最新推荐文章于 2025-04-21 18:25:20 发布

梧桐芊羽

最新推荐文章于 2025-04-21 18:25:20 发布

阅读量630

点赞数

分类专栏：前端 vue 文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/ee_11eeeeee/article/details/129485160

版权

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

18 篇文章

订阅专栏

文章介绍了两种方式来处理和展示GeoJSON格式的数据。第一种是通过后端返回的GeoJSON对象，使用OpenLayers库的GeoJSON格式解析器将数据转化为地图上的线性特征。第二种方式是从本地文件读取GeoJSON文件，直接加载到VectorLayer中。这两种方法都用于在地图应用中呈现地理信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(),
      }),
    });