JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图
系列链接：
Java web与web gis学习笔记（一）——Tomcat环境搭建
Java web与web gis学习笔记（二）——百度地图API调用
JavaWeb和WebGIS学习笔记（三）——GeoServer 发布shp数据地图
JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层
前言：在上一篇博客JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层中，我们使用Layer Preview功能，通过GeoServer自带的OpenLayer预览到了我们发布的地图。预览时的url通常是很长一串字符。
这种方式虽然也能够进行访问，但预览的URL包含了大量请求参数，直接提供这样一个URL链接既不方便访问，也有碍观瞻。因此，我们何不自己使用OpenLayers在自己的网页中显示发布的地图呢。
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。它 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范。可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。
一、引入OpenLayers
OpenLayers的引入方法有三种。这里是官网openlayers下载地址的介绍
使用npm安装OpenLayers
npm install ol
在网页中引入在线地址
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
将OpenLayers下载到本地，并引入
二、使用OpenLayers显示地图
关于OpenLayers的使用，官方文档已经很详尽了，也有很多具体的例子。
可以先参考这个openlayers quick start做一个简单的入门。
具体使用到的内容可以参考官方API文档。
显示地图需要Layer Source WMS服务的URL，通过GeoServer中的Layer Preview可查看到预览时的URL
http://localhost:8080/geoserver/xjs/wms?service=WMS&version=1.1.0&request=GetMap&layers=xjs%3ABoundaryChn2_4p&bbox=73.44696044921875%2C6.318641185760498%2C135.08583068847656%2C53.557926177978516&width=768&height=588&srs=EPSG%3A4326&format=application/openlayers
不难看出，WMS服务的URL是：
http://localhost:8080/geoserver/工作区名称/wms
如果需要公网访问，则对应URL就是：
http://ip:port/geoserver/工作区名称/wms
其中ip是云服务器的公网ip，port是开放的端口，工作区名称即为你的数据源所在工作区。
这里给出显示地图的全部代码：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<link rel="stylesheet" href="oldist/openlayers/ol.css" type="text/css">
<style>
#map {
clear: both;
position: relative;
height: 800px;
width: 100%;
}
#loaction{
float:right;
}
</style>
<script type="text/javascript" src="oldist/openlayers/ol.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<title>olmap</title>
</head>
<body>
<div id = mapbox>
<h2 style="color:burlywood;text-align: center;">China Map</h2>
<div id="map" class="map"></div>
</div>
<div id="wrapper">
<div id="location"></div>
</div>
<script type="text/javascript">
var envstr = '';
var urlAdr = 'http://localhost:8080/geoserver/xjs/wms'; //根据自己的需要更改ip和port
var layerName = 'xjs:BoundaryChn2_4p,xjs:BoundaryChn2_4l,xjs:BoundaryChn1_4l'; //改变图层名
var tiled;
var untiled;
$(function(){
//设置地图范围
var extent = [73.44696044921875,6.318641185760498,135.08583068847656,53.557926177978516];
var envstr = 'color'
//图像图层
untiled = new ol.layer.Image({
visible:true,
source: new ol.source.ImageWMS({
ratio: 1,
url: urlAdr,
params: {
"LAYERS": layerName,
'TILED': false,
},
serverType: 'geoserver'
})
});
//定义图层数组
tiled = new ol.layer.Tile({
visible:false,
source: new ol.source.TileWMS({
url: urlAdr, //WMS服务URL
params: { //请求参数
'LAYERS': layerName,
'TILED': true,
},
serverType: 'geoserver'
})
});
var maplayers = [untiled,tiled];
//定义地图对象
var map = new ol.Map({
layers: maplayers,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
//center: [115, 39],
//zoom: 5
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: true
}
})
})
//自适应地图view
map.getView().fit(extent, map.getSize());
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
//添加缩放滑动控件
map.addControl(new ol.control.ZoomSlider());
//添加全屏控件
map.addControl(new ol.control.FullScreen());
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
undefinedHTML: 'outside',
projection: 'EPSG:4326',
target:$("#location")[0],
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 4);
}
})
);
})
</script>
</body>
</html>
JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图的更多相关文章
- JavaWeb和WebGIS学习笔记（七）——MapGuide Open Source安装、配置以及MapGuide Maestro发布地图——超详细！目前最保姆级的MapGuide上手指南！
JavaWeb和WebGIS学习笔记(七)--MapGuide Open Source安装.配置以及MapGuide Maestro发布地图 超详细!目前最保姆级的MapGuide上手指南! 系列链接 ...
- JavaWeb和WebGIS学习笔记（六）——使用ArcGIS for Server发布地图服务
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- JavaWeb和WebGIS学习笔记（三）——GeoServer 发布shp数据地图
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- Java web与web gis学习笔记（二）——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- C#可扩展编程之MEF学习笔记(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- （转）Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
随机推荐
- AVRmega16 LED 例程
AVRmega16 LED 例程 ...
- bzoj5315/luoguP4517 [SDOI2018]战略游戏(圆方树，虚树)
bzoj5315/luoguP4517 [SDOI2018]战略游戏(圆方树,虚树) bzoj Luogu 题目描述略(太长了) 题解时间 切掉一个点,连通性变化. 上圆方树. $ \sum |S| ...
- zookeeper 负载均衡和 nginx 负载均衡区别 ?
zk 的负载均衡是可以调控,nginx 只是能调权重,其他需要可控的都需要自己写插件:但是 nginx 的吞吐量比 zk 大很多,应该说按业务选择用哪种方式.
- 面试问题之C++语言：volatile关键字的作用
volatile的作用 volatile关键字是防止在共享的空间发生读取的错误.只保证其可见性,不保证原子性:使用volatile指每次从内存中读取数据,而不是从编译器优化后的缓存中读取数据,简单来讲 ...
- nginx开启gzip和缓存配置
# 开启gzip gzip on; # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用C ...
- sticker-footer 布局
sticker-footer 1.嵌套层级不深,可直接继承自 body width:100%: height:100%; // html <body> <div id="s ...
- python-使用函数求余弦函数的近似值
本题要求实现一个函数,用下列公式求cos(x)近似值,精确到最后一项的绝对值小于eps(绝对值小于eps的项不要加): cos(x)=0!x0−2!x2+4!x4−6!x6+... 函数接口定 ...
- 【Android开发】【第三方SDK】蒲公英摇一摇
摇一摇用户信息反馈功能:用户通过摇晃手机或者触发按钮,弹出反馈信息界面,填写个人意见,上传服务器的功能. 1. 蒲公英官网注册应用,获取AppId作为唯一标识: 2. 下载sdk,获取pgyer_sd ...
- JAVA对XML文件的读写
XML 指可扩展标记语言(EXtensible Markup Language),是独立于软件和硬件的信息传输工具,应用于 web 开发的许多方面,常用于简化数据的存储和共享. xml指令处理指令,简 ...
- IDEA中 mybatis-config、applicationContext.xml、log4j.properties、SpringMVC等文件没有图标标识符号，不是一个xml文件
1. 举例说明 mybatis-config.xml文件不显示图标,识别不出该xml文件 2. 解决办法 1)先点击 File -> Settings-,然后贴入下面代码 (2) 具体操作如下图 ...