<!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. python 请求测试环境的https接口地址报SSL错误验证，访问不了

    解决文案: response = requests.post(url, data=payload, json=None, headers=headers,verify=False)print(resp ...

  2. Data Dependency

    https://en.wikipedia.org/wiki/Data_dependency (There’s some misleading expression on the flow/data d ...

  3. W: 仓库 “http://ppa.launchpad.net/levi-armstrong/qt-libraries-trusty/ubuntu xenial Release” 没有 Release 文件。

    解决办法:将对应的PPA删除掉即可 使用以下命令切换到对应PPA目录: cd /etc/apt/sources.list.dsudo rm levi-armstrong-ubuntu-qt-libra ...

  4. java 获取本机所有IP地址

    import java.net.Inet6Address; import java.net.InetAddress; import java.net.NetworkInterface; import ...

  5. 关于前端调用后端php数据跨域的问题

    https://blog.csdn.net/qq_21386275/article/details/87269979 js前端 <!DOCTYPE html><html>< ...

  6. python格式化输出%，while else

    一.格式化输出% 需求:自我介绍模板 #格式化输出 # % s d %占位符,占个位置 s(字符串),d(数字)替换内容的类型 name = input('请输入姓名:') age = input(' ...

  7. 使用RequestsCookieJar自动保存并传递cookie

    使用python的requests开发爬虫程序的时候,经常需要将之前请求返回的cookie值作为下一个请求的cookie进行调用,比如模拟登录之后的返回的sessionID,就是需要作为后续请求的co ...

  8. HBase的安装与配置

  9. HBase Master-status

  10. springboot2配置druid数据库连接池

    注意配置以下的依赖: <!-- 引入druid数据源--> <dependency> <groupId>com.alibaba</groupId> &l ...