openlayers 高亮显示记录
来源：互联网 发布：php判断是不是正整数 编辑：程序博客网 时间：2024/05/18 13:05
研究了好几天感谢penLayers官方旗舰群[2] 各位大神的帮助
直接上代码吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> OpenLayer : Feature Select </TITLE> <link rel="stylesheet" href="theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="OpenLayers.js"></script> <script type="text/javascript"> var map = null;//地图对象 var wms_layer = null;//本地图片wms图层 var vector_layer = null;//矢量图形图层 var select_control = null; // 选择要素控件 var wkt_reader = null;//wkt图形解析器 var point = "POINT(-10 -10)";//点 var line = "LINESTRING(-180 90, 0 0)";//线 var polygon = "POLYGON(0 0,0 50,150 50,150 0,0 0)";//面 var polygon1 = "POLYGON(20 0,0 20,120 20,120 0,0 0)";//面//异常图片设置透明 OpenLayers.Util.onImageLoadErrorColor = "transparent";//初始化地图 function init() {//地图配置var options = {controls: [],//空间配置maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),//范围控制//maxResolution: "auto",maxResolution: 0.17578125,//最大分辨率projection: "EPSG:4326",//minScale: 50000000,numZoomLevels: 2,resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125],//分辨率scales: [50000000, 30000000, 10000000, 5000000]//比例尺};//实例化 DragPan 控件//var dragPan = new OpenLayers.Control.DragPan();//创建地图对象map = new OpenLayers.Map('map', options);//本地切片地图wms_layer = new OpenLayers.Layer.TMS( "TMS Layer","",{ url: '', serviceVersion: '.', layername: '.', alpha: false,type: 'png', getURL: overlay_getTileURL });//矢量图形图层 vector_layer = new OpenLayers.Layer.Vector("Vector");//配置图层初始化透明vector_layer.style = { fillOpacity:1,fillColor:"yellow",strokeOpacity: 1, cursor: "pointer"}//var dragFeature = new OpenLayers.Control.DragFeature(vector_layer);//map上添加控件//map.addControl(dragFeature);//激活控件//dragFeature.activate(); // 添加图层 map.addLayers([wms_layer, vector_layer]); //图层选择控件 map.addControl(new OpenLayers.Control.LayerSwitcher() );//导航控件map.addControl(new OpenLayers.Control.Navigation());map.addControl(new OpenLayers.Control.PanZoomBar());//地图控制－鼠标坐标拾取 map.addControl(new OpenLayers.Control.MousePosition());//地图控制－编辑工具 map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));//显示比例尺map.addControl(new OpenLayers.Control.Scale(document.getElementById('scale'))); // 在Vector图层上添加图元element //addFeature(point , vector_layer); addFeature(line , vector_layer); addFeature(polygon, vector_layer);addFeature(polygon1, vector_layer); addSelectControl(map, vector_layer); // 放大到全屏 map.zoomToMaxExtent(); }//重写切片请求路径function overlay_getTileURL(bounds) {var res = this.map.getResolution();var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));var z = this.map.getZoom();if (x >= 0 && y >= 0) {return this.url + z + "/" + x + "/" + y + "." + this.type;} else {return "img/none.png";}}//添加选择控制 function addSelectControl(map, vector_layer) { if(select_control!=null) { return ; }//地图控件-要素选择控件 select_control = new OpenLayers.Control.SelectFeature(vector_layer,{onSelect:onFeatureSelect,// 注册Select事件onUnselect:onFeatureUnselect,// 注册取消Select事件callbacks:{//over:onHover,//鼠标移入事件//out:onOut//鼠标移除事件}});//下面两句解决feature移动,地图不移动的问题select_control.handlers.feature.stopDown=false;select_control.handlers.feature.stopUp=false;//添加要素选择控件 map.addControl(select_control);//激活要素选择控件 select_control.activate(); }//鼠标移入要素事件function onHover(feature){vector_layer.drawFeature(getShowFeature(feature));}//获取显示要素function getShowFeature(feature){var style={strokeWidth:1,strokeColor: "yellow", strokeOpacity: 1, fillOpacity:0.1,fillColor:"yellow",cursor:'pointer'}feature.style = style;return feature;}//鼠标移出要素样式function onOut(feature){feature.style = {fillOpacity: 0,strokeOpacity: 0, cursor: "pointer"}//重绘要素(必须的)vector_layer.drawFeature(feature);}//添加要素 function addFeature(wkt, layer) { var geometry = toGeometryFromWkt(wkt); if(wkt!=null) { layer.addFeatures(geometry); } } //要素解析 function toGeometryFromWkt(wkt) { var geometry = null; if(wkt_reader==null) { wkt_reader = new OpenLayers.Format.WKT(); } geometry = wkt_reader.read(wkt);var pan = new OpenLayers.Control.Pan();pan.activate(); return geometry; } // Feature 选中事件响应 function onFeatureSelect(feature) {alert("featureselect");var restoreFeatures=[];vector_layer.drawFeature(getShowFeature(feature));restoreFeatures.push(feature); selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); } // Feature取消选中事件响应 function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } //弹窗关闭事件 function onPopupClose(evt) { select_control.unselect(selectedFeature); } // 获取多边形ringsfunction getRings () {var features = vector_layer.features;//for(var i = 0;i<features.length;i++){//console.log(features[i]);//}var polygon1 = features[0];var cpts = polygon1.geometry.components;var ret=[];for (var i = 0; i < cpts.length; i++) {var linearRings = cpts[i].components;for (var j = 0; j < linearRings.length; j++) {var point = linearRings[j];ret.push({x:point.x, y:point.y});};};addFeatureByRings(ret);}//根据rings添加图形function addFeatureByRings(ret){var retLength = ret.length-1;var wkt = "POLYGON(";for(var i=0;i<ret.length;i++){if(i==retLength){wkt+=ret[i].x+' '+ret[i].y;break;}wkt+=ret[i].x+' '+ret[i].y+',';}wkt+=")";//console.log(wkt);//addFeature(wkt, vector_layer);var wkt_c = new OpenLayers.Format.WKT();var geometry = wkt_c.read(wkt);geometry.style={strokeWidth:2,strokeColor: "red", strokeOpacity: 1, fillOpacity:1,fillColor:"red",}vector_layer.addFeatures(geometry);} </script> </HEAD> <BODY onload="init()"><input type="button" value="获取所有多边形" onclick="getRings()"> <div id="map" class=""></div> </BODY></HTML>完整包下载地址:http://download.csdn.net/detail/wd4java/8554335
0 0
- openlayers 高亮显示记录
- openlayers学习记录
- Openlayers 显示坐标点
- OpenLayers开发记录（一）
- OpenLayers开发记录（二）
- openlayers实现多图显示
- Openlayers之显示地理位置坐标
- Openlayers之地图全屏显示
- WebGIS(PostgreSQL+GeoServer+OpenLayers)之三 OpenLayers客户端数据显示
- 列表中鼠标经过时，高亮显示某一行记录
- php 高亮 显示
- 高亮显示关键词
- 表格高亮显示
- 高亮显示
- BlackWord高亮显示
- lucene 高亮显示
- 搜索关键词高亮显示
- Eclipse高亮显示
- 第二单元作业 2.29
- MySQL 备份与恢复
- R语言数据分析系列之五
- ORACLE-基础三（手动创建数据库）
- hihocoder 1075 开锁魔法III(置换+DP)
- openlayers 高亮显示记录
- java如何对ArrayList中对象按照该对象某属性排序
- system_call 中断处理过程
- C#委托基础5——泛型委托Action
- How to change user habits with interaction design
- CAS单点登录源码解析之【集成新浪腾讯微博】
- Swift 体会
- Android中再按一次退出效果的简单实现
- C#委托基础6——泛型委托Predicate
