openlayers加载geojson图层的方法

 导入

import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON';
import axios from 'axios';

直接以图层形式加载

var layer = new VectorLayer({
    source: new VectorSource({
        url: url,
        format: new GeoJSON(),
        projection: 'EPSG:4326',
    }),
    style: new Style({
        stroke: new Stroke({
            color: 'yellow',
            width: 1
        }),
        fill: new Fill({
            color: 'rgba(255, 255, 0, 0.1)'
        })
    }),
    name: 'name',
    visible: true,
    zIndex: 2000 || 98,
    title: 'base',
    projection: 'EPSG:4326'
});
map.addLayer(layer);

利用axio读取文件加载 

 

axios({
    url: url
}).then((res) => {
    let pJSON = (new GeoJSON()).readFeatures(res.data)
    var vectorSource = new VectorSource({
        features: pJSON
    });
    var vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
            stroke: new Stroke({
                color: 'yellow',
                width: 1
            }),
            fill: new Fill({
                color: 'rgba(255, 255, 0, 0.1)'
            })
        })
    });
    map.addLayer(vectorLayer)
});

利用fetch读取文件加载 

 

fetch(url).then(function (response) {
    return response.json();
}).then(function (json) {
    var vectorSource = new VectorSource({
        features: (new GeoJSON()).readFeatures(json)
    });
    var vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
            stroke: new Stroke({
                color: 'yellow',
                width: 1
            }),
            fill: new Fill({
                color: 'rgba(255, 255, 0, 0.1)'
            })
        })
    });
    map.addLayer(vectorLayer)
})