Stworzyłem Control i działał. Jednak jak dodałem event to mapa
się nie wyświetla. Moje pomysły się skończyły. Prosze o pomoc.
Kod:
var map;
var selectCtrl;
function init() {
map = new OpenLayers.Map('map');
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
var vectorlayer = new OpenLayers.Layer.Vector("geojson", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "new.php",
format: new OpenLayers.Format.GeoJSON()
}),
// parametry opcjonalne
displayInLayerSwitcher: true
});
map.addLayers([gphy, gmap, ghyb, gsat, vectorlayer]);
selectCtrl = new OpenLayers.Control.SelectFeature([vectorlayer],
{clickout: true}
);
map.addControl(selectCtrl);
selectCtrl.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher(), new
OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}));
vectorlayer.events.on({
"featureselected": function(event) {
var f = event.feature;
var Y = f.geometry.y;
var X = f.geometry.x;
var foto = f.attributes.path;// adres fotki
popup = new
OpenLayers.Popup.FramedCloud("chicken",
new OpenLayers.LonLat(X,Y),
new OpenLayers.Size(200,200),
"<img src="foto">"
null,
true
);
map.addPopup(popup);
}
});
// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 5);
// add behavior to html
var animate = document.getElementById("animate");
animate.onclick = function() {
for (var i=map.layers.length-1; i>=0; --i) {
map.layers[i].animationEnabled = this.checked;
}
};
}
Natomiast jak zastosowałem twój prostszy pomysł z 3 punktu to
wyskakuje
"adres fotki undenfined".
To oznacza że zapomniałem czegoś wcześniej zdefiniować ,czy źle się łącze z atrybutem ?
Próbowałem też tak :
Kod:
selectControl = new OpenLayers.Control.SelectFeature(vectorlayer);
vectorlayer.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
function onPopupClose(evt) {
selectControl.unselectAll();
}
function onFeatureSelect(event) {
var feature = event.feature;
var detail = feature.attributes['description'];
var content = "<div style='font-size:.8em; width:120px;'><strong>"+
feature.attributes.name + "</strong><hr />" + detail + "</div>";
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
null, true, onPopupClose);
popup.border = '1px solid black';
popup.opacity = .7;
popup.panMapIfOutOfView = true;
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
Ale dostaje
undefined
W załączniku plik.
Doszedłem do tego co jest źle --> plik geojson
to co przekazuje powinno byc w sekcji "properties" : {}
Wyświetla mi już co chce.
Została jedynie kwestia tego jak podmienić marker na własny i obrócić go o kąt podany w attributes pliku geojson