zoukankan html css js c++ java

003 Leaflet 第三个demo 地图上的面积测量

一、使用到的文件

leaflet-src.js

Leaflet.Editable.js

leaflet-measure-path.js

leaflet.css

leaflet-measure-path.css

面积测量区别于拉框测量面积而言，重点在于面积的计算上面，咨询了gis的小伙伴们，放才知道让用户随意框选形状，计算面积时个复杂的逻辑。

既然是复杂的逻辑，看来不适合自己造个轮子玩。

所以今天借助了一个插件leaflet-measure-path

插件的下载地址：https://github.com/ProminentEdge/leaflet-measure-path

二、源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet Measure Path - example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <link rel="stylesheet" href="../leaflet-measure-path.css" />
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
            font-size: 10px;
        }
        #map {
            width: 800px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <button id="mesureBtn" onClick="areaMeasure.init()">面积测量</button>

    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet-editable@latest/src/Leaflet.Editable.js" ></script>
    <script src="../leaflet-measure-path.js"></script>
    <script type="text/javascript">
        var map = L.map('map', {editable: true}).setView([57.69, 11.9], 13);
        L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var polygon = L.polygon([
                [57.69, 11.89],
                [57.697, 11.88],
                [57.71, 11.89],
                [57.71, 11.91],
                [57.69, 11.91]
            ], {showMeasurements: true})
            .addTo(map);

        L.polyline([
                [57.67, 11.85],
                [57.677, 11.86],
                [57.68, 11.85],
                [57.69, 11.86],
            ], {showMeasurements: true, measurementOptions: {imperial:true}})
            .addTo(map);

        L.circle([57.694, 11.94], 1000, {showMeasurements: true})
            .addTo(map);

        L.circle([57.705, 11.92], 750, {showMeasurements: true, measurementOptions: {imperial:true}})
            .addTo(map);

        polygon.enableEdit();
        map.on('editable:vertex:drag editable:vertex:deleted', polygon.updateMeasurements, polygon);    
        
        // 面积测量方法
        var areaMeasure = {
            points:[],
            color: "red",
            layers: L.layerGroup(),
            polygon: null,
            init:function(){
                areaMeasure.points = [];
                areaMeasure.polygon = null;
                map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick);
            },
            close:function(){
                var lab = rectangleMeasure.tips.getLabel();
                var tt = document.createTextNode(rectangleMeasure.tips.getLabel()._content);
                lab._container.innerHTML = "";
                lab._container.appendChild(tt);
                var span = document.createElement("span");
                span.innerHTML = "【关闭】";
                span.style.color = "#00ff40";
                lab._container.appendChild(span);
                L.DomEvent.addListener(span,"click",function(){
                    rectangleMeasure.destory();
                });
            },
            click:function(e){    
                map.doubleClickZoom.disable();
                // 添加点信息
                areaMeasure.points.push(e.latlng);
                // 添加面
                map.on('mousemove', areaMeasure.mousemove);
            },
            mousemove:function(e){
                areaMeasure.points.push(e.latlng);
                if(areaMeasure.polygon)
                    map.removeLayer(areaMeasure.polygon);
                areaMeasure.polygon = L.polygon(areaMeasure.points,{showMeasurements: true, color: 'red'});
                //areaMeasure.polygon.addTo(map);
                areaMeasure.polygon.addTo(areaMeasure.layers);
                areaMeasure.layers.addTo(map);
                areaMeasure.points.pop();
            },
            dblclick:function(e){ // 双击结束
                areaMeasure.polygon.addTo(areaMeasure.layers);
                areaMeasure.polygon.enableEdit();
                map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
                map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick);
            },
            destory:function(){
                
            }
        }
    </script>
</body>
</html>

查看全文

相关阅读:
HTML DOM教程 14HTML DOM Document 对象
 HTML DOM教程 19HTML DOM Button 对象
 HTML DOM教程 22HTML DOM Form 对象
 HTML DOM教程 16HTML DOM Area 对象
 ubuntu 11.04 问题小结
 VC6.0的错误解决办法小结
 boot.img的解包与打包
 shell里截取字符串
 从零使用vc
Imagemagick 对图片大小和格式的调整

原文地址：https://www.cnblogs.com/zsslll/p/6659131.html