openlayers2渐变色渲染

概述

在前文中,讲到了oL2中唯一值渲染的实现方式,在本文讲述ol2中渐变色渲染的实现方式。

效果

代码

<!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 style = new OpenLayers.Style({
                strokeColor: "#ffffff",
                strokeWidth: 1,
//                label: "${vocation}",
                labelAlign: "center",
                labelXOffset: "0",
                labelYOffset: "-0",
                fontColor: "#000000",
                fontFamily: "微软雅黑",
                fontSize:13
            },{
                rules: [
                    new OpenLayers.Rule({
                        // a rule contains an optional filter
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.LESS_THAN,
                            property: "vocation", // the "foo" feature attribute
                            value: 2
                        }),
                        // if a feature matches the above filter, use this symbolizer
                        symbolizer: {
                            fillColor: "#2892c7"
                        }
                    }),
                    new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.BETWEEN,
                            property: "vocation",
                            lowerBoundary: 2,
                            upperBoundary: 6
                        }),
                        symbolizer: {
                            fillColor: "#a0c29b"
                        }
                    }),
                    new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.BETWEEN,
                            property: "vocation",
                            lowerBoundary: 6,
                            upperBoundary: 9
                        }),
                        symbolizer: {
                            fillColor: "#fafa64"
                        }
                    }),
                    new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.BETWEEN,
                            property: "vocation",
                            lowerBoundary: 9,
                            upperBoundary: 14
                        }),
                        symbolizer: {
                            fillColor: "#fa8d34"
                        }
                    }),
                    new OpenLayers.Rule({
                        // apply this rule if no others apply
                        elseFilter: true,
                        symbolizer: {
                            fillColor: "#e81014"
                        }
                    })
                ]
            });
            var vector_layer = new OpenLayers.Layer.Vector("pro",{
                styleMap: new OpenLayers.StyleMap(style)
            });
            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">add GeoJSON</button>
    </div>
</div>
</body>
</html>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(40):弹性运动续--弹簧

上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧,如果把弹簧的一头固定起来(即相当于目标点),...

20950
来自专栏一个会写诗的程序员的博客

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor as super class

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor a...

12950
来自专栏菩提树下的杨过

利用ActiveX实现web页面设置本地默认打印机、纸张大小

通常web技术无法设置本地计算机的默认打印机,包括用代码设置纸张大小,如果业务系统中真遇到这种需求,只能通过其它辅助手段(比如ActiveX)实现。下面这段代码...

33310
来自专栏Hongten

My Notepad

I have spent near more two weeks to write this Notepad application. At this mome...

13720
来自专栏王磊的博客

C# 控制台应用程序输出颜色字体[更正版]

首先感谢院子里的“yanxinchen”,之前的方法是通过c#调用系统api实现的,相比之下我的有点画蛇添足了,哈哈。 最佳解决方案的代码: static vo...

43580
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(三):基本模块调用

搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

35450
来自专栏叁金大数据

EmguCV学习——视频与图片互转

其实视频转图片在上篇文章中已经有些眉目了,其实就是按帧读取视频,然后把帧保存就ok。然后自己再加个进度条美化一下。。。这代码简单易懂,还是直接上代码吧。

29010
来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

32880
来自专栏MasiMaro 的技术博文

遍历系统中加载的驱动程序以及通过设备对象指针获取设备对象名称

遍历系统中加载的驱动可以在R3层完成,通过几个未导出的函数:ZwOpenDirectoryObject、ZwQueryDirectoryObject,下面是具体...

14820
来自专栏跟着阿笨一起玩NET

c#实现打印功能

81920

扫码关注云+社区

领取腾讯云代金券