Openlayer 从变量而不是 url 加载 GEOJSON

Question

我有一个地图表示形式，我想添加一个基于 GEOJSON 的图层，但我不想直接从 GEOJSON 文件读取它，而是有一个包含我需要的确切 GEOJSON 字符串的变量，可以从变量而不是 url 加载它吗？

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
                  title: 'bikesRented',
                  source: new ol.source.Vector({
                     url: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                     format: new ol.format.GeoJSON()
                  }),
                  style: bikeStyle2
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([11.341868,44.494949]),
        zoom: 14
    })
});

Answer 1

您可以从字符串中读取功能并将它们添加到源中

   var source = new ol.source.Vector();
   var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Vector({
                      title: 'bikesRented',
                      source: source,
                      style: bikeStyle2
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([11.341868,44.494949]),
            zoom: 14
        })
    });
    source.addFeatures(
      new ol.format.GeoJSON().readFeatures(geojsonstring, {
        dataProjection: 'EPSG:4326',
        featureProjection: map.getView().getProjection()
      })
    );

或者您可以使用数据 url 并让 OpenLayers 加载该数据

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
                  title: 'bikesRented',
                  source: new ol.source.Vector({
                     url: 'data:,' + encodeURIComponent(geojsonstring),
                     format: new ol.format.GeoJSON()
                  }),
                  style: bikeStyle2
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([11.341868,44.494949]),
        zoom: 14
    })
});