美文网首页
openlayers6加载geojson图层的方法

openlayers6加载geojson图层的方法

作者: 初见_JS | 来源:发表于2020-03-12 10:59 被阅读0次

    利用openlayers6加载本地.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)
    })
    

    相关文章

      网友评论

          本文标题:openlayers6加载geojson图层的方法

          本文链接:https://www.haomeiwen.com/subject/pwuyjhtx.html