<!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. Java虚拟机性能管理神器 - VisualVM（9） 排查JAVA应用程序线程死锁【转】

    Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁[转] 标签: javajvm监控工具性能优化 2015-03-11 19:59 1948人阅读 评论(0) 收藏  ...

  2. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

  3. dns 逐级查找顺序

    1.浏览器 dns 缓存 2.Windows Host 文本 3.windows 本地 dns 缓存 方法/步骤 首先我们来查看win系统内保存的dns缓存并进行清空dns缓存操作. ... 点击确定 ...

  4. MathType插件安装

    1 安装包下载 版本号:7.4 下载 提取码:fxma 2 安装方法 用安装包内的Key激活即可.软件激活后不能升级. 注意:必须断网或者加入防火墙阻止联网使用! 3 可能遇到的问题 当安装完Math ...

  5. bzoj1706 relays 奶牛接力跑 线性代数

    题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T <= 100) ...

  6. Android SDK上手指南：示例项目

    Android SDK上手指南:示例项目 2013-12-26 15:40 核子可乐译 51CTO 字号:T | T Android SDK示例项目中的应用能够执行种种功能,例如各类用户界面元素.数据 ...

  7. CentOS设置打开终端快捷键

  8. 转：linux驱动开发的经典书籍

    源地址:http://www.cnblogs.com/xmphoenix/archive/2012/03/27/2420044.html Linux驱动学习的最大困惑在于书籍的缺乏,市面上最常见的书为 ...

  9. 洛谷p1605--迷宫 经典dfs

    https://www.luogu.org/problemnew/show/P1605 用这种题来复习一下dfs 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和终点坐标,问 ...

  10. 【DM642学习笔记三】flash的烧写

    ICETEK-DM642-PCI板上的29L008B芯片提供了8M位的Flash空间(访问地址空间是CE1,90000000h~90080000h).主要用于自启动功能和存储FPGA的配置数据. 一. ...