<!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. falcon监控指标

    mysql监控指标: 流量状态: Bytes_received/s #平均每秒从所有客户端接收到的字节数,单位KB Bytes_sent/s #平均每秒发送给所有客户端的字节数,单位KB

  2. IO流读取和写入文件

    package com.xmlmysql.demo.config; import java.io.BufferedReader; import java.io.BufferedWriter; impo ...

  3. 基于vue-cli的vs code设置

    vue-cli自带eslin校验,vs code采用下可以设置在保存文件时会自动纠正格式 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detec ...

  4. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  5. TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习

    自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...

  6. C++字符串前面加LR

    const std::experimental::filesystem::path symbolsFilename = LR"(d:\fulongtech_git\draing_recogn ...

  7. base64,AES,RSA,SHA和MD5等加密方式(jdk)

    import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import javax.crypto.Cipher; import jav ...

  8. [Swoole系列入门教程 2] 入门级的Swoole的demo.服务端与客户端

  9. 廖雪峰Java10加密与安全-6数字证书-1数字证书

    数字证书: 非对称加密算法:对数据进行加密/解密 签名算法:确保数据完整性和抗否认性 摘要算法:确保证书本身没有被篡改

  10. LUOGU P1903 [国家集训队]数颜色 / 维护队列

    传送门 解题思路 带修莫队,第一次写,其实和普通莫队差不多,就是多了个时间轴,块分n^(2/3)最优,时间复杂度O(n^(5/3)). #include<iostream> #includ ...