geojson格式展示

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

你可能感兴趣的:(前端,vue,前端,vue.js,javascript)