<!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. html--div里让图片水平居中

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. [JZOJ4682] 【GDOI2017模拟8.11】生物学家

    题目 描述 题目大意 有一个010101序列,可以改变状态,每个状态改变都有固定的代价. 接下来有些人想要将一些位置改成特定的状态,如果按照他们要求做了就可以得到一些钱, 否则得不到,有时还要陪钱. ...

  3. Nginx在windows系统的常用命令

    启动 start nginx 强制停止 nginx.exe -s stop 重启 nginx.exe -s reload

  4. LUOGU P1613 跑路 (倍增floyd)

    解题思路 倍增$floyd$,首先设$f[i][j][k]$表示$i$这个点到$j$的距离能否为$2^k$,初值是如果x,y之间有边,那么$f[x][y][0]=1$.转移方程就是$f[i][j][t ...

  5. Joomla - K2组件（文章管理扩展）

    一.下载 K2 进入 https://getk2.org/ ,点击DOWNLOAD K2 下载K2 下载完毕得到一个安装包 二.安装 K2 进入看后台,点击顶栏主菜单 扩展管理 -> 扩展安装 ...

  6. VS2010-如何建立并运行多个含有main函数的文件

    一.先说两个概念,解决方案与工程 在VS2010中,工程都是在解决方案管理之下的.一个解决方案可以管理多个工程,可以把解决方案理解为多个有关系或者没有关系的工程的集合. 每个应用程序都作为一个工程来处 ...

  7. Gen8折腾日记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月7日,可惜在博客园这边不能修改发布时间.) 放假伊始,老大订购了两台服务器,一台是Dell的R630,用于其他 ...

  8. Python-pip更改国内源

    windows方式: 1.打开任意文件夹,在上方地址栏中输入%appdata% 2.在此目录里新建文件夹pip 3.在pip文件夹里新建文件名:pip.ini 4.把以下内容复制到pip.ini中,保 ...

  9. python3-常用模块之openpyxl(1)

    1.创建工作簿 from openpyxl import Workbook # 创建excel对象 wb = Workbook() # 获取第一个sheet = wb.active # 单元格写入内容 ...

  10. BMP 图片格式

     BMP根据颜色深度,可以分为2(1位).16(4位).256(8位).65536(16位)和1670万(24位)以及32位含有alpha通道.8位图像可以是 索引彩色图像外,也可以是灰阶图像,而索引 ...