You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
16 KiB
438 lines
16 KiB
2 years ago
|
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);
|
||
|
|
}
|