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 filterfilter: new OpenLayers.Filter.Comparison({type: OpenLayers.Filter.Comparison.LESS_THAN,property: "vocation", // the "foo" feature attributevalue: 2}),// if a feature matches the above filter, use this symbolizersymbolizer: {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 applyelseFilter: 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>

传播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)

openlayers2渐变色渲染相关推荐

Android 自定义ImageView线型渐变色渲染图片
转载请注明出处:https://blog.csdn.net/htwhtw123/article/details/80787231 是一个尝试,结果实现了.用渐变色渲染图片资源,使图片变成水平线型渐变色 ...
音频频谱 via FFT
音频频谱 via FFT 频谱和均衡器声音信号的时域和频域 FFT AudioSpectrum sample 工作流程源代码 _readAudioData 函数 FFTUtil::calc 函数 ...
Duilib样式性大全-Duilib属性大全-Duilib XML属性大全-Duilib XML样式大全
Duilib样式性大全-Duilib属性大全-Duilib XML属性大全-Duilib XML样式大全 <?xml version="1.0" encoding=" ...
Android自定义View之画圆环(进阶篇:圆形进度条)
前言: 如果你想读懂或者更好的理解本篇文章关于自定义圆环或圆弧的内容.请你务必提前阅读下Android自定义View之画圆环(手把手教你如何一步步画圆环).在这篇文章中,详细描述了最基本的自定义圆环的 ...
android 文字Flash特效
需要知道的技术点: 1.着色器 android中的着色器shader是非常有用接口. 例如现在多数的圆角图片还有类似flash效果文字都是有着色器功能完成. 着色器为画笔Paint的成员变量,在画笔绘 ...
Android 自定义圆环,一步步做Android自定义圆环百分比控件
马上要校招了,有点儿慌,写个自定义控件压压惊效果图本来写了一大串近段时间的感慨,还是觉得废话少说比较不容易被喷,直接上效果图圆环百分比View.gif 就是这个样子,下面记录一下我的编写经历,撸 ...
arcgis android 3d,ArcGIS 10.5.1 三维能力全方位提升
原标题:ArcGIS 10.5.1 三维能力全方位提升上周,我们和大家报告了ArcGIS 10.5.1发布的消息.从今天开始,我们就继续和大家聊聊10.5.1里头那些具体的增强和完善. 今天要说的是 ...
荣耀10i高清渲染图曝光：后置三摄+高颜值渐变色机身
[TechWeb]从荣耀以往的产品线布局来看,荣耀的数字系列除了数字旗舰本尊之外,还拥有"i"和"青春版"两个子系列,而当前最新的荣耀10系列已推出了荣耀10青 ...
Android 颜色渲染(五) LinearGradient线性渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...
android自定义进度条渐变色View，不使用任何图片资源
最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自 ...

openlayers2渐变色渲染

openlayers2渐变色渲染相关推荐

最新文章

热门文章