<!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. csps模拟测试707172部分题解myc

    题面:https://www.cnblogs.com/Juve/articles/11678524.html 骆驼:构造题,留坑 根据5×5的矩形构造成大矩形 毛一琛: mid in the midd ...

  2. 富文本vue-quill-editor修改图片上传方法

    富文本vue-quill-editor修改图片上传方法 HTML 代码 HTML codes <!-- 上传的组件 --> <upload style="display:n ...

  3. js实现iframe刷新

    今天要用到iframe的框架刷新,在网上找到了关于这方面内容,整理如下: (1)一般页面的刷新——reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForc ...

  4. 最新MySQL5.7.3.0版本安装（图文版本）

    转自:http://www.myexception.cn/mysql/1609536.html 可以从http://dev.mysql.com/downloads/下载MySQL服务器安装软件包,我下 ...

  5. 大O法时间复杂度计算

    困惑的点——log,如何计算得出? ① 上限:用来表示该算法可能有的最高增长率. ② 大O表示法:如果某种算法的增长率上限(最差情况下)是f(n),那么说这种算法“在O(f(n))中”.n为输入规模. ...

  6. NAT后的FTP服务器部署笔记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2017年2月5日) 寒假开始以后,过年之前有一个任务,为实验室的人搭建一个FTP,用之前部署好的物理服务器.这本就是网管干 ...

  7. Linux CentOS CapsLock 大小写反转问题 解决

    虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:

  8. 关于Server.MapPath和HostingEnvironment.MapPath

    最近做的项目需要在Controller里重写一个static的方法,在方法内用常用的Server.MapPath会报一个错误:An object reference is required for t ...

  9. Ajax请求参数传到后台为空

    1.编码格式 $.ajax({ method:'POST', url:'/midservice/studentAction/addStudent', data:$.toJSON(userDate), ...

  10. Django项目：CRM(客户关系管理系统)--65--55PerfectCRM实现CRM客户报名状态颜色变化

    # kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...