Skip to content

a524313390/leaflet-draw-measure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

使用说明:

leaflet-draw-measure 依赖于 leaflet-measure-path 这个测量插件,此插件添加了点击绘制园,多线段,矩形,多边形动态测量,根据传递的参数显示测量结果。

使用方法:

1.需要先安装 leaflet-measure-path 与 leaflet-draw-measure

npm i leaflet-measure-path
npm i leaflet-draw-measure

2.引入插件

import L from "leaflet";
import 'leaflet-measure-path'
import 'leaflet-measure-path/leaflet-measure-path.css';

<body>
    <div id="map"></div>
    <div class="tools">
        <li></li>
        <li>线</li><li>矩形</li>
        <li></li>

        <li>清除</li>
    </div>
</body>
 measure  是否显示面积,默认为true
<script type="module">
    import MeasureDraw from '../src/index.js'


    var map = L.map('map').setView([37.75, -122.23], 10);

    L.esri.basemapLayer('Topographic').addTo(map);



    const draw = new MeasureDraw({ map });




    let dom = document.getElementsByClassName('tools')[0].getElementsByTagName('li');
    dom[0].onclick = function () {
        draw.createCricle();
    }
    dom[1].onclick = function () {
        draw.createLine();
    }
    dom[2].onclick = function () {
        draw.createRectangle();
    }
    dom[3].onclick = function () {
        draw.createPolygon();
    }
    dom[4].onclick = function () {
        draw.remove();
    }
</script>

</html>
具体请查看example文件夹下面的index.html

About

leaflet动态测量

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published