Ich benutze Openlayer3. Und das Symbol als Markierung verwenden. Also meine Anforderung ist, dass wenn ich auf Marker schwebe, sollte es in der Größe zunehmen, um zu zeigen, dass es schwebt. Bis jetzt habe ich Erfolg, das Symbol zu entdecken und den Cursorzeiger zu ändern. Anschauliches Beispiel hierfür kann bei http://codepen.io/anon/pen/WxzbjvOpenlayer3 Symbol Maus Hover Animation
Javascript-Code zu finden ist wie folgt:
var
sourceFeatures = new ol.source.Vector(),
layerFeatures = new ol.layer.Vector({
source: sourceFeatures
})
;
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [-5484116.753984261,-1884416.14606312],
zoom: 16,
minZoom: 2,
maxZoom: 20
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.6
}),
layerFeatures
]
});
$(map.getViewport()).on('mousemove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return true;
});
targetStr=map.getTarget();
targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr);
if (hit) {
targetEle.css('cursor','pointer');
} else {
targetEle.css('cursor','');
}
});
var
fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}),
stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}),
style1 = [
new ol.style.Style({
image: new ol.style.Icon(({
scale: .7, opacity: 1,
rotateWithView: false, anchor: [0.5, 1],
anchorXUnits: 'fraction', anchorYUnits: 'fraction',
src: '//cdn.rawgit.com/jonataswalker/map-utils/' + 'master/images/marker.png'
})),
zIndex: 5
})
]
;
var feature_start = new ol.Feature({
geometry: new ol.geom.Point([-5484116.753984261,-1884416.14606312])
});
feature_start.setStyle(style1);
sourceFeatures.addFeatures([feature_start]);
Dank @jolmos. Aber ich möchte etwas Animation darüber wie beim Schwebeflug und beim Zurückschweben zurück zur Normalität. –
Ich möchte das Flackern bei Hover wie auf dem Link vermeiden: http://codepen.io/anon/pen/Wxzbjv?editors=0010. Es sollte glatte Animation beim Expandieren und Zusammenklappen geben –
Ich weiß nicht, ob Sie Animationen auf ein Icon-Element anwenden können ... sonst könnten Sie Overlays verwenden (http://openlayers.org/en/latest/apidoc/ol.Overlay .html) als Marker. Diese Überlagerung kann als HTML-Element CSS-Eigenschaften (wie Animationen) haben – jolmos