2.矢量图层-new

从geoserver获取

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";

let xysGetVectorLayer = () => {
  return new VectorLayer({
    name: 'oldBaseLayer',
    visible: true,
    source: new VectorSource({
      url: 'http://43.143.xxx.xxx:8083/geoserver/one/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=one%3Abase-old&maxFeatures=500&outputFormat=application%2Fjson',
      format: new GeoJSON(),
      resultFormat: 'json',
    }),
declutter: true, //重要的一行，确保label不重叠
  })
}

export default xysGetVectorLayer

从本地获取

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";

import data from './1.json'

let jsonData = data;

let xysGetVectorLayerFromLocal = () => {
  return new VectorLayer({
    name: 'oldBaseLayer',
    visible: true,
    source: new VectorSource({
      format: new GeoJSON(),
      features: new GeoJSON().readFeatures(jsonData),
    }),
  })
}

export default xysGetVectorLayerFromLocal