Openlayers Demo:

 <html>
<head>
<title>OpenLayers Example</title>
<script src="OpenLayers.js"></script>
</head>
<body>
<style type="text/css">
.Third{
margin: 10px 0;
padding: 6px 20px;
font-family: 'Microsoft Yahei';
margin: 15px 0;
font-size: 16px;
color: fff;
background: #C6EFD2;
color: #999;
border-radius: 4px;
clear: both;}
.Highlighter{
border: solid 1px #ccc;
clear: both;}
</style>
<div class="Third"><h1>欢迎来到我的世界!</h1></div>
<div class="Highlighter" style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var wms = new OpenLayers.Layer.WMS( "WMS Layer",
"http://localhost:8080/geoserver/topp/wms", {LAYERS: 'topp:states'} );
//var osm = new OpenLayers.Layer.OSM();
//map.addLayer(osm);
map.addLayer(wms);
map.zoomToExtent(bounds);
//map.zoomToMaxExtent();
</script>
</body>
</html>

Openlayers版本:OpenLayers-2.13.1

效果截图:

阅读:

OGC标准地图服务介绍 http://blog.csdn.net/wildboy2001/article/details/7743350

[GeoServer]Openlayers简单调用的更多相关文章

  1. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

  2. Geoserver+Openlayers+MySQL设计思想,GeoServer服务器搭建(Docker构建镜像)

    Geoserver+Openlayers+MySQL设计思想,GeoServer服务器搭建(Docker构建镜像) 一.geoserver+openlayers+mysql主要设计思想 1.1 Geo ...

  3. 路径分析—PostgreSQL+GeoServer+Openlayers(二)

    路径分析-QGIS+PostgreSQL+PostGIS+pgRouting(一) 路径分析-PostgreSQL+GeoServer+Openlayers(二) 前言 上一篇文章中实现数据库层面的路 ...

  4. loadrunner做webservice接口之简单调用

    今天听大神讲了webservice做接口,我按照他大概讲的意思自己模拟实战了下,可能还有很多不对,一般使用webservice做接口,会使用到soapui,但是用了loadrunner以后发现lr很快 ...

  5. 【Android进阶】Android程序与JavaScript之间的简单调用

    本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...

  6. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  7. StreamReader 和 StreamWriter 简单调用

    /* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...

  8. 经测试稳定可用的蓝牙链接通信Demo,记录过程中遇到的问题的思考和解决办法,并整理后给出一个Utils类可以简单调用来实现蓝牙功能

    说明:这是本人在蓝牙开发过程中遇到过的问题记录和分析,以及解决办法. 在研究过程中,许多的前人给出的解决方案和思路指导对我相当有帮助,但并非都是可采取的解决方法, 经过本人对这些方法的测试和使用过后, ...

  9. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. 9. Add the Block Storage service

    Block Storage Server: 1. sudo apt-get install python-mysqldb   2. sudo apt-get install lvm2   3. 创建存 ...

  2. [项目机会]citrix 虚拟桌面对于java等高CPU占用率如何解决

    citrix 虚拟桌面对于java等高CPU占用率如何解决 问题1:java等客户端对于虚拟桌面cpu影响较大,但是有些用户的确需要使用java支持的程序,是否可以通过其他途径来解决? 问题2:对于其 ...

  3. css修改,类似elememt.style样式修改

    使用!important 语法优先权. .yui-b { margin-left:0px ! important; }

  4. jQuery 中 on 方法-----给未来元素添加事件

    <li class='clear dir-li'> <div class='left title'> 添加到目录:</div> <div class='lef ...

  5. Bootstrap插件1--tooltip

    在引入bootstrap.js之前我们需要引入jquery的js文件 既然是bootstrap的插件,那么自然需要引用bootstrap.js和bootstrap.css这2个核心文件了 这里了主要介 ...

  6. 类库引用EF

    安装EntityFramework 添加引用system.data.entity;

  7. Nobel Lecture, December 12, 1929 Thermionic phenomena and the laws which govern them

    http://www.nobelprize.org/nobel_prizes/physics/laureates/1928/richardson-lecture.pdf OWEN W. RICHARD ...

  8. IoC容器装配Bean(xml配置方式)(Bean的生命周期)

    1.Spring管理Bean,实例化Bean对象 三种方式 第一种:使用类构造器实例化(默认无参数) package cn.itcast.spring.initbean; /** * 使用构造方法 实 ...

  9. 【】五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  10. 【转】CSS(10)盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...