<!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. Joomla - 权限系统（访问权限限制）

    Joomla - 权限系统,以下以全局配置的权限设置为例,每个扩展都有自己的权限设置

  2. 自己编写jquery插件

    http://blog.csdn.net/chenxi1025/article/details/52222327 https://www.cnblogs.com/ajianbeyourself/p/5 ...

  3. nc 文件的nan识别

    表现形式:print()结果为 --      打印type为numpy.ma.core.MaskedConstant 使用 if type(x) == np.ma.core.MaskedConsta ...

  4. 杂项-SpringBoot-Jasypt：Jasypt（安全框架）

    ylbtech-杂项-SpringBoot-Jasypt:Jasypt(安全框架) 1. 使用jasypt加密Spring Boot应用中的敏感配置返回顶部 1. 本文讲述了在Spring Boot/ ...

  5. samba初级使用记录

    首先安利一下什么是samba: Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在 ...

  6. vue 五星评价插件

    html: <div class="starBox" ref="star1"> <div class="star" v-f ...

  7. HttpServletRequest request 获取当前登录的用户-获取当前用户

    有的业务需要知道当前登录的用户 当然需要引用这个啦 import javax.servlet.http.HttpServletRequest; 然后 HttpSession session = req ...

  8. Java学习之二（线程（了解） JVM GC 垃圾回收）

    线程与进程(了解)→JVM→字节码→GC 一.程序 = 算法 + 数据结构(大佬) 二.程序 = 框架 + 业务逻辑(现实) 1.线程与进程.同步与异步 1.1进程是什么? 进程就是操作系统控制的基本 ...

  9. 04-3-object类型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. AlexNet详细解读

    AlexNet详细解读 目前在自学计算机视觉与深度学习方向的论文,今天给大家带来的是很经典的一篇文章 :<ImageNet Classification with Deep Convolutio ...