f4585331f2
As with vector layers and feature overlays, feature style can be set by calling setStyle. Calling getStyle returns what was passed to setStyle. Internally, we call getStyleFunction.
98 lines
2.2 KiB
JavaScript
98 lines
2.2 KiB
JavaScript
goog.require('ol.Feature');
|
|
goog.require('ol.Map');
|
|
goog.require('ol.Overlay');
|
|
goog.require('ol.View2D');
|
|
goog.require('ol.geom.Point');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.source.TileJSON');
|
|
goog.require('ol.source.Vector');
|
|
goog.require('ol.style.Icon');
|
|
goog.require('ol.style.Style');
|
|
|
|
|
|
var iconFeature = new ol.Feature({
|
|
geometry: new ol.geom.Point([0, 0]),
|
|
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',
|
|
src: 'data/icon.png'
|
|
}))
|
|
});
|
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
|
var vectorSource = new ol.source.Vector({
|
|
features: [iconFeature]
|
|
});
|
|
|
|
var vectorLayer = new ol.layer.Vector({
|
|
source: vectorSource
|
|
});
|
|
|
|
var rasterLayer = new ol.layer.Tile({
|
|
source: new ol.source.TileJSON({
|
|
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
|
})
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [rasterLayer, vectorLayer],
|
|
renderer: 'canvas',
|
|
target: document.getElementById('map'),
|
|
view: new ol.View2D({
|
|
center: [0, 0],
|
|
zoom: 3
|
|
})
|
|
});
|
|
|
|
var element = document.getElementById('popup');
|
|
|
|
var popup = new ol.Overlay({
|
|
element: element,
|
|
positioning: 'bottom-center',
|
|
stopEvent: false
|
|
});
|
|
map.addOverlay(popup);
|
|
|
|
// display popup on click
|
|
map.on('singleclick', function(evt) {
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
function(feature, layer) {
|
|
return feature;
|
|
});
|
|
if (feature) {
|
|
var geometry = feature.getGeometry();
|
|
var coord = geometry.getCoordinates();
|
|
popup.setPosition(coord);
|
|
$(element).popover({
|
|
'placement': 'top',
|
|
'html': true,
|
|
'content': feature.get('name')
|
|
});
|
|
$(element).popover('show');
|
|
} else {
|
|
$(element).popover('destroy');
|
|
}
|
|
});
|
|
|
|
// change mouse cursor when over marker
|
|
$(map.getViewport()).on('mousemove', function(e) {
|
|
var pixel = map.getEventPixel(e.originalEvent);
|
|
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
return true;
|
|
});
|
|
if (hit) {
|
|
map.getTarget().style.cursor = 'pointer';
|
|
} else {
|
|
map.getTarget().style.cursor = '';
|
|
}
|
|
});
|