<!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>

OpenLayers使用symbolizers样式特征的更多相关文章

  1. jquery选择器扩展之样式选择器

    https://github.com/wendux/style-selector-jQuery-plugin http://blog.csdn.net/duwen90/article/details/ ...

  2. 《CSS网站布局实录》学习笔记（二）

    第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  3. CSS3字体模块

    介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...

  4. 教你编写百度搜索广告过滤的chrome插件

    1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...

  5. WPF 初识

    1.WPF 与Winform比较 1.1.WPF所有的操作都不依赖于GDI和GDI+,而是间接依赖于强大的Direct3D,这就意味着通过WPF可以做出以前WinFrom无法想象的视觉效果,包括3D效 ...

  6. ife2018 零基础学院 day 3

    ife2018 零基础学院 第三天:让简历有点色彩 什么是CSS,CSS是如何工作的! 摘自CSS如何工作 什么是CSS CSS是一种用于向用户指定文档如何呈现的语言 - 它们如何被指定样式.布局等. ...

  7. 重写TreeView模板来实现数据分层展示(一)

    总想花些时间来好好总结一下TreeView这个WPF控件,今天来通过下面的这几个例子来好好总结一下这个控件,首先来看看一个常规的带虚线的TreeView控件吧,在介绍具体如何完成之前首先来看看最终实现 ...

  8. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

  9. 跟我一起学WPF（2）：WPF控件基础

    WPF控件简介 通过上一篇XAML语言的介绍,我们知道,XAML是一个树形结构,同样,WPF控件作为构成整个XAML树的一部分,也是一个树形结构.我们看一个简单的例子. <Button.Cont ...

随机推荐

  1. loj6094 归乡迷途

    题意:有一张n个点的无向图,点有标号.求满足下列性质的图有多少个. 1.任意节点到1的最短路唯一.2.i的最短路长度<=i+1的最短路长度.3.所有点的度数给定,为2或3. n<=400. ...

  2. 手把手教你接口自动化测试 – SoapUI & Groovy【转】

    手把手教你接口自动化测试 – SoapUI & Groovy Posted on 2015-01-21 09:38 WadeXu 阅读(12741) 评论(10) 编辑 收藏 手把手教你接口自 ...

  3. 洛谷P1291 [SHOI2002]百事世界杯之旅

    题目链接: kma 题目分析: 收集邮票的弱弱弱弱化版,因为是期望,考虑倒推 设\(f[i]\)表示现在已经买齐了\(i\)种,距离买完它的剩余期望次数 那么下一次抽有\(\frac{i}{n}\)的 ...

  4. VS2010-MFC（VS2010应用程序工程中文件的组成结构）

    转自:http://www.jizhuomi.com/software/143.html 用应用程序向导生成框架程序后,我们可以在之前设置的Location下看到以解决方案名命名的文件夹,此文件夹中包 ...

  5. mongdb 使用聚合函数异常

    异常信息: Command execution failed:  Error [The 'cursor' option is required, except for aggregate with t ...

  6. PAT甲级——A1092 To Buy or Not to Buy【20】

    Eva would like to make a string of beads with her favorite colors so she went to a small shop to buy ...

  7. PAT甲级——【牛客练习题100】

    题目描述 Given N rational numbers in the form "numerator/denominator", you are supposed to cal ...

  8. Python学习day23-面向对象的编程

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. js (function(){}()),(function(){})(),$(function(){});之间的区别

    参考:https://blog.csdn.net/stpice/article/details/80586444 (function(){}()), (function(){})() 均为立即执行函数 ...

  10. JZOJ5965【NOIP2018提高组D2T2】填数游戏

    题目 作为NOIP2018的题目,我觉得不需要把题目贴出来了. 大意就是,在一个n∗mn*mn∗m的010101矩阵中,从左上角到右下角的路径中,对于任意的两条,上面的那条小于下面的那条.问满足这样的 ...