首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

GIS开发记要(四):WebGIS的HelloWorld-WMS

2012-08-13 
GIS开发记录(四):WebGIS的HelloWorld--WMS1. 通过MyEclipse创建一个Web Project (例子:OpenLayersTest),在

GIS开发记录(四):WebGIS的HelloWorld--WMS

1. 通过MyEclipse创建一个Web Project (例子:OpenLayersTest),在源码目录WebRoot新建两个目录css和js,在js目录下创建目录OpenLayers,如下图:


GIS开发记要(四):WebGIS的HelloWorld-WMS

?

?

2. 到OpenLayers Home下载OpenLayers2.11,找个目录解压

?

3. 复制OpenLayers-2.11\theme\default\style.css到开发源码目录WebRoot\css

?

4. 复制OpenLayers-2.11\img 和?OpenLayers-2.11\theme\default\img目录下的所有图片到开发目录WebRoot\js\OpenLayers\img

?

5. 复制OpenLayers-2.11\lib和OpenLayers-2.11\OpenLayers.js到可发目录WebRoot\js\OpenLayers

?

6. 刷新工程,新建helloworld.html

?

<!DOCTYPE html><html><head><title>中国地图</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/style.css" type="text/css" /><style type="text/css" media="screen">body {margin: 0;padding: 0;height: 100%;}.bigmap {position: absolute;left: 0;top: 0px;padding: 0;width: 100%;height: 100%;border: 1px solid #333;}</style><script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script><script type="text/javascript">var map, layer_province;// 第一次打开地图的中心位置(经度、纬度)var firstLon = 109.33981;var firstLat = 33.72419;function init() {// 创建MAP DIV框架map = new OpenLayers.Map("map",{maxResolution: 'auto',maxExtent: new OpenLayers.Bounds(73.44696044921875, 6.318641185760498, 135.08583068847656, 53.557926177978516)});layer_province = new OpenLayers.Layer.WMS(    "China:province", "http://10.0.0.239:8081/geoserver/wms",    {    layers: "China:province",    },    {    singleTile: true, //set single label    isBaseLayer: true,    projection: "EPSG:4326",    maxExtent: new OpenLayers.Bounds(    73.44696044921875, 6.318641185760498,     135.08583068847656, 53.557926177978516)    });map.addLayer(layer_province);map.zoomToMaxExtent();map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0);map.addControl(new OpenLayers.Control.Scale());map.addControl(new OpenLayers.Control.MousePosition());map.addControl(new OpenLayers.Control.LayerSwitcher());}</script></head><body onload="init()"><div id="map" class="bigmap"></div></body></html>
?

maxExtent: 地图最大范围,通过查看GeoServer Layer的Bounding Boxes属性获得

maxResolution: 自动放大地图

?

参考:

http://openlayers.org/dev/examples/example.html

Creating Your First Map http://docs.openlayers.org/library/introduction.html

热点排行