`
tessykandy
  • 浏览: 80589 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • GIS
阅读更多

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


 

 

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

  • 大小: 6.2 KB
  • 大小: 4.2 KB
分享到:
评论

相关推荐

    GIS软件:QGIS二次开发-Python基础与QGIS脚本开发+GIS软件:QGIS二次开发-QGISAPI文档解析

    GIS软件:QGIS二次开发_QGIS与WebGIS集成.docx GIS软件:QGIS二次开发_QGIS与外部数据源集成.docx GIS软件:QGIS二次开发_QGIS与数据库集成.docx GIS软件:QGIS二次开发_QGIS二次开发常见问题与解决方案.docx GIS...

    flex开发系列书籍:WebGIS开发实战

    本篇文章将对 Flex 开发系列书籍:WebGIS 开发实战进行详细的知识点总结,涵盖 Flex 概述、RIA 概述、Flex 开发基础、Flex 开发实践、Flex 与 WebGIS 开发框架、基于 Flex 的 WebGIS 基础开发、基于 Flex 的 WebGIS ...

    WebGIS实习代码-相关文档

    - **HelloWorld**: 第四章实习,第一个WebGIS演示程序。 - **LayersControl**: 第四章实习,实现图层控制功能。 - **InfoQuery**: 第四章实习,实现Info查询功能。 - **Find**: 第四章实习,实现地图查找功能。 ...

    webgis.rar_MapXtreme_pudn mapxtreme webg_webgis_webgis-digital-M

    总之,“webgis.rar”包含的项目展示了如何利用MapXtreme和C#构建一个基础的WebGIS应用,涵盖了GIS的基本概念和技术,对于学习和理解WebGIS开发具有一定的参考价值。通过深入研究和实践,开发者可以进一步提升自己的...

    flex开发系列书籍:WebGIS框架设计与实现

    ### 基于Flex的WebGIS框架设计与实现 #### 引言 随着互联网技术的飞速发展,网络地理信息系统(WebGIS)已成为地理信息科学领域的重要组成部分,它允许用户在互联网环境中进行地理信息的获取、存储、查询、分析、...

    WEBGIS.rar_web gis_web 定位_webgis定位_webgis系统_web定位

    6. **JavaScript库和框架**:如OpenLayers、Leaflet、ArcGIS JavaScript API等,这些库和框架为开发者提供了丰富的地图操作和GIS功能,简化了WebGIS的开发工作。 7. **地图可视化**:WebGIS可以实现多层次、多主题...

    gbd-webgis-client:GBD WebGIS客户端-GBD WebSuite开始之前的开发

    gbd-webgis-client 基于React和OpenLayers的地图查看器。要求最新的node.js和npm 。安装克隆仓库并运行npm install : git clone https://github.com/gbd-consult/gbd-webgis-clientcd gbd-webgis-clientnpm install...

    基于J2EE和ArcIMS的地籍管理WebGIS-----南京地税地理信息系统

    本文探讨了一种新型的地籍管理WebGIS(Web Geographic Information System)开发模式,该模式结合了J2EE(Java 2 Platform, Enterprise Edition)与ArcIMS(Internet Map Server)两大技术框架。通过深入研究这两种...

    WebGIS开发-ArcGIS Server与.NET - 源码

    7. **扩展技术**:除了ArcGIS Server和.NET,WebGIS开发还可能涉及其他技术,如JavaScript库(如Leaflet、OpenLayers)、GIS数据格式(如Shapefile、GeoJSON)、Web服务标准(如OGC的WMS、WFS),以及数据库系统(如...

    GIS开发 PostGIS WebGIS 开源地图 移动GIS

    GIS开发 ArcGIS_Server简介.pdf 中间件在GIS开发中的应用.pdf 移动GIS开发手册.pdf 无线通信-开源框架下WEBGIS的设计与实现.pdf 使用Flex_API开发WebGIS应用.pdf 浅谈软件开发项目中的沟通管理.pdf 开源空间...

    良心出品WebGIS应用现状及发展趋势.doc

    (7)国土资源:WebGIS可以应用于国土资源管理、国土规划、国土开发等方面。 (8)环境保护:WebGIS可以应用于环境污染监测、环境保护、生态系统监测等方面。 (9)铁路交通:WebGIS可以应用于铁路交通管理、铁路...

    WEBGIS开发基础到进阶视频教程2023-WEBGIS视频教程2023

    分享一套WEBGIS开发视频课程,2023年5月完结新课,提供...WEBGIS开发基础到进阶视频教程2023全套课程,包括:GIS基础知识,web基础知识,webgis相关软件,GIS框架,项目实战,SDK相关开发,postgis数据库,geotools等。

    GIS开发 openGIS OGC WEBGIS 移动GIS

    一个GIS生的大学四年.doc 网络GIS开发技术手册.doc 数字城市地理信息公共平台软件测评大纲.doc 手机GIS开发平台.doc 跬步科技GIS介绍.doc 基于OGC标准的移动GIS与WEBGIS的集成.doc GWC缓存的生成与失效详细说明.docx...

    三维webgis开发-Cesium

    基于cesium的三维webgis开发讲解

    gis:webgis管理系统模板

    2. **GIS技术**:GIS是地理信息系统,用于处理地理位置相关的数据,包括空间数据的采集、存储、管理、分析、显示和输出。在WebGIS中,GIS技术主要用于地图服务的创建、地图图层的管理和空间分析功能的实现。 3. **...

    毕业设计:webgis毕业设计.zip

    毕业设计:webgis毕业设计

    搭建WebGIS开发环境

    ### 搭建WebGIS开发环境 在信息技术不断发展的今天,地理信息系统(GIS)的应用越来越广泛,尤其是在城市管理、自然资源规划、环境保护等领域。本篇将详细介绍如何搭建基于ArcGIS Server 10.0的WebGIS开发环境,...

    GIS开发 OSGISWG WebGIS

    此外,理解地理空间数据模型和标准,如GML( Geography Markup Language)和WMS(Web Map Service),也是GIS开发的重要部分。 接着是“OSGISWG”,这可能是Open Source GIS Working Group的缩写,它关注的是开源...

    webGIS教学课件

    3. **关键技术**:包括地图瓦片服务(Tile Service)、地图投影与坐标系统、地理编码(Geocoding)、空间分析、地理数据服务(如WMS、WFS等)以及WebGIS开发框架(如OpenLayers、Leaflet等)。 4. **开发流程**:从...

    毕业设计:webgis项目 毕业设计.zip

    毕业设计:webgis项目 毕业设计

Global site tag (gtag.js) - Google Analytics