Сервер WMS и библиотека OpenLayers и Google API
Mapserver предоставляет возможность создания серверов WMS и WFS. Такой подход позволяет разделить картсервер и наборы карт от логики (и кода) визуализации, а также пользоваться сторонними WMS/WFS серверами. Кроме того, клиентская часть может быть написана на различных языках под разные платформы. Вот некоторые примеры: яваскрипт библиотека OpenLayers и гугловая версия API, десктопная программа QGIS и другие.
Вот ссылка, которая напомнила мне про эту технологию и сподвигла заглянуть в исходники некоторых своих проектов.
OpenLayers: начало работы
А вот пример карты НН с моего сервера, отображаемой на карте Гугл (когда-то в блоге эта карта висела, при переносе картсервера я этот пример удалил).
wms236.js
wms_ru_52_nn.html
Про создание собственного WMS-сервера можно почитать здесь Создание WMS-сервиса с помощью Mapserver и, разумеется, в первоисточнике WMS Servers with MapServer.
Вот ссылка, которая напомнила мне про эту технологию и сподвигла заглянуть в исходники некоторых своих проектов.
OpenLayers: начало работы
А вот пример карты НН с моего сервера, отображаемой на карте Гугл (когда-то в блоге эта карта висела, при переносе картсервера я этот пример удалил).
wms236.js
var MAGIC_NUMBER=6356752.3142;
var WGS84_SEMI_MAJOR_AXIS = 6378137.0;
var WGS84_ECCENTRICITY = 0.0818191913108718138;
var DEG2RAD=0.0174532922519943;
var PI=3.14159267;
var FORMAT_DEFAULT="image/png";
var MERC_ZOOM_DEFAULT = 15;
function dd2MercMetersLng(p_lng) {
return WGS84_SEMI_MAJOR_AXIS * (p_lng*DEG2RAD);
}
function dd2MercMetersLat(p_lat) {
var lat_rad = p_lat * DEG2RAD;
return WGS84_SEMI_MAJOR_AXIS * Math.log(Math.tan((lat_rad + PI / 2) / 2) * Math.pow( ((1 - WGS84_ECCENTRICITY * Math.sin(lat_rad)) / (1 + WGS84_ECCENTRICITY * Math.sin(lat_rad))), (WGS84_ECCENTRICITY/2)));
}
CustomGetTileUrl=function(a,b,c) {
if (this.myMercZoomLevel == undefined) {
this.myMercZoomLevel = MERC_ZOOM_DEFAULT;
}
if (this.myFormat == undefined) {
this.myFormat = FORMAT_DEFAULT;
}
if (typeof(window['this.myStyles'])=="undefined") this.myStyles="";
var lULP = new GPoint(a.x*256,(a.y+1)*256);
var lLRP = new GPoint((a.x+1)*256,a.y*256);
var lUL = G_NORMAL_MAP.getProjection().fromPixelToLatLng(lULP,b,c);
var lLR = G_NORMAL_MAP.getProjection().fromPixelToLatLng(lLRP,b,c);
var lBbox=dd2MercMetersLng(lUL.x)+","+dd2MercMetersLat(lUL.y)+","+dd2MercMetersLng(lLR.x)+","+dd2MercMetersLat(lLR.y);
var lSRS="EPSG:41001";
var lURL=this.myBaseURL;
lURL+="&REQUEST=GetMap";
lURL+="&SERVICE=WMS";
lURL+="&VERSION=1.1.1";
lURL+="&LAYERS="+this.myLayers;
lURL+="&STYLES="+this.myStyles;
lURL+="&FORMAT="+this.myFormat;
lURL+="&BGCOLOR=0xFFFFFF";
lURL+="&TRANSPARENT=TRUE";
lURL+="&SRS="+lSRS;
lURL+="&BBOX="+lBbox;
lURL+="&WIDTH=256";
lURL+="&HEIGHT=256";
lURL+="&reaspect=false";
//document.write(lURL + "
")
//alert(" url is " + lURL);
return lURL;
}
function customOpacity() { return this.myOpacity; }
wms_ru_52_nn.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
</head>
<body>
<div id="map" style="width: 480px; height: 360px"></div>
<script src="http://maps.google.com/maps?file=api&v=2.47&key=ABQIAAAA3_I9SMdcHuWV4-_KzNVuFRTANUniEb_EzjeFkl9Mls1H2avqJBQUx0CKpyG9m5g8AKED-XD5sPCO6Q" type="text/javascript"></script>
<script src="http://support.mobigroup.ru/files/wms/wms236.js" type="text/javascript"></script>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.addControl(new GScaleControl());
// Create tile layers
var tile1= new GTileLayer(new GCopyrightCollection(""),1,17);
tile1.myLayers='nn_poa,nn_ppab';
tile1.myFormat='image/png';
tile1.myBaseURL='http://dload.mobigroup.ru/ru_52_nn/mapserv?';
tile1.getTileUrl=CustomGetTileUrl;
var layer3=[G_HYBRID_MAP.getTileLayers()[0],tile1];
var custommap3 = new GMapType(layer3, G_SATELLITE_MAP.getProjection(), "WMS 1", G_HYBRID_MAP);
map.getMapTypes().length = 0;
map.addMapType(custommap3);
map.setCenter(new GLatLng(56.293, 44.065), 16);
map.addControl(new GLargeMapControl());
</script>
<br>
</body>
</html>
Про создание собственного WMS-сервера можно почитать здесь Создание WMS-сервиса с помощью Mapserver и, разумеется, в первоисточнике WMS Servers with MapServer.
Comments