Openlayers 3 круга от geojson не работают с источником тайлов слоя, отличным от TileWMS

Я работаю с openlayers 3 со слоем из mapbox или openstreetmap, и мне нужно нарисовать на нем несколько кружков.

Я могу напечатать круги с видом с проекцией EPSG: 4326, но тогда у меня нет карты. При изменении проекции с преобразованием карта отображается, но точки все вместе. Единственный способ заставить его работать - использовать TileWMS в качестве источника, но я не могу использовать его в производственной среде.

Вот мой код:

версия 1: работа с TileWMS

  var source = new ol.source.GeoJSON({
    url: 'geojson url'
  });
  var pointsLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 15,
            fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}),
            stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8})
          })
        })
      });

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
              title: "Global Imagery",
              source: new ol.source.TileWMS({
                url: 'http://maps.opengeo.org/geowebcache/service/wms',
                params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
              })
        }),
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

Это результат работа с TileWMS

Ошибка при использовании mapbox или osm:

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

Это результат Ошибка osm или mapbox

И, наконец, при изменении вида карта отображается, но кружки

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
});

И результат введите описание изображения здесь

Есть ли способ заставить это работать? Заранее спасибо.


person hosseio    schedule 12.12.2014    source источник


Ответы (1)


Я нашел решение, вот оно, потому что оно помогает кому угодно

После этого ответа в gis stackexchange https://gis.stackexchange.com/a/118818/42868 есть нестабильный вариант для объекта ol.source.GeoJSON, поэтому добавление его таким образом заставило его работать

var source = new ol.source.GeoJSON({
    url: 'geojson url',
    projection: 'EPSG:3857'
});
person hosseio    schedule 12.12.2014