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