<html>
<head><title>OpenLayers Hello World</title>
<style type="text/css">
.map {
width: 800px;
height: 500px;
border: 1px solid #ccc;
}
</style>
<script type = "text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type = "text/javascript">
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);//范围
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:2000",
units: 'm'
};//一些关于数据的选项
var map = new OpenLayers.Map("map", options);//实例化一个地图类
var wms = new OpenLayers.Layer.WMS("mytest:states",
"http://localhost:8080/geoserver/test/wms",
{ LAYERS: 'test:states' }
);//以WMS的格式实例化图层类OpenLayers.Layer
map.addLayer(wms);//在Map对象上加载Layer对象
map.zoomToMaxExtent();//缩放值最大,本地图不可缩放只显示地图
} </script>
</head>
<body onload="init()">
<h1>My First OpenLayers </h1>
<div id="map" class="map"></div>
</body>
</html>

介绍一下

var wms = new OpenLayers.Layer.WMS("mytest:states",

"http://localhost:8080/geoserver/test/wms",
{ LAYERS: 'test:states' }
);

中的各个参数,第一个即图层的名称,第二个即图层所在的URL地址,第三个params也是图层的一些信息,还有一个参数options在这里没用到。

Openlayers实现第一张地图的更多相关文章

  1. 如何在GeoServer上发布一张地图

    在GeoServer上发布一张地图步骤大致如下: 先准备一张地图,格式可以是:jpg.png.tif等. Jpg文件对应的坐标信息文件为jgw格式文件,投影文件为prj文件;Tif文件对应的坐标信息文 ...

  2. OpenLayers加载QQ地图(转)

    OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...

  3. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  4. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. AndroidImageSlider第一张图闪过的问题解决

    1. AndroidImageSlider的使用: 参考源码:https://github.com/daimajia/AndroidImageSlider 当然网上介绍使用方法的很多,搜一搜. 2. ...

  6. 全球第一张中文网络协议分析图——By 成都科来软件

    网上内容比较全面的网络协议图并不是很多,这些网络协议图大多只遵循OSI,对于TCP/IP基本不支持,有些协议图表示也不够准确.另一方面,现在网上能找到的协议图全都是英文版本,使用起来不是很方便.国内的 ...

  7. 震撼!全网第一张源码分析全景图揭秘Nginx

    不管是C/C++技术栈,还是PHP,Java技术栈,从事后端开发的朋友对nginx一定不会陌生. 想要深入学习nginx,阅读源码一定是非常重要的一环,但nginx源码量毕竟还是不算少,一不小心就容易 ...

  8. 【01】openLayers 第一个地图

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. openlayers加载百度地图

    最近在做openlayers添加百度地图的扩展类,经过轮番的尝试,终于将其接入了,但是发现偏差比较大,有根据百度的坐标进行了比对,将切片原点进行了调整,发现OK了.打开百度地图,可以看出切片的路径如: ...

随机推荐

  1. ubuntu 安装LNMP

    How To Install Linux, nginx, MySQL, PHP (LEMP) stack on Ubuntu 12.04 PostedJune 13, 2012 802.8kviews ...

  2. ant 配置 和测试 1

    配置路径 D:\dba\change\UAT\unity\schema\test ----v0 版本 sql.xml   (默认target 是versionfinal ,也就是最终版本) --ver ...

  3. 【匈牙利算法】 二分图模板 poj 1274

    #include <iostream> #include <cstdio> #include <memory.h> using namespace std; int ...

  4. UIImagePickerController 相关

    UIImagePickerController是系统封装好的一个导航视图控制器,使用其开发者可以十分方便的进行相机相册相关功能的调用.UIImagePickerController继承于UINavig ...

  5. HDU1865--More is better(统计并查集的秩(元素个数))

    More is better Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 327680/102400 K (Java/Others) ...

  6. MyEclipse8.5优化经验

    第一步: 取消自动validation    validation有一堆,什么xml.jsp.jsf.js等等,我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下!    取消方法:   ...

  7. Codeforces Round #361 (Div. 2) C.NP-Hard Problem

    题目连接:http://codeforces.com/contest/688/problem/C 题意:给你一些边,问你能否构成一个二分图 题解:二分图:二分图又称作二部图,是图论中的一种特殊模型. ...

  8. Ubuntu Linux系统下apt-get命令详解

    整理了Ubuntu Linux操作系统下apt-get命令的详细说明,分享给大家.常用的APT命令参数: apt-cache search package 搜索包 apt-cache show pac ...

  9. DFS序的题目列表

    所谓dfs序就是将之前的顺序进行修改,获得一个新的序列,然后再新的序列下进行一系列其他的操作 一般题目给你的都会是一棵树,然后点之间都是无关的,我们首要的任务就是先把这些序列重新排.然后再根据dfs的 ...

  10. Android应用性能测试之CPU和内存占用

    最近发现自己学的很多东西没有做好积淀的工作,也萌生了写一些东西的念头.本人也没有写博客的习惯,下边就写一下手机端的性能测试. 最近公司,要我们从事对竞品的性能测试,我负责CPU和内存的性能测试,下面就 ...