1. 程式人生 > >OpenLayers圖形附加資料與回撥

OpenLayers圖形附加資料與回撥

OpenLayers的feature有個feature.values_.data屬性,可以為其附加各種自定義資料。

當建立一個feature時:

var myData = {
	value0: '文字',
	leftClickCallback: function(params) {},
	leftClickCallbackParams: {value: 1},
	rightClickCallback: function(params) {},
	rightClickCallbackParams: {value: 2}
};
var feature = new ol.Feature({
    geometry: new ol.geom.Point([0,0]),
    data: myData
});

這樣就為建立的點feature附加了自定義的資料。

當獲取到該點feature時,通過其feature.values_.data屬性即可拿到自定義的資料。

若需要點選回撥或者執行自定義操作,那麼將所要執行的函式和引數從該data中取出,然後將引數傳給函式呼叫即可。

// 左鍵點選互動
map.on("click", function(event) {
	var pixel = map.getEventPixel(event.originalEvent);
	map.forEachFeatureAtPixel(pixel, function(feature, layer) {
		if(feature) {
			var data = feature.values_.data;
			if(data && data.leftClickCallback) {
				event.clickPoint = self.map.getEventCoordinate(event);
				data.leftClickCallback(event, feature, data.leftClickCallbackParams);
			}
		}
	});
});
// 右鍵點選互動
$(map.getViewport()).on("contextmenu", function(event) {
    event.preventDefault(); //遮蔽自帶的右鍵事件
    var pixel = [event.offsetX, event.offsetY];
    var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
        return feature;
    });

    if(feature) {
        var data = feature.values_.data;
        if(data && data.rightClickCallback) {
            event.clickPoint = map.getEventCoordinate(event);
            data.rightClickCallback(event, feature, data.rightClickCallbackParams);
        }
    }
});