<script src="lib/OpenLayers.js"></script>
<style type="text/css">
#map {
width: 800px;
height: 664px;
border: 1px solid black;/*边框粗细*/
}
/*声明一个边框，在此设定其大小为800*664*/
</style>
<script defer="defer" type="text/javascript">
function init(){
// 生成基本map对象，然后在map对象中设定位置和图层
var map = new OpenLayers.Map('map', {controls:[/* 这里可以new OpenLayers.Control.的对象，如果这里不new的话，可以在后边用map.add加一些控制功能，一样的*/], 'projection': 'EPSG:4326',
'units':'degrees'});
//var map = new OpenLayers.Map('map');这样写可以省略掉下边的 map.addControl(new OpenLayers.Control.PanZoomBar({div:$('nav')}));
var bounds = new OpenLayers.Bounds
(123.010546085,41.459407,123.81122292,42.190515); //对应坐标
var tiled = new OpenLayers.Layer.WMS(
"基层——边界", "http://192.168.132.88:8080/geoserver163/wms", //加载成功的前提是要有对应的机器运行着此服务
{
height: '10',
width: '10',
layers: ' topp:railway_polyline ', //图层名称
styles: 'line',
srs: 'EPSG:4326',
format: 'image/gif', tiled: 'true', tilesOrigin : "123.010546085,41.459407"
},
{maxExtent: bounds, maxResolution: 6.49429687499814E-3, projection: "EPSG:4326",
buffer: 0}
);
var tiled2 = new OpenLayers.Layer.WMS(
"道路", "http://192.168.132.88:8080/geoserver163/wms",
{
height: '380',
width: '600',
layers: 'topp:road_polyline ',
styles: '',
srs: 'EPSG:4326', transparent: "true",
format: 'image/gif', tiled: 'true', tilesOrigin : "123.010546085,41.459407"
},
{maxExtent: bounds, maxResolution: 6.49429687499814E-3, projection: "EPSG:4326",
buffer: 0,isBaseLayer:false}
);
map.addLayer(tiled2); //map对象增加图层tiled2
map.addLayer(tiled); //map对象增加图层tiled
// map.addLayers([tiled,tiled2]);用这个方法也一样
map.addControl(new OpenLayers.Control.PanZoomBar({div:$('nav')}));//放大缩小和左右移动按钮
map.addControl(new OpenLayers.Control.MouseDefaults()); //鼠标放大缩小和左右移动
map.addControl(new OpenLayers.Control.Scale($('scale')));//比例显示
map.addControl(new OpenLayers.Control.MousePosition({element: $('position')}));//坐标显示
map.addControl(new OpenLayers.Control.LayerSwitcher());//右侧的图层选择按钮
map.addControl(new OpenLayers.Control.OverviewMap());//小地图
// map.addControl(new OpenLayers.Control.KeyboardDefaults()); 键盘控制为什么加进去不好使呢？
map.zoomToExtent(bounds);//map确定坐标范围
}
</script>
<body bgcolor="#F0F8FF" οnlοad="init();">
<div style="cursor:hand; width:500; height:80%" id="map"> </div>
<!-- 500 80% 是定义黑框区的大小，如果这里不写的话，就按前边定义的map大小；如果前边也不写的话，默认地图区域大小为屏幕分辨率小一点。id必须写，不然显示缺少对象-->
<p>
<table width="890px" height="50px" style="border: 1px solid black;" >
<tr>
<td width="50%"><div id="scale"><!--和上边的scale对应，目的是把Scale对象写在指定位置 --></div></td>
<td/>
<td align="right"><div id="position"></div></td>
</tr>
</table>
</body>
2018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
