系列链接：

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显示地图的更多相关文章

  1. JavaWeb和WebGIS学习笔记（七）——MapGuide Open Source安装、配置以及MapGuide Maestro发布地图——超详细！目前最保姆级的MapGuide上手指南！

    JavaWeb和WebGIS学习笔记(七)--MapGuide Open Source安装.配置以及MapGuide Maestro发布地图 超详细!目前最保姆级的MapGuide上手指南! 系列链接 ...

  2. JavaWeb和WebGIS学习笔记（六）——使用ArcGIS for Server发布地图服务

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  4. JavaWeb和WebGIS学习笔记（三）——GeoServer 发布shp数据地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  5. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  6. C#可扩展编程之MEF学习笔记(五)：MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  7. （转）Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  8. java之jvm学习笔记五(实践写自己的类装载器)

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

随机推荐

  1. 一文看懂 C 语言 I/O

    再会吧,这宝贵的片刻和短暂的时机限制了我在情义上的真挚表示,也不能容我们畅叙衷曲,这本来是亲友重逢所应有的机缘:愿上帝赐给我们美好的未来,好让我们开怀畅谈!再一次告别:勇敢作战吧,祝你胜利!--威廉• ...

  2. 如何理解Node.js和JavaScript的关系

    一.Javascript的引擎 浏览器一般有两个引擎,一个是Html引擎,一个是脚本引擎. JavaScript是一种脚本语言,最初用于浏览器的动态显示,方便操作页面数据和内容.但实际上,它也可以在浏 ...

  3. 『现学现忘』Docker基础 — 35、实战：自定义CentOS镜像

    目录 1.前提说明 2.编写Dockerfile文件 3.构建镜像 4.运行镜像 5.列出镜像的变更历史 1)目标:自定义镜像wokong_centos. 2)所用到的保留字指令: FROM:基础镜像 ...

  4. 假如 Redis 里面有 1 亿个 key，其中有 10w 个 key 是以 某个固定的已知的前缀开头的，如果将它们全部找出来？

    使用 keys 指令可以扫出指定模式的 key 列表. 对方接着追问:如果这个 redis 正在给线上的业务提供服务,那使用 keys 指令会 有什么问题? 这个时候你要回答 redis 关键的一个特 ...

  5. ES5和ES6继承方式区别?

    ES5定义类以函数形式, 以prototype来实现继承 ES6以class形式定义类, 以extend形式继承

  6. Spring Boot 的核心注解是哪个？它主要由哪几个注解组成的？

    启动类上面的注解是@SpringBootApplication,它也是 Spring Boot 的核心注解,主要组合包含了以下 3 个注解: @SpringBootConfiguration:组合了 ...

  7. 什么是 rabbitmq ?

    采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需 要确保提供方存在,实现了服务之间的高度解耦

  8. Docker 的目的是什么？

    Docker 提供了一个可用于托管任何应用程序的容器环境.在此,软件应用程序和 支持它的依赖项紧密打包在一起. 因此,这个打包的产品被称为 Container,因为它是由 Docker 完成的,所以它 ...

  9. Java 中，Serializable 与 Externalizable 的区别？

    Serializable 接口是一个序列化 Java 类的接口,以便于它们可以在网络上传输 或者可以将它们的状态保存在磁盘上,是 JVM 内嵌的默认序列化方式,成本高. 脆弱而且不安全.Externa ...

  10. 微信APP支付V3版本签名 && APP下单/订单查询接口Python版实现

    问题背景 最近接入微信支付,微信官方并没有提供Python版的服务端SDK,因而只能根据文档手动实现一版,这里记录一下微信支付的整体流程.踩坑过程与最终具体实现. 微信支付APP下单流程 根据微信官方 ...