openlayer 高亮显示样式
2015-06-26 08:43
597 查看
var v_style = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style({ graphicWidth : 60, graphicHeight: 25, graphicTitle:"dddd", fillColor: "#ee9900", fillOpacity: 0, hoverFillColor: "#66CCCC", hoverFillOpacity: 0, strokeColor: "#ffff00", strokeOpacity: 0, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 1, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "inherit", fontColor: "#000000", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3, label: "" }), 'select': new OpenLayers.Style({ fillColor: "#99CCFF",//bule fillOpacity: 0.8, hoverFillColor: "white", hoverFillOpacity: 0.8, strokeColor: "#ffff00", strokeOpacity: 1, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 0.3, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "pointer", fontColor: "#000000", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3 }), 'hover': new OpenLayers.Style({ fillColor: "#99CCFF",//bule fillOpacity: 0.3, hoverFillColor: "white", hoverFillOpacity: 0.8, strokeColor: "#ffff00", strokeOpacity: 1, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 0.3, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "pointer", fontColor: "#000000", label: "1232123", graphicWidth : 60, graphicHeight: 25, graphicTitle:"dddd", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3 }) }); var first = new OpenLayers.Layer.Vector("1", { protocol: new OpenLayers.Protocol.HTTP({ url: "map.json", format: new OpenLayers.Format.GeoJSON(), displayInLayerSwitcher:true, strategies: [new OpenLayers.Strategy.Fixed()], styleMap: v_style }) });
var highlightCtrl = new OpenLayers.Control.SelectFeature([first], { hover:true, highlightOnly: true, renderIntent: "hover", <span style="white-space:pre"> </span>}); <span style="white-space:pre"> </span> map.addControl(highlightCtrl); highlightCtrl.activate(); //弹窗 var selectControl = new OpenLayers.Control.SelectFeature([first], { <span style="white-space:pre"> </span> clickout: true, onSelect: onFeatureSelect, onUnselect: onFeatureUnselect }); map.addControl(selectControl); selectControl.activate();
function onFeatureSelect(feature) { selectedFeature = feature; <span style="white-space:pre"> </span> var id = selectedFeature.attributes['id']; <span style="white-space:pre"> </span> var html = "<div style='font-size:.8em ;color:red; height:300px; width:350px;padding-left: 14px;'><iframe id='ifmcontent' style='width: 100%; height:100%;' src='' frameborder='no' scrolling='no' allowtransparency></iframe></div>"; var popup = new OpenLayers.Popup.FramedCloud("popup", feature.geometry.getBounds().getCenterLonLat(), null, html, null, true ); popup.panMapIfOutOfView = true; popup.autoSize = true; <span style="white-space:pre"> </span>feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } function onMakerMouseDown(evt) { OpenLayers.Event.stop(evt); }
相关文章推荐
- input file文件上传样式
- The CSS3 Placeholder Pseudo-element
- CSS定位规则之BFC 你竟然一直不知道的东西!!!!!
- 布局转换——考验CSS功底的时刻到来
- CSS基础
- CSS 预处理器
- [CSS]IE6和360浏览器兼容模式下的兼容性问题
- 初探CSS 4选择器
- css 关于overflow:hidden对float的影响
- 高性能 CSS3 动画
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
- GridView用CSS设定样式
- css hack
- html+css的高级盒子模型
- 怕忘记了CSS中position的absolute和relative用法
- 用纯CSS实现照片墙
- 通过样式表自定义按钮外观
- css兼容问题
- CSS中文字体如宋体/微软雅黑的英文名称写法
- 详解 CSS 属性 - 伪类和伪元素的区别