WMS图例展示

概述:

在OGC标准中,可以通过GetLegendGraphic接口来获取图例,本文讲述如何结合WMS的REST接口,实现唯一值渲染图层每个值对应的图例的获取。

效果:

GetLegendGraphic接口获取到的图例

rest接口获取到的图例的数据

实现后的效果

GetLegendGraphic简介

OGC标准中,通过GetLegendGraphic可以获取到wms图层的图例,请求完整参数为:http://localhost:8088/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=lzugis:province;若是唯一值渲染的配图,可通过添加参数rule=rule01类似于这样的参数获取单个的图例,请求的完整地址为:http://localhost:8088/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=lzugis:province&RULE=rule01。

实现代码

1、rest获取图例信息

package com.lzugis.web;

import it.geosolutions.geoserver.rest.GeoServerRESTReader;
import it.geosolutions.geoserver.rest.decoder.RESTLayer;
import net.sf.json.JSON;
import net.sf.json.JSONObject;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.InputSource;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.StringReader;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2016/7/16.
 */
@WebServlet(description = "wms legend", urlPatterns =  {"/legend"})
public class WmsLegend extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String url = "http://localhost:8088/geoserver";
        try {
            GeoServerRESTReader reader = new GeoServerRESTReader(url, "admin", "geoserver");
            String workspace = "lzugis";
            RESTLayer restLayer = reader.getLayer(workspace, "province");
            String styleName = restLayer.getDefaultStyle();
            String sld = reader.getSLD(styleName);
            if(sld!=null){
                StringReader sr = new StringReader(sld);
                InputSource is = new InputSource(sr);
                DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
                DocumentBuilder builder = factory.newDocumentBuilder();
                Document doc = (Document) builder.parse(is);
                NodeList nodeNames = doc.getElementsByTagName("sld:Name");
                NodeList nodeTitles = doc.getElementsByTagName("ogc:Literal");
                NodeList nodeFields = doc.getElementsByTagName("ogc:PropertyName");
                Map<String, Object> rules = new HashMap<String, Object>();
                List<Map<String, Object>> legends = new ArrayList<Map<String, Object>>();
                rules.put("field", nodeFields.item(0).getTextContent().toLowerCase());
                for(int i=0;i<nodeTitles.getLength();i++){
                    Node name = nodeNames.item(i+2);
                    Node title = nodeTitles.item(i);
                    Map<String, Object> legend = new HashMap<String, Object>();
                    legend.put("title",title.getTextContent());
                    legend.put("rule",name.getTextContent());
                    legends.add(legend);
                }
                rules.put("rules",legends);
                JSON json = JSONObject.fromObject(rules);
                response.setContentType("text/html;charset=utf-8");
                response.setCharacterEncoding("UTF-8");
                PrintWriter out = response.getWriter();
                out.println(json);
                out.flush();
                out.close();
            }
        }
        catch(Exception e){
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

2、前台代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="http://localhost:63342/lzugis/plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <style>
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
            font-size: 12px;
            font-family: "微软雅黑";
        }
        .legend{
            position: absolute;
            bottom: 10px;
            right:10px;
            z-index: 999;
            width: 150px;
            max-height: 350px;
            border: 1px solid #f00;
            background: #ffffff;
        }
        .legend-title{
            background: #ccc;
            padding: 5px;
            text-align: center;
            font-weight:bold ;
        }
        .legend ul{
            list-style: none;
            margin-left: -30px;
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .legend ul li{
            padding: 0px 3px;
        }
    </style>
    <script src="http://localhost:63342/lzugis/plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="http://localhost:63342/lzugis/plugin/jquery/jquery-1.8.3.js"></script>
    <script>
        var map, sld;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var tiled = new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    "http://localhost:8088/geoserver/lzugis/wms",
                    {
                        "LAYERS": 'province',
                        "STYLES": '',
                        format: format
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            map.addLayer(tiled);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.zoomToExtent(bounds);

            addLegend();
        });
        function addLegend(){
            var url = "http://localhost:8081/lzugis/legend";
            $.get(url,function(data){
                data = eval("("+data+")");
                console.log(data);
                var legendUrl = "http://localhost:8088/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=lzugis:province";
                for(var i= 0,len = data.rules.length;i<len;i++){
                    var d = data.rules[i];
                    var imgUrl = legendUrl+"&RULE="+d.rule;
                    var legend = $("<li/>").append("<img src='"+imgUrl+"'/>").append(d.title);
                    $("#legend").append(legend);
                }
            });
        }
    </script>
</head>
<body>
<div id="map">
    <div class="legend">
        <div class="legend-title">图例</div>
        <ul id="legend"></ul>
    </div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏岑玉海

RavenDb学习(七) 异步工作以及维度查询

1、异步执行 var entity = new Company {Name = "Async Company #2", Id = "companies/2"}...

30950
来自专栏小樱的经验随笔

HDU 2438 Turn the corner(三分查找)

托一个学弟的福,学了一下他的最简便三分写法,然后找了一道三分的题验证了下,AC了一题,写法确实方便,还是我太弱了,漫漫AC路!各路大神,以后你们有啥好的简便写法...

31050
来自专栏GIS讲堂

自己写一个读取Arcgis Server切片的后台服务

Arcgis Server的切片得要有Arcgis Server的支持才能使用,这样就显得比较麻烦,如果对于已经切好的切片怎么样通过自己写的程序来调用展示呢,本...

28530
来自专栏函数式编程语言及工具

Akka(8): 分布式运算:Remoting-远程查找式

  Akka是一种消息驱动运算模式,它实现跨JVM程序运算的方式是通过能跨JVM的消息系统来调动分布在不同JVM上ActorSystem中的Actor进行运算,...

46390
来自专栏GIS讲堂

Geotools读取shp文件并在Ol2中展示

在前面有一篇文章中讲到了GDAL将shp转换为GeoJson的实现,以及ol2、3以及Arcgis for js中GeoJson的加载,今天呢,书接上文,介绍G...

18230
来自专栏非典型技术宅

iOS实践:一步步实现星级评分1. 创建星星2. 优化3. 灵异事件

20040
来自专栏Hongten

java画图程序_图片用字母画出来_源码发布

主要是把一些调试的截图发布出来,现在程序调试我认为可以了(当然,你如果还想调试的话,也可以下载源码自己调试)。

14630
来自专栏陈满iOS

iOS开发·runtime原理与实践: 关联对象篇(Associated Object)(应用场景:为分类添加“属性”,为UI控件关联事件Block体,为了不重复获得某种数据)

分类(category)与关联对象(Associated Object)作为objective-c的扩展机制的两个特性:分类,可以通过它来扩展方法;Associ...

54020
来自专栏码匠的流水账

聊聊sentinel的FlowSlot

com/alibaba/csp/sentinel/slots/block/flow/FlowSlot.java

19410
来自专栏函数式编程语言及工具

FunDA(2)- Streaming Data Operation:流式数据操作

   在上一集的讨论里我们介绍并实现了强类型返回结果行。使用强类型主要的目的是当我们把后端数据库SQL批次操作搬到内存里转变成数据流式按行操作时能更方便、准确、...

23060

扫码关注云+社区

领取腾讯云代金券