Openlayers2唯一值渲染

来源：互联网发布：分享与存储系统源码编辑：程序博客网时间：2024/06/07 08:46
概述
本文讲述Openlayers2中实现唯一值渲染。
效果
源代码
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>openlayers map</title>    <link rel="stylesheet" href="../../../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;        }    </style>    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>    <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>    <script>        var map;        var tiled;        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;        $(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);            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.addLayers([tiled]);            OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"];            OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"];            OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"];            OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT["ft"];            //比例尺            map.addControl(new OpenLayers.Control.ScaleLine({topOutUnits:"千米",topInUnits:"米",bottomOutUnits:"英里",                bottomInUnits:"英寸"            }));            map.addControl(new OpenLayers.Control.Zoom());            map.addControl(new OpenLayers.Control.Navigation());            map.addControl(new OpenLayers.Control.OverviewMap());            map.zoomToExtent(bounds);            var styleMap = new OpenLayers.StyleMap(null,{                "select": new OpenLayers.Style({                    fillColor: "#ffffff",                    strokeColor: "#00ffff",                    graphicZIndex: 2,                    opacity:0                })            });            var lookup = {                "230000":{fillColor: "#386d2c", strokeColor: "#ffffff",strokeWidth: 1},                "650000":{fillColor: "#db152e", strokeColor: "#ffffff",strokeWidth: 1},                "140000":{fillColor: "#7615d8", strokeColor: "#ffffff",strokeWidth: 1},                "640000":{fillColor: "#7e3c72", strokeColor: "#ffffff",strokeWidth: 1},                "540000":{fillColor: "#2482b4", strokeColor: "#ffffff",strokeWidth: 1},                "370000":{fillColor: "#db79f6", strokeColor: "#ffffff",strokeWidth: 1},                "410000":{fillColor: "#9841fc", strokeColor: "#ffffff",strokeWidth: 1},                "320000":{fillColor: "#05bc8c", strokeColor: "#ffffff",strokeWidth: 1},                "340000":{fillColor: "#81fac1", strokeColor: "#ffffff",strokeWidth: 1},                "420000":{fillColor: "#68e436", strokeColor: "#ffffff",strokeWidth: 1},                "330000":{fillColor: "#6f7d48", strokeColor: "#ffffff",strokeWidth: 1},                "360000":{fillColor: "#9f7083", strokeColor: "#ffffff",strokeWidth: 1},                "430000":{fillColor: "#48c89c", strokeColor: "#ffffff",strokeWidth: 1},                "530000":{fillColor: "#e0d9a7", strokeColor: "#ffffff",strokeWidth: 1},                "520000":{fillColor: "#25e635", strokeColor: "#ffffff",strokeWidth: 1},                "350000":{fillColor: "#78bcde", strokeColor: "#ffffff",strokeWidth: 1},                "450000":{fillColor: "#b8c7e9", strokeColor: "#ffffff",strokeWidth: 1},                "440000":{fillColor: "#451cd3", strokeColor: "#ffffff",strokeWidth: 1},                "460000":{fillColor: "#bad932", strokeColor: "#ffffff",strokeWidth: 1},                "220000":{fillColor: "#3d57ff", strokeColor: "#ffffff",strokeWidth: 1},                "210000":{fillColor: "#dca16f", strokeColor: "#ffffff",strokeWidth: 1},                "120000":{fillColor: "#eb7131", strokeColor: "#ffffff",strokeWidth: 1},                "630000":{fillColor: "#beb4c0", strokeColor: "#ffffff",strokeWidth: 1},                "620000":{fillColor: "#449338", strokeColor: "#ffffff",strokeWidth: 1},                "610000":{fillColor: "#7dd64c", strokeColor: "#ffffff",strokeWidth: 1},                "150000":{fillColor: "#3e9c10", strokeColor: "#ffffff",strokeWidth: 1},                "500000":{fillColor: "#cf4d49", strokeColor: "#ffffff",strokeWidth: 1},                "130000":{fillColor: "#fd1253", strokeColor: "#ffffff",strokeWidth: 1},                "310000":{fillColor: "#7ea79a", strokeColor: "#ffffff",strokeWidth: 1},                "110000":{fillColor: "#eb01b6", strokeColor: "#ffffff",strokeWidth: 1},                "710000":{fillColor: "#97d24c", strokeColor: "#ffffff",strokeWidth: 1},                "810000":{fillColor: "#46d4e7", strokeColor: "#ffffff",strokeWidth: 1},                "820000":{fillColor: "#09158f", strokeColor: "#ffffff",strokeWidth: 1},                "510000":{fillColor: "#583957", strokeColor: "#ffffff",strokeWidth: 1}            };            styleMap.addUniqueValueRules("default", "dzm", lookup);            var vector_layer = new OpenLayers.Layer.Vector("pro",{                styleMap: styleMap            });            map.addLayer(vector_layer);            $("#geojson").on("click",function(){                $.get("data/province.geojson",null,function(result){                    result = eval("("+result+")");                    var geojson_format = new OpenLayers.Format.GeoJSON();                    vector_layer.addFeatures(geojson_format.read(result));                });            });        });    </script></head><body><div id="map">    <div style="position: absolute;top: 10pt;right: 10pt;z-index: 999;background: #fff;border: 1px solid #f00;padding: 10px;">        <button id="geojson">Unique Value Render</button>    </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)
0 0