How to change a open layer tile source?

Question

I need to change the layer source for openlayer (using open weather api). Currently I am using the following code with no success.

let layer = this.map.getLayers().getArray()[2]
layer.setSource(forecastLayer)

Could you tell me what I am doing wrong? What is the correct way to update the data source?

  renderMapOpenLayer () {
    let geo = this.props.geo

    // render marker vector
    let markerFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')) // TODO // take lat long from openweather api which should be sotred in the state
    })

    let markerSource = new ol.source.Vector({
      features: [markerFeature]
    })

    let markerStyle = new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0, 0],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'assets/pin.svg'
      }))
    })

    let markerLayer = new ol.layer.Vector({
      source: markerSource,
      style: markerStyle
    })

    // render OpenStreetMap tile server
    var tileLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    }, new ol.layer.Vector({
      source: new ol.source.Vector({ features: [], projection: 'EPSG:4326' })
    }))

    // render cloud tile
    let cloudLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: api.mapTemperature()
      })
    })

    let forecastLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: api.forecast()
      })
    })

    setTimeout(function () {
      let layer = this.map.getLayers().getArray()[2]
      layer.setSource(forecastLayer)
    }.bind(this), 3000)

    // create map
    this.map = new ol.Map({
      target: 'map',
      layers: [
        tileLayer,
        markerLayer,
        cloudLayer
      ],
      view: new ol.View({
        center: ol.proj.transform(geo, 'EPSG:4326', 'EPSG:3857'),
        zoom: 4
      })
    })
  }

Bob Holmes · Accepted Answer · 2017-09-05 19:09:35Z

layer.setSource should do the trick.

    function onClick() {
        layer.setSource(xyz2);
    }

    var xyz1 = new ol.source.XYZ({
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
              'Demographics/USA_Percent_Over_64/MapServer/tile/{z}/{y}/{x}'
    })
    var xyz2 = new ol.source.XYZ({
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
              'Demographics/USA_Percent_Under_18/MapServer/tile/{z}/{y}/{x}'
    })

    var layer = new ol.layer.Tile({
        source: xyz1
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([0, 0]),
            zoom: 3
        })
    });

Here is a working example:

layer.setSource Example

Collectives™ on Stack Overflow

How to change a open layer tile source?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related