как добавить маркеры с OpenLayers 3
Я пытаюсь добавить производителей на a OpenLayers 3 карта.
Единственный пример, который я нашел, является этим в OpenLayers список в качестве примера.
Но пример использует ol. Стиль. Значок вместо чего-то как OpenLayers. Маркер в OpenLayers 2.
Первый вопрос
Единственная разница была бы то, что необходимо установить URL изображения, но действительно ли это - единственный способ добавить маркер?
Также OpenLayers 3 кажется, не идет с изображениями маркера, таким образом, это имело бы смысл, если нет никакого другого пути, чем ol.Style.Icon
Второй вопрос
Было бы действительно хорошо, если кто-то мог бы дать мне пример функции для добавления маркеров или значков после того, как карта загружается.
Из того, что я понимаю в примере, они создают слой для значка
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
Затем они устанавливают слой значка, когда они инициализируют карту
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
zoom: 3
})
});
Если я хочу добавить много маркеров, я должен создать 1 слой для каждого маркера?
Как я мог добавить много маркеров к слою? Я не могу выяснить, как эта часть была бы похожа
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
Спасибо
2 ответа
существует хорошее учебное руководство в: http://openlayersbook.github.io
не протестированный, но может полезный
var features = [];
//iterate through array...
for( var i = 0 ; i < data.length ; i++){
var item = data[i]; //get item
var type = item.type; //get type
var longitude = item.longitude; //coordinates
var latitude = item.latitude;
/*....
* now get your specific icon...('..../ic_customMarker.png')
* by e.g. switch case...
*/
var iconPath = getIconPath(type);
//create Feature... with coordinates
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
'EPSG:3857'))
});
//create style for your feature...
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: iconPath
}))
});
iconFeature.setStyle(iconStyle);
features.push(iconFeature);
//next item...
}
/*
* create vector source
* you could set the style for all features in your vectoreSource as well
*/
var vectorSource = new ol.source.Vector({
features: features //add an array of features
//,style: iconStyle //to set the style for all your features...
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
var exampleLoc = ol.proj.transform(
[131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
view: new ol.View2D({
projection: 'EPSG:3857',
zoom: 3,
center: exampleLoc
}),
layers: [
new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
]
});
map.addOverlay(new ol.Overlay({
position: exampleLoc,
element: $('<img src="resources/img/marker-blue.png">')
.css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
.tooltip({title: 'Hello, world!', trigger: 'click'})
}));
map.on('postcompose', function(evt) {
evt.vectorContext.setFillStrokeStyle(
new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}),
new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3}));
evt.vectorContext.drawCircleGeometry(
new ol.geom.Circle(exampleLoc, 400000));
});
var exampleKml = new ol.layer.Vector({
source: new ol.source.KML({
projection: 'EPSG:3857',
url: 'data/example.kml'
})
});
map.addLayer(exampleKml);