zoukankan      html  css  js  c++  java
  • 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%;
                100%;
                overflow: hidden;
                font-size: 12px;
                font-family: "微软雅黑";
            }
            .legend{
                position: absolute;
                bottom: 10px;
                right:10px;
                z-index: 999;
                 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>


    传播GIS知识 | 交流GIS经验 | 分享GIS价值 | 专注GIS发展

    技术博客

    http://blog.csdn.net/gisshixisheng

    在线教程

    http://edu.csdn.net/course/detail/799
    Github

    https://github.com/lzugis/

    联系方式

    q       q:1004740957

    e-mail:niujp08@qq.com

    公众号:lzugis15

    Q Q 群:452117357(webgis)
                 337469080(Android)



  • 相关阅读:
    天气渐凉,意渐浓
    WebBrowser 多线程 DocumentCompleted 和定时器
    浅谈 Glide
    浅谈 maxMemory , totalMemory , freeMemory 和 OOM 与 native Heap
    XGoServer 一个基础性、模块完整且安全可靠的服务端框架
    GreenDao 兼容升级,保留旧数据的---全方面解决方案
    基于 xorm 的服务端框架 XGoServer
    全面总结: Golang 调用 C/C++,例子式教程
    通俗易懂,各常用线程池的执行 流程图
    为什么我的子线程更新了 UI 没报错?借此,纠正一些Android 程序员的一个知识误区
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539777.html
Copyright © 2011-2022 走看看