Как изменить источник плитки открытого слоя?

Question

Как изменить источник плитки открытого слоя?

1

Мне нужно изменить источник слоя для openlayer (используя open api). В настоящее время я использую следующий код без успеха.

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

Не могли бы вы рассказать мне, что я делаю неправильно? Каков правильный способ обновления источника данных?

  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
      })
    })
  }

Radex 04 сен. 2017, в 09:57

Источник

Теги:

javascript

openlayers

1 ответ

Ещё вопросы

Bob Holmes · Accepted Answer · 2017-09-05T16-37-00.000Z

layer.setSource должен сделать трюк.

    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
        })
    });

Вот рабочий пример:

Пример layer.setSource