Я работаю с 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
})
});
Это результат
Ошибка при использовании 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
})
});
Это результат
И, наконец, при изменении вида карта отображается, но кружки
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
})
});
И результат
Есть ли способ заставить это работать? Заранее спасибо.