openlayers加载svg_OpenLayers学习笔记（五）— 拖拽Feature图层

Icon Symbolizer

position: relative;

}

#popup {

cursor: pointer;

}

var coord1 = [-5707673.76, -3499420.81];var coord2 = [-6707673.76, -3499420.81];var lineStyle = newol.style.Style({

stroke:newol.style.Stroke({

color:'#ffcc33',

width:3,

lineDash:[10,10]

})

});var styleMarker = newol.style.Style({

image:newol.style.Icon({

scale: .7, anchor: [0.5, 1],

src:'marker.png'})

});var marker1 = newol.geom.Point(coord1);var featureMarker1 = newol.Feature(marker1);var marker2 = newol.geom.Point(coord2);var featureMarker2 = newol.Feature(marker2);var line = newol.geom.LineString([coord1, coord2]);var lineFeature = newol.Feature(line);var vector = newol.layer.Vector({

source:newol.source.Vector({

features: [lineFeature, featureMarker1, featureMarker2]

}),

style: [lineStyle, styleMarker]

});var map = newol.Map({

target:'map',

layers: [new ol.layer.Tile({ source: newol.source.OSM() }), vector],

view:new ol.View({ center: coord1, zoom: 5})

});var translate1 = newol.interaction.Translate({

features:newol.Collection([featureMarker1])

});var translate2 = newol.interaction.Translate({

features:newol.Collection([featureMarker2])

});

map.addInteraction(translate1);

map.addInteraction(translate2);varcoordMarker1, coordMarker2;

translate1.on('translatestart', function(evt) {

coordMarker2=marker2.getCoordinates();

});

translate1.on('translating', function(evt) {

line.setCoordinates([coordMarker2, evt.coordinate]);

});

translate2.on('translatestart', function(evt) {

coordMarker1=marker1.getCoordinates();

});

translate2.on('translating', function(evt) {

line.setCoordinates([coordMarker1, evt.coordinate]);

});

map.on('pointermove', function(e) {if (e.dragging) return;var hit =map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));

map.getTargetElement().style.cursor= hit ? 'pointer' : '';

});