Дипломная работа по Mapserver. Редактирование объектов.
Добавлено: 05 июн 2013, 11:20
Добрый день. Пишу диплом по Mapserver. Суть такая: получить карту с Mapserver и при клике на карту выбранный объект должен выделяться. Затем он отрисовывается на canvas и редактируется. Но я не могу понять как получить информацию об этом объекте(нужно знать и координаты объекта в проекции и его же координаты на экране для того чтоб отрисовать его на canvas). А потом если отрдактируется объект, тоизменённые координаты тоже надо получить в проекции. Пока что написала только вот это.
Ещё был такой вариант пересчёта координат, но я не до конца поняла как потом наложить под него правильно подложку.
Код: Выделить всё
<html>
<head>
<title>OpenLayers Example</title>
<script src="/workshop/local/OpenLayers-2.12/OpenLayers.js"></script>
</head>
<body onload="init()">
<div style="width:100%; height:100%" id="map"></div>
<script type="text/javascript">
function init()
{
options = {
div: "map",
maxExtent: new OpenLayers.Bounds(388107.634400379, 5203120.88405952, 500896.339019834, 5310243.30613897),
projection: new OpenLayers.Projection("EPSG:26915"),
layers: [
layer_drgs = new OpenLayers.Layer.WMS( "drgs",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "drgs",
srs:"EPSG:26915",
transparent: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_airports = new OpenLayers.Layer.WMS( "airports",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "airports",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_majrdln3 = new OpenLayers.Layer.WMS( "majrdln3",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "majrdln3",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_dlgstln2 = new OpenLayers.Layer.WMS( "dlgstln2",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "dlgstln2",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_lakespy2 = new OpenLayers.Layer.WMS( "lakespy2",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "lakespy2",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_ctybdpy2 = new OpenLayers.Layer.WMS( "ctybdpy2",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "ctybdpy2",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: true
}),
layer_mcd90py2 = new OpenLayers.Layer.WMS( "mcd90py2",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "mcd90py2",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_twprgpy3 = new OpenLayers.Layer.WMS( "twprgpy3",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "twprgpy3",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_ctyrdln3 = new OpenLayers.Layer.WMS( "ctyrdln3",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "ctyrdln3",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_ctyrdln3_anno = new OpenLayers.Layer.WMS( "ctyrdln3_anno",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "ctyrdln3_anno",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_majrdln3_anno = new OpenLayers.Layer.WMS( "majrdln3_anno",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "majrdln3_anno",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
}),
layer_mcd90py2_anno = new OpenLayers.Layer.WMS( "mcd90py2_anno",
"http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map&",
{
layers: "mcd90py2_anno",
srs:"EPSG:26915",
transparent: true,
visibility: true
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false
})
]
};
map = new OpenLayers.Map(options);
map.zoomToMaxExtent();
// шкала для выбора заранее настроенного масштаба
map.addControl(new OpenLayers.Control.PanZoomBar());
// панель инструментов (сдвиг и масштабирование)
//map.addControl(new OpenLayers.Control.MouseToolbar());
// переключатель видимости слоев
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
// координаты текущего положения мыши
map.addControl(new OpenLayers.Control.MousePosition());
// обзорная карта
map.addControl(new OpenLayers.Control.OverviewMap());
// горячие клавиши
map.addControl(new OpenLayers.Control.KeyboardDefaults());
function showInfo(e) {
var popup = new OpenLayers.Popup.FramedCloud("popup",
map.getLonLatFromPixel(e.xy),
new OpenLayers.Size(120,120),
e.text,
null,
true
);
map.addPopup(popup);
}
var click_ctrl = new OpenLayers.Control.WMSGetFeatureInfo({
url: "http://localhost/cgi-bin/mapserv?map=/var/www/mapserverdemo/workshop/itasca.map",
layers: [layer_airports],
queryVisible: true,
infoFormat: 'application/vnd.ogc.gml',
autoActivate: true,
vendorParams: {radius: 10 },
eventListeners: {
'getfeatureinfo': function(e) {
console.log(e);
console.log(e.xy);
console.log('freeText');
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(e.xy),
null,
e.xy,
null,
true
));
}
}
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
//click_ctrl.events.register('getfeatureinfo', this, showInfo);
map.addControl(click_ctrl);
//click_ctrl.activate();
//map.addControl(new OpenLayers.Control.CustomNavToolbar());
}
</script>
</body>
</html>Код: Выделить всё
<html>
<canvas id="canv" width="870px" height="470px" style="position: absolute; left: 1px; top: 1px; z-index: 1; border: solid 2px;">
</canvas>
<img id="cat" src="/workshop/graphics/reference.png" alt="Спящий кот" width="470" height="470">
<script type="text/javascript">
canva = document.getElementById("canv");
ctx = canva.getContext("2d");
//var pic = new Image(); // "Создаём" изображение
//pic.src = "/111111.png";
//ctx.drawImage(pic, 0, 0);
//ctx.fillRect(20,20,400,400);
//canva.style.display = "none";
// Global coord map
x_1_g = 388107.634400379;
y_1_g = 5203120.88405952;
x_2_g = 500896.339019834;
y_2_g = 5310243.30613897;
// Width and Height global map
w_g = x_2_g - x_1_g;
h_g = y_2_g - y_1_g;
if(h_g > 470)
{
//document.write(w_g+"<br>");
//document.write(h_g+"<br>");
h_g = h_g/1000;
//document.write(h_g+"<br>");
}
// Global coord point
x_p_g = 469137.000000;
y_p_g = 5271647.000000;
// Global coord with null
x_p_g_m = x_p_g - x_1_g;
y_p_g_m = y_p_g - y_1_g;
x_p_g_m = x_p_g_m/1000;//
y_p_g_m = y_p_g_m/1000;//
//document.write(x_p_g_m+"<br>");
//document.write(y_p_g_m+"<br>");
//
pix_x = w_g/870;
pix_y = h_g/470;
//document.write(pix+"<br>");
l_x = x_p_g_m/pix_x;
l_y = y_p_g_m/pix_y;
//document.write(l_x+"<br>");
//document.write(l_y+"<br>");
x = x_p_g - x_1_g;
y = y_1_g - y_p_g;
//document.write(x+"<br>");
//document.write(y+"<br>");
var cat = document.getElementById("cat");
ctx.drawImage(cat,0,0,470,470);
ctx.fillRect(x_p_g_m,y_p_g_m,4,4);
</script>
</html>