<!DOCTYPE html>

<html>

  <head>

    <title>测量距离和面积</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />

    <link rel="stylesheet" href="./css/style.css" type="text/css">

    <style type="text/css">

        #controlToggle li {

            list-style: none;

        }

        p {

            width: 512px;

        }

        #options {

            position: relative;

            width: 512px;

        }

        #output {

            float: right;

        }

        /* avoid pink tiles */

        .olImageLoadError {

            background-color: transparent !important;

        }

    </style>

    <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>

    <script type="text/javascript">

        var map, measureControls;

        function init(){

            map = new OpenLayers.Map('map');

            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

            map.addLayers([wmsLayer]);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.addControl(new OpenLayers.Control.MousePosition());

            // style the sketch fancy

            var sketchSymbolizers = {

                "Point": {

                    pointRadius: 4,

                    graphicName: "square",

                    fillColor: "white",

                    fillOpacity: 1,

                    strokeWidth: 1,

                    strokeOpacity: 1,

                    strokeColor: "#333333"

                },

                "Line": {

                    strokeWidth: 3,

                    strokeOpacity: 1,

                    strokeColor: "#666666",

                    strokeDashstyle: "dash"

                },

                "Polygon": {

                    strokeWidth: 2,

                    strokeOpacity: 1,

                    strokeColor: "#666666",

                    fillColor: "white",

                    fillOpacity: 0.3

                }

            };

            var style = new OpenLayers.Style();

            style.addRules([

                new OpenLayers.Rule({symbolizer: sketchSymbolizers})

            ]);

            var styleMap = new OpenLayers.StyleMap({"default": style});

            // allow testing of specific renderers via "?renderer=Canvas", etc

            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;

            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            measureControls = {

                line: new OpenLayers.Control.Measure(

                    OpenLayers.Handler.Path, {

                        persist: true,

                        handlerOptions: {

                            layerOptions: {

                                renderers: renderer,

                                styleMap: styleMap

                            }

                        }

                    }

                ),

                polygon: new OpenLayers.Control.Measure(

                    OpenLayers.Handler.Polygon, {

                        persist: true,

                        handlerOptions: {

                            layerOptions: {

                                renderers: renderer,

                                styleMap: styleMap

                            }

                        }

                    }

                )

            };

            var control;

            for(var key in measureControls) {

                control = measureControls[key];

                control.events.on({

                    "measure": handleMeasurements,

                    "measurepartial": handleMeasurements

                });

                map.addControl(control);

            }

            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

            document.getElementById('noneToggle').checked = true;

        }

        function handleMeasurements(event) {

            var geometry = event.geometry;

            var units = event.units;

            var order = event.order;

            var measure = event.measure;

            var element = document.getElementById('output');

            var out = "";

            if(order == 1) {

                out += "测量距离: " + measure.toFixed(3) + " " + units;

            } else {

                out += "测量面积: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";

            }

            element.innerHTML = out;

        }

        function toggleControl(element) {

            for(key in measureControls) {

                var control = measureControls[key];

                if(element.value == key && element.checked) {

                    control.activate();

                } else {

                    control.deactivate();

                }

            }

        }

    </script>

  </head>

  <body onload="init()">

    <div id="map" class="smallmap"></div>

    <div id="options">

        <div id="output">

        </div>

        <ul id="controlToggle">

            <li>

                <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" />

                <label for="noneToggle">导航</label>

            </li>

            <li>

                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />

                <label for="lineToggle">测量距离</label>

            </li>

            <li>

                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />

                <label for="polygonToggle">测量面积</label>

            </li>

        </ul>

    </div>

  </body>

</html>

OpenLayers测量距离和面积的更多相关文章

  1. OpenLayers动态测量距离和面积，并可自定义测量的线样式

    全局操作变量 /** * @description 标注弹出框 */ HtmlPopup = null; /** * @description 临时图层类数据源 */ VectorSource = n ...

  2. Arcgis for Js之GeometryService实现测量距离和面积

    距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryService实现测量面积和距离.先看看实现后的效果:                                  距离 ...

  3. （转）Arcgis for Js之GeometryService实现测量距离和面积

    http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryServ ...

  4. CAD图在线Web测量工具代码实现(测量距离、面积、角度等)

    CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能 能Web在 ...

  5. ArcGIS Runtime SDK for WPF之测量距离和面积

    bu不多说,上代码 using System.Windows; using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Tasks; using ESRI ...

  6. Arcgis for Js之GeometryService实现測量距离和面积

    距离和面积的測量时GIS常见的功能.在本节,讲述的是通过GeometryService实现測量面积和距离.先看看实现后的效果: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  7. Android GIS开发系列-- 入门季（7） 利用GeometryEngine坐标转换、计算距离与面积等

    GeometryEngine是Arcgis的重要工具类,利用此工具类,可以计算地图上的距离.面积,将点.线.面转化为Json数据,将Json转化为点线面,坐标转换作用非常强大. 一.坐标转化 将用到方 ...

  8. Openlayers 3计算长度和面积

    1.比较粗糙的计算方式 计算长度 var length = lineFeature.getGeometry().getLength(); if (length > 1000) { length ...

  9. arcgis api for javascript 距离与面积量算

    在之前的实验中,距离量算跟面积量算一直出问题,费了非常长的时间,各种调式找不到原因. 如今成功完毕.与君共勉 1.距离量算中        lengthParams.polylines = [geom ...

随机推荐

  1. mysql on windows的安装

    1.去官网下载合适的压缩包 网址:https://dev.mysql.com/downloads/file/?id=476233 (拉到最下面点击 No thanks,just start my do ...

  2. Java监控工具介绍，VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试【转】

    Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试[转] 本文是本人前一段时间做一个简单Java监控工具调研总 ...

  3. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  4. 阿里云MaxCompute 2019-8月刊

    您好,MaxCompute 2019.8月刊为您带来8月产品.技术最新动态,欢迎阅读. 导读 [重要发布]8月产品重要发布 [文档更新]8月重要文档更新推荐 [干货精选]8月精选技术文章推荐 [精彩活 ...

  5. fetchSql是3.2.3新增的连贯操作方法，用于直接返回SQL而不是执行查询。

    fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询. 例如: $result = M('User')->fetchSql(true)->find(1); 输出 ...

  6. C++ 判断是否为邮箱格式

    总结了一下合法的email地址格式如下: 1. 首字符必须用字母,而且其它的字符只能用26个大小写字母.0~9及_-.@符号 2. 必须包含一个并且只有一个符号“@” 3. @后必须包含至少一个至多三 ...

  7. springboot与任务（定时任务）

    描述: 项目开发中经常需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息.Spring为我们提供了异步执行任务调度的方式,提供TaskExecutor .TaskScheduler ...

  8. .git文件夹太大问题及解决方法

    最近我们做了自动化构建, 发现文件.git文件夹越来越大, 求后端小伙伴帮忙, 小伙伴指点了一下说周末弄了一下, 忘记命令的.大致的意思就是找到git 提交了哪些大文件. 然后重构git, 先分享给小 ...

  9. 转：Eclipse中设置编码的方式

    来源:http://blog.csdn.net/jianw2007/article/details/3930915 如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Ja ...

  10. SPSS与Streams的集成实现实时预测

    SPSS与Streams的集成实现实时预测 SPSS Modeler 是一个数据挖掘工作台,提供了一个可了解数据并生成预测模型的最先进的环境.Streams 提供了一个可伸缩的高性能环境,对不断变化的 ...