<!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. 转载 pep8安装

    一.前提准备 在Python安装了pip的情况下,命令行输入 pip install autopep8 二.PyCharm设置 成功之后,打开PyCharm,File-->setting--&g ...

  2. Django 操作Cookie与Session

    目录 Cookie Session Django中操作Cookie 基本操作 基于cookie的登录装饰器 Django中操作Session 基本操作 Session流程解析 基于session的登录 ...

  3. LUOGU P4027 [NOI2007]货币兑换 (斜率优化+CDQ分治)

    传送门 解题思路 题目里有两句提示一定要看清楚,要不全买要不全卖,所以dp方程就比较好列,f[i]=max(f[j]*rate[j]*a[i])/(rate[j]*a[j]+b[j])+(f[j]*b ...

  4. 对比两个String无规律包含连续4个相同字符返回true的方法

    package com.qif.dsa.util; import java.util.ArrayList; import java.util.List; /** * @author * @Title: ...

  5. js 手机号加密 中间星号表示

    var tel = String(this.memberMsg.phoneNo); var dh=tel.substr(0,3)+"******"+tel.substr(8); r ...

  6. 我喜欢Mouding

    我Smily喜欢Mouding

  7. django中的request对象

    Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. 我们来看一看这个HttpRequest对 ...

  8. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  9. MyBatis - 输入和输出参数

    基础知识 mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回值是一个对象的集合,@resultType中只能写该对 ...

  10. ssh 免密码登入

    1.普通免密码登入 (1)  生成秘钥 [root@vick ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter f ...