var layer_to_select_from = [ { _layerId: "select_layer_1", _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms", _layerName: "tsp_pol_ot" }, { _layerId: "select_layer_2", _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms", _layerName: "trs_pol_oria_topikon_rymotomikon" }, { _layerId: "select_layer_3", _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms", _layerName: "rym_pol_tomeis_sxediou_polis" }, { _layerId: "select_layer_4", _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms", _layerName: "map_lin_odiko" } ]; function user_selected(v) { console.log(v) } var selection_translation = { el_gr: { tab_title: 'Πείτε μας την γνώμη σας', btn1: 'Ξενινήστε!', btn1_tooltip: 'Κάντε κλικ πάνω στον χάρτη', please_wait: 'Παρακαλώ περιμένετε...', win_title: 'Παρακαλώ επιλέξτε να', opinion: 'Προτείνετε για το ', point: ' στο σημείο αυτό', selection_context_draw_point: 'Σχεδιάστε ένα σημείο', selection_context_draw_line: 'Σχεδιάστε μία γραμμή', selection_context_draw_polygon: 'Σχεδιάστε ένα πολύγωνο', tsp_pol_ot: 'layer 1', trs_pol_oria_topikon_rymotomikon: 'layer 2', rym_pol_tomeis_sxediou_polis: 'layer 3', map_lin_odiko: 'layer 4' }, en_us: { tab_title: 'Πείτε μας την γνώμη σας', btn1: 'Ξενινήστε!', btn1_tooltip: 'Κάντε κλικ πάνω στον χάρτη', please_wait: 'Παρακαλώ περιμένετε...', win_title: 'Προτείνετε για το ', opinion: 'Πείτε την γνώμη σας για το ', point: ' στο σημείο αυτό', selection_context_draw_point: 'Σχεδιάστε ένα σημείο', selection_context_draw_line: 'Σχεδιάστε μία γραμμή', selection_context_draw_polygon: 'Σχεδιάστε ένα πολύγωνο', tsp_pol_ot: 'layer 1', trs_pol_oria_topikon_rymotomikon: 'layer 2', rym_pol_tomeis_sxediou_polis: 'layer 3', map_lin_odiko: 'layer 4' } }; var selection_pointLayer = new OpenLayers.Layer.Vector("Selection Point Layer"); var selection_lineLayer = new OpenLayers.Layer.Vector("Selection Line Layer"); var selection_polygonLayer = new OpenLayers.Layer.Vector("Selection Polygon Layer"); var selection_drawControls = { point: new OpenLayers.Control.DrawFeature(selection_pointLayer, OpenLayers.Handler.Point), line: new OpenLayers.Control.DrawFeature(selection_lineLayer, OpenLayers.Handler.Path), polygon: new OpenLayers.Control.DrawFeature(selection_polygonLayer, OpenLayers.Handler.Polygon) }; selection_pointLayer.events.on({ 'featureadded': function (obj) { selection_drawControls['point'].deactivate(); selection_user_selected(selection_pointLayer, 'point'); selection_add_opinion(false); } }); selection_lineLayer.events.on({ 'featureadded': function (obj) { selection_drawControls['line'].deactivate(); selection_user_selected(selection_lineLayer, 'line'); selection_add_opinion(false); } }); selection_polygonLayer.events.on({ 'featureadded': function (obj) { selection_drawControls['polygon'].deactivate(); selection_user_selected(selection_polygonLayer, 'polygon'); selection_add_opinion(false); } }); function selection_contextMenu_items() { var items = [ { id: 'selection_context_menu', xtype: 'label', html: selection_translation[language].win_title, _selection_win: null }, { xtype: 'menuseparator' }, { id: 'selection_context_menu_please_wait', text: selection_translation[language].please_wait, iconCls: 'selection_please_wait' } ]; layer_to_select_from.forEach(function (ly) { items.push( { text: selection_translation[language].opinion + selection_translation[language][ly._layerName] + selection_translation[language].point, id: ly._layerId, iconCls: 'selection_context_layer', hidden: true } ) }); items.push({ xtype: 'menuseparator' }); items.push({ text: selection_translation[language].selection_context_draw_point, id: 'selection_context_draw_point', iconCls: 'selection_context_draw_point', hidden: true, handler: function () { selection_toggleControl('point'); } }); items.push({ text: selection_translation[language].selection_context_draw_line, id: 'selection_context_draw_line', iconCls: 'selection_context_draw_line', hidden: true, handler: function () { selection_toggleControl('line'); } }); items.push({ text: selection_translation[language].selection_context_draw_polygon, id: 'selection_context_draw_polygon', iconCls: 'selection_context_draw_polygon', hidden: true, handler: function () { selection_toggleControl('polygon'); } }); items.push({ xtype: 'menuseparator' }); items.push({ text: _map_contextMenu_Cancel, iconCls: 'selection_cancel', handler: function () { selection_add_opinion(false); Ext.getCmp("selection_btn1").toggle(true); } }); return items } var selection_contextMenu = Ext.create("Ext.menu.Menu", { floating: true, ignoreParentClick: true, width: 260, items: selection_contextMenu_items() }); function init_selection() { var selection_tab = { xtype: 'toolbar', border: false, iconCls: 'selection_tab', id: 'maptab_toolbar_selection_tab', title: selection_translation[language].tab_title, items: [ {xtype: 'tbseparator'}, { xtype: 'button', iconCls: 'selection_btn1', id: 'selection_btn1', text: selection_translation[language].btn1, tooltip: selection_translation[language].btn1_tooltip, toggleGroup: 'map_control_one_btn_allowed_group', enableToggle: false, style: 'background-color:#ffff30;border-color: red;', toggleHandler: function (item, state) { selection_add_opinion(state); } } ] }; Ext.getCmp("maptab_north_tabpanel").insert(0, selection_tab); map.addLayers([selection_pointLayer, selection_lineLayer, selection_polygonLayer]); for (var key in selection_drawControls) { map.addControl(selection_drawControls[key]); } } init_onload_fn.push(init_selection); function selection_toggleControl(element) { selection_add_opinion(false); selection_pointLayer.destroyFeatures(); selection_lineLayer.destroyFeatures(); selection_polygonLayer.destroyFeatures(); for (var key in selection_drawControls) { var control = selection_drawControls[key]; if (element === key) { control.activate(); } else { control.deactivate(); } } } function selection_add_opinion(state) { mapUnregisterEvents("click", selection_info_clickEvent); if (state) { Ext.get('maptab_map').setStyle("cursor", "copy"); mapOnClick(selection_info_clickEvent); document.onkeydown = function (evt) { evt = evt || window.event; if (evt.keyCode === 27) { Ext.getCmp("selection_btn1").toggle(false); } } } else { mapUnregisterEvents("click", selection_info_clickEvent); Ext.get('maptab_map').setStyle("cursor", "default"); Ext.getCmp("selection_btn1").toggle(false); selection_drawControls['point'].deactivate(); selection_drawControls['line'].deactivate(); selection_drawControls['polygon'].deactivate(); } } function selection_info_clickEvent(evt) { if (evt) { Ext.getCmp("selection_context_menu_please_wait").show(); layer_to_select_from.forEach(function (ly) { Ext.getCmp(ly._layerId).hide(); }); Ext.getCmp("selection_context_draw_point").hide(); Ext.getCmp("selection_context_draw_line").hide(); Ext.getCmp("selection_context_draw_polygon").hide(); var topleft = Ext.getCmp("maptab_mapPanel").getXY(); var _point_show_menu = new OpenLayers.Pixel(Number(evt.xy.x) + topleft[0], Number(evt.xy.y) + topleft[1]); var _point_info = new OpenLayers.Pixel(Number(evt.xy.x), Number(evt.xy.y)); selection_contextMenu._pos = _point_show_menu; selection_contextMenu.showAt(_point_show_menu); selection_featureInfo(_point_info); } } function selection_featureInfo(_point) { var lonlat = map.getLonLatFromPixel(_point); var selection_featureInfo_request = new fn_get(); var _queryObject = selection_featureInfo_fetch_querable_layers(_point); var _feature_count = 1000; if (_queryObject.length > 0) { selection_featureInfo_request._async = true; selection_featureInfo_request._query = fn_createGetQuery({ _width: Math.round(mapGetSize().w), _height: Math.round(mapGetSize().h), _x: Math.round(_point.x), _y: Math.round(_point.y), _bbox: mapGetExtent().toString(), _srs: mapGetCurrentProjection(), _lon: lonlat.lon, _lat: lonlat.lat, _feature_count: _feature_count }); selection_featureInfo_request._data = _queryObject; selection_featureInfo_request._timeout = 15000; selection_featureInfo_request._success = selection_featureInfo_success; selection_featureInfo_request._failure = selection_featureInfo_failure; selection_featureInfo_request.get(); selection_add_opinion(false); } } function selection_featureInfo_fetch_querable_layers(p) { var lonlat = map.getLonLatFromPixel(p); if (mapGetCurrentProjection() !== "EPSG:4326") { lonlat.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection("EPSG:4326")); } var b = []; var features = []; Ext.each(layer_to_select_from, function (item) { b.push({ _layerId: item._layerId, _serviceType: "WMS", _username: null, _serviceUrl: item._urlWMS, _serviceName: "WMS", _servicePort: "", _geometryField: "geom", _password: null, _layerName: item._layerName, _version: "1.3.0", _isService: true, _cqlFilter: null, _infoLon: lonlat.lon, _infoLat: lonlat.lat, _nativeSRS: "EPSG:4326", _featureInfoFormat: "application/vnd.ogc.gml", _featureId: features.join(","), _request: "getInfo" }); }); return b; } function selection_featureInfo_success(_response, _opts) { var _response = Ext.JSON.decode(_response.responseText); Ext.getCmp("selection_context_menu_please_wait").hide(); Ext.each(_response, function (item) { Ext.each(item._response._attributes, function(attributes) { if (item._response._attributes[0]){ var _feature = attributes; var record = _feature[0]; var feature = { _featureId: record._featureId, _layerId: record._layerId, _srsName: record._srsName, _featureUrl: record._featureUrl, _featureGeomFormat: record._featureGeomFormat }; Ext.getCmp(record._layerId).show(); Ext.getCmp(record._layerId).setHandler(function () { var p = new fn_get(); p._async = true; p._url = _proxy_url + "?proxy=proxy&url=" + feature._featureUrl.replace('application/vnd.ogc.gml', 'application/json'); p._timeout = 5000; p._success = function(_response, _opts) { var vector_layer = new OpenLayers.Layer.Vector(); var featurecollection = JSON.parse(_response.responseText); var geojson_format = new OpenLayers.Format.GeoJSON(); vector_layer.addFeatures(geojson_format.read(featurecollection)); var tmp = vector_layer.features[0].geometry.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection('EPSG:4326')); var gml = new OpenLayers.Format.GML(); var pGML = null; if (tmp.CLASS_NAME === 'OpenLayers.Geometry.Point') { pGML = gml.buildGeometry.point.apply(gml, [tmp]); } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiPoint') { pGML = gml.buildGeometry.multipoint.apply(gml, [tmp]); } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.LineString') { pGML = gml.buildGeometry.linestring.apply(gml, [tmp]); } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiLineString') { pGML = gml.buildGeometry.multilinestring.apply(gml, [tmp]); } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.Polygon') { pGML = gml.buildGeometry.polygon.apply(gml, [tmp]); } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiPolygon') { pGML = gml.buildGeometry.multipolygon.apply(gml, [tmp]); } var plgGMLString = (new XMLSerializer()).serializeToString(pGML); user_selected(plgGMLString) }; p.get(); }); } }); }); Ext.getCmp("selection_context_draw_point").show(); Ext.getCmp("selection_context_draw_line").show(); Ext.getCmp("selection_context_draw_polygon").show(); } function selection_featureInfo_failure() { console.log('error)'); } function selection_user_selected(ly, type) { var tmp = ly.features[0].geometry.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection('EPSG:4326')); var gml = new OpenLayers.Format.GML(); var pGML = null; if (type === 'point') { pGML = gml.buildGeometry.point.apply(gml, [tmp]); } else if (type === 'line') { pGML = gml.buildGeometry.linestring.apply(gml, [tmp]); } else if (type === 'polygon') { pGML = gml.buildGeometry.polygon.apply(gml, [tmp]); } var plgGMLString = (new XMLSerializer()).serializeToString(pGML); user_selected(plgGMLString); }