Openlayers2唯一值渲染_html-js-css

概述概述本文讲述Openlayers2中实现唯一值渲染。效果源代码&lt!DOCTYPE html&gt&lthtml&gt&lthead lang="en"&gt &ltmeta charset="UTF-8"&gt &lttitle&gtopenlayers map&lt/title&gt &ltlink rel="styleshe

概述

本文讲述Openlayers2中实现唯1值渲染。

效果

源代码

<!DOCTYPE HTML><HTML><head lang="en"> <Meta charset="UTF⑻"> <Title>openlayers map</Title> <link rel="stylesheet" href="../../../plugin/OpenLayers⑵.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⑵.13.1/OpenLayers.Js"></script> <script src="../../../plugin/jquery/jquery⑴.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","140000":{fillcolor: "#7615d8","640000":{fillcolor: "#7e3c72","540000":{fillcolor: "#2482b4","370000":{fillcolor: "#db79f6","410000":{fillcolor: "#9841fc","320000":{fillcolor: "#05bc8c","340000":{fillcolor: "#81fac1","420000":{fillcolor: "#68e436","330000":{fillcolor: "#6f7d48","360000":{fillcolor: "#9f7083","430000":{fillcolor: "#48c89c","530000":{fillcolor: "#e0d9a7","520000":{fillcolor: "#25e635","350000":{fillcolor: "#78bcde","450000":{fillcolor: "#b8c7e9","440000":{fillcolor: "#451cd3","460000":{fillcolor: "#bad932","220000":{fillcolor: "#3d57ff","210000":{fillcolor: "#dca16f","120000":{fillcolor: "#eb7131","630000":{fillcolor: "#beb4c0","620000":{fillcolor: "#449338","610000":{fillcolor: "#7dd64c","150000":{fillcolor: "#3e9c10","500000":{fillcolor: "#cf4d49","130000":{fillcolor: "#fd1253","310000":{fillcolor: "#7ea79a","110000":{fillcolor: "#eb01b6","710000":{fillcolor: "#97d24c","810000":{fillcolor: "#46d4e7","820000":{fillcolor: "#09158f","510000":{fillcolor: "#583957",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)

总结