Openlayers 3カスタムイベント
2703 ワード
Ol3 popup
function init(){
var format = 'image/png';
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
// wfs
var wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'the_geom'
}),
url: 'http://localhost:8081/geoserver/map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=map:capital&maxFeatures=50&outputFormat=application/json'
})
});
// feature
var feature1 = new ol.Feature({
geometry: new ol.geom.Point([117, 38])
});
// 100 ，
feature1.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({
color: 'red'
})
})
}));
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [ new ol.layer.Tile({
source: new ol.source.OSM({
projection:ol.proj.getTransform('EPSG:3857','EPSG:4326')
})
}),
wfsVectorLayer,
new ol.layer.Vector({source: new ol.source.Vector({
features: [feature1]
})})],
view: new ol.View({
projection: 'EPSG:4326',
center:[117,42],
zoom:6
})
});
map.getView().fit(bounds, map.getSize());
map.on('pointermove', function(event){
if(map.hasFeatureAtPixel(event.pixel)){
map.forEachFeatureAtPixel(event.pixel, function(feature){
// feature mousemove
feature.dispatchEvent({type: 'mousein'});
});
}
else
{
feature1.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({
color: 'red'
})
})
}));
}
});
// feature1 mousemove
feature1.on('mousein', function(){
// feature 100 ，
this.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({
color: 'blue'
})
})
}));
});
}