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二次开发_QGIS与WebGIS集成.docx GIS软件:QGIS二次开发_QGIS与外部数据源集成.docx GIS软件:QGIS二次开发_QGIS与数据库集成.docx GIS软件:QGIS二次开发_QGIS二次开发常见问题与解决方案.docx GIS...
本篇文章将对 Flex 开发系列书籍:WebGIS 开发实战进行详细的知识点总结,涵盖 Flex 概述、RIA 概述、Flex 开发基础、Flex 开发实践、Flex 与 WebGIS 开发框架、基于 Flex 的 WebGIS 基础开发、基于 Flex 的 WebGIS ...
- **HelloWorld**: 第四章实习,第一个WebGIS演示程序。 - **LayersControl**: 第四章实习,实现图层控制功能。 - **InfoQuery**: 第四章实习,实现Info查询功能。 - **Find**: 第四章实习,实现地图查找功能。 ...
总之,“webgis.rar”包含的项目展示了如何利用MapXtreme和C#构建一个基础的WebGIS应用,涵盖了GIS的基本概念和技术,对于学习和理解WebGIS开发具有一定的参考价值。通过深入研究和实践,开发者可以进一步提升自己的...
### 基于Flex的WebGIS框架设计与实现 #### 引言 随着互联网技术的飞速发展,网络地理信息系统(WebGIS)已成为地理信息科学领域的重要组成部分,它允许用户在互联网环境中进行地理信息的获取、存储、查询、分析、...
6. **JavaScript库和框架**:如OpenLayers、Leaflet、ArcGIS JavaScript API等,这些库和框架为开发者提供了丰富的地图操作和GIS功能,简化了WebGIS的开发工作。 7. **地图可视化**:WebGIS可以实现多层次、多主题...
gbd-webgis-client 基于React和OpenLayers的地图查看器。要求最新的node.js和npm 。安装克隆仓库并运行npm install : git clone https://github.com/gbd-consult/gbd-webgis-clientcd gbd-webgis-clientnpm install...
本文探讨了一种新型的地籍管理WebGIS(Web Geographic Information System)开发模式,该模式结合了J2EE(Java 2 Platform, Enterprise Edition)与ArcIMS(Internet Map Server)两大技术框架。通过深入研究这两种...
7. **扩展技术**:除了ArcGIS Server和.NET,WebGIS开发还可能涉及其他技术,如JavaScript库(如Leaflet、OpenLayers)、GIS数据格式(如Shapefile、GeoJSON)、Web服务标准(如OGC的WMS、WFS),以及数据库系统(如...
GIS开发 ArcGIS_Server简介.pdf 中间件在GIS开发中的应用.pdf 移动GIS开发手册.pdf 无线通信-开源框架下WEBGIS的设计与实现.pdf 使用Flex_API开发WebGIS应用.pdf 浅谈软件开发项目中的沟通管理.pdf 开源空间...
(7)国土资源:WebGIS可以应用于国土资源管理、国土规划、国土开发等方面。 (8)环境保护:WebGIS可以应用于环境污染监测、环境保护、生态系统监测等方面。 (9)铁路交通:WebGIS可以应用于铁路交通管理、铁路...
分享一套WEBGIS开发视频课程,2023年5月完结新课,提供...WEBGIS开发基础到进阶视频教程2023全套课程,包括:GIS基础知识,web基础知识,webgis相关软件,GIS框架,项目实战,SDK相关开发,postgis数据库,geotools等。
一个GIS生的大学四年.doc 网络GIS开发技术手册.doc 数字城市地理信息公共平台软件测评大纲.doc 手机GIS开发平台.doc 跬步科技GIS介绍.doc 基于OGC标准的移动GIS与WEBGIS的集成.doc GWC缓存的生成与失效详细说明.docx...
基于cesium的三维webgis开发讲解
2. **GIS技术**:GIS是地理信息系统,用于处理地理位置相关的数据,包括空间数据的采集、存储、管理、分析、显示和输出。在WebGIS中,GIS技术主要用于地图服务的创建、地图图层的管理和空间分析功能的实现。 3. **...
毕业设计:webgis毕业设计
### 搭建WebGIS开发环境 在信息技术不断发展的今天,地理信息系统(GIS)的应用越来越广泛,尤其是在城市管理、自然资源规划、环境保护等领域。本篇将详细介绍如何搭建基于ArcGIS Server 10.0的WebGIS开发环境,...
此外,理解地理空间数据模型和标准,如GML( Geography Markup Language)和WMS(Web Map Service),也是GIS开发的重要部分。 接着是“OSGISWG”,这可能是Open Source GIS Working Group的缩写,它关注的是开源...
3. **关键技术**:包括地图瓦片服务(Tile Service)、地图投影与坐标系统、地理编码(Geocoding)、空间分析、地理数据服务(如WMS、WFS等)以及WebGIS开发框架(如OpenLayers、Leaflet等)。 4. **开发流程**:从...
毕业设计:webgis项目 毕业设计