OpenLayers使用symbolizers样式特征

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>使用symbolizers样式特征</title><link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" /><script src="./OpenLayers-2.12/lib/OpenLayers.js"></script><style>table.tm {width: 100%;height: 95%;}table.tm td.left, table.tm td.right {border: 1px solid #ccc;margin: 0;padding: 0;}table.tm td.left {width: 75%;}table.tm td.right {width: 25%;vertical-align: top;padding: 5px;}td span {font-weight: bold;}</style><script type="text/javascript">function init(){var map = new OpenLayers.Map("using_symbolizers");var osm = new OpenLayers.Layer.OSM();map.addLayer(osm);map.setCenter(new OpenLayers.LonLat(0,0), 3)var vectorLayer = new OpenLayers.Layer.Vector("Features");vectorLayer.events.register('beforefeatureadded', vectorLayer, setFeatureStyle);map.addLayer(vectorLayer);var editingControl = new OpenLayers.Control.EditingToolbar(vectorLayer);map.addControl(editingControl);function setFeatureStyle(event) {var fillColor = getElementById('fillColor').get('value');var fillOpacity = getElementById('fillOpacity').get('value')/100;var strokeColor = getElementById('strokeColor').get('value');var strokeWidth = getElementById('strokeWidth').get('value');var strokeOpacity = getElementById('strokeOpacity').get('value')/100;var pointRadius = getElementById('pointRadius').get('value');var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);style.fillColor = fillColor;style.fillOpacity = fillOpacity;style.strokeColor = strokeColor;style.strokeWidth = strokeWidth;style.strokeOpacity = strokeOpacity;style.pointRadius = pointRadius;event.feature.style = style;}}</script>
</head>
<body onload="init()"><table class="tm"><tr><td class="left"><div id="using_symbolizers" style="width: 100%; height: 95%;"></div></td><td class="right"><table><tr><td>Fill Color:</td><td><div data-dojo-type="dijit.form.DropDownButton"><span>Color</span><div data-dojo-type="dijit.TooltipDialog"><div id="fillColor" data-dojo-type="dijit.ColorPalette" data-dojo-props="palette:'7x10'"></div></div></div></td></tr><tr><td>Fill Opacity: </td><td><div id="fillOpacity" dojoType="dijit.form.HorizontalSlider" value="100" minimum="0" maximum="100" intermediateChanges="true"showButtons="false" style="width:200px;"><div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div><ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"><li>0%</li><li>50%</li><li>100%</li></ol></div></td></tr><tr><td>Stroke Color:</td><td><div data-dojo-type="dijit.form.DropDownButton"><span>Color</span><div data-dojo-type="dijit.TooltipDialog"><div id="strokeColor" data-dojo-type="dijit.ColorPalette" data-dojo-props="palette:'7x10'"></div></div></div></td></tr><tr><td>Stroke Width:</td><td><input id="strokeWidth" dojoType="dijit.form.NumberSpinner" value="2" smallDelta="1" constraints="{min:1,max:10}" /></td></tr><tr><td>Stroke Opacity: </td><td><div id="strokeOpacity" dojoType="dijit.form.HorizontalSlider" value="100" minimum="0" maximum="100" intermediateChanges="true"showButtons="false" style="width:200px;"><div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div><ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"><li>0%</li><li>50%</li><li>100%</li></ol></div></td></tr><tr><td>Point radius:</td><td><input id="pointRadius" dojoType="dijit.form.NumberSpinner" value="4" smallDelta="1" constraints="{min:4,max:15}" /></td></tr>                </table></td></tr>
</table>
<!-- 地图 DOM 元素 --><div id="image" style="width: 100%; height: 100%;"></div>
</body>
</html>

转载于:https://www.cnblogs.com/Jeely/p/11175709.html

OpenLayers使用symbolizers样式特征相关推荐

183：vue+openlayers 设置线段样式：粗细、渐变颜色、箭头及线头样式
第183个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中修饰线段的样式.绘制两个线段,利用FlowLine的样式规则来设置矢量线段粗细.渐变颜色,设置箭头和线头样式. ...
基于OpenLayers+rbush实现高德轨迹样式
一前言近期翻阅博客,看到社区大神一休哥的一篇<canvas 奇巧淫技(二)绘制箭头路径效果>文章,同样,该大神还展示过一个使用rbush库如何在前端快速从海量数据进行空间检索的案例 ...
OpenLayers基础教程——要素样式的创建
1.前言在前面的博客中,ol.style这个类的出镜率很高,但限于篇幅的原因,所以一直没有进行详细介绍,下面就来介绍一下openlayers中的样式--ol.style. 2.样式的基本组成一个o ...
【深度学习】用Pytorch给你的母校做一个样式迁移吧！
前言先看下效果,我实在没有拍过学校的照片,随便谷歌了一张,学校是哈尔滨理工大学荣成校区. Github代码我已经开源在文末,环境我使用的是Colab pro,下载直接运行.(别忘了Star-)大家可 ...
从零开始学Pytorch（十七）之样式分格
样式迁移我们介绍如何使用卷积神经网络自动将某图像中的样式应用在另一图像之上,即样式迁移(style transfer).这里我们需要两张输入图像,一张是内容图像,另一张是样式图像,我们将使用神经网络 ...
Abp vnext 特征(Features)
文章目录简介检查特征 RequiresFeature属性关于拦截 IFeatureChecker服务 IsEnabledAsync GetOrNullAsync 扩展方法定义特征 Featur ...
又一次寻找bug的经历...这次是 openlayers + chrome + win7
2019独角兽企业重金招聘Python工程师标准>>> 回想起来,真后悔当初一腔热血上Ext.... 最近项目上的时间有些紧张了.客户急着看产品.没办法只能暂时放下底层代码编写.开始 ...
【读点论文】Image Style Transfer Using Convolutional Neural Networks（将卷积特征图提取语义信息，融合内容和风格的做法）
Image Style Transfer Using Convolutional Neural Networks 以不同风格呈现图像的语义内容是一项困难的图像处理任务.可以说,以前的方法的一个主要限制 ...
深度学习跨层网络结构--特征融合
网络连接结构个人理解,如有偏差,欢迎指出. ResNet ResNet ResNet 为了解决模型退化问题,创新性的使用了恒等映射,将上一层可能不需要改变的信息,通过跨层链接以逐个相加的方式,叠加到 ...

OpenLayers使用symbolizers样式特征

OpenLayers使用symbolizers样式特征相关推荐

最新文章

热门文章