电子海图开发第二十一篇 web电子海图 监听图标点击事件（共一百篇）

上一节我们讲述了在地图上加载图标，这一节我么来讲述监听图标的点击事件

//我们监听map的点击事件。map是之前章节我们加载map的容器
map.on('click', function(e) {
		clickship(e);
	});
// 点击响应函数
function clickship(e) {
// 找到鼠标点击位置的feature
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
     return feature;}, 0);
	if (feature != null) {
	selectship(feature);	
	}
}

//根据feature显示船舶图标的详细参数，featrue中包含了上一节中json数据中的信息
function selectship(feature) {
	
	$("#shipdata").css("display", "block");
	$("#shipExt_name").html(feature.get('name'));
	$("#si_mmsi").html(feature.get('mmsi'));
	$("#si_heading").html(feature.get('head'));
	$("#si_callsign").html(feature.get('callsign'));
	$("#si_course").html(parseInt(feature.get('course') / 3.14 * 180));
	$("#si_imo").html(feature.get('imo'));
	$("#si_speed").html(feature.get('speed'));
	$("#si_eta").html(feature.get('eta'));
	$("#si_aistype").html(feature.get('aistype'));
	$("#si_shipType").html(getShipType(feature.get('shiptype')));
	$("#si_lat").html(formatlatlon(feature.get('lat')));
	$("#si_shipStatus").html(getStatus(feature.get('status')));
	$("#si_lng").html(formatlatlon(feature.get('lon')));

}

 

实际的显示效果如图所示，当然了在开发的时候我们还可以在选中的位置加入一个选中的效果

 

 

 

联系作者及参考文章：web电子海图接口 web电子海图 ，电子海图开发引擎