<!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. Android开发 处理拍照完成后的照片角度

    private void initImageAngle(){ Bitmap imageBitmap = BitmapFactory.decodeFile(FilePathSession.getFace ...

  2. react中使用屏保

    1,默认路由路径为屏保组件 <HashRouter history={hashHistory}> <Switch> <Route exact path="/&q ...

  3. 以太坊solidity智能合约语言学习资源整理

    暂时看到篇文章写的不错,先收集下来,后面有机会自己也整理一个 Solidity语言学习(一)Solidity语言学习(二)——Solidity的安装与编译Solidity语言学习(三)——智能合约编程 ...

  4. HTML - 列表标签相关

    <html> <head></head> <body> <!-- 有序列表 type属性(列表的序号以什么样的形式显示) : type = &qu ...

  5. python相关软件安装流程图解————————python安装——————python-3.7.1-amd64

    首先查看自己的系统版本 是32位的还是64位的 https://www.python.org/downloads/windows/ —————————python下载安装 开始———————————— ...

  6. Docker系列(十五)：Openshift 简介

    1.简单了解openshift相关组件 1.openshift是基于容器技术构建的一个云平台 2.kubernetes是容器编排组件 3.docker是容器引擎驱动组件 4.openshift在Pas ...

  7. mysql 乐观判断 校验

    说下场景, 用户账户 有 100 元钱,  他执行了两个操作,  A操作发红包发了80块钱, B操作 发红包 发了 70 ,并发, 假如没有 冻结这一说法,  两个操作都是去 查询余额, 还有100 ...

  8. net.sf.json JSONObject与JSONArray总结

    JSONObject:json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} JSONArray:json数组,使用中括号[ ],只不过数组里面的项也是json键值对格式 ...

  9. 多线程同步锁和死锁以及synchronized与static synchronized 的区别

    线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序.简而言之:一个程序运行后至少有一个进程,一个进程 ...

  10. dd- Linux必学的60个命令

    1.作用 dd命令用来复制文件,并根据参数将数据转换和格式化. 2.格式 dd [options] 3.[opitions]主要参数 bs=字节:强迫 ibs=<字节>及obs=<字 ...