码迷,mamicode.com
首页 > 其他好文 > 详细

002 Leaflet 第二个demo 地图上的矩形拉框选择

时间:2017-03-30 11:23:32      阅读:1353      评论:0      收藏:0      [点我收藏+]

标签:down   class   htm   listener   nod   isa   拖动   监听   function   

一、使用到的文件

leaflet-src.js

leaflet.css

label相关js, 可以从以下网址下载

https://github.com/Leaflet/Leaflet.label

 

需要leaflet的相关插件都可以从http://leafletjs.com/plugins.html  leafletjs.com的插件列表中下载

二、源码

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="label/libs/leaflet/leaflet.css" />
    <link rel="stylesheet" href="label/leaflet.label.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="label/libs/leaflet/leaflet-src.js"></script>
    <script src="label/src/Label.js"></script>
    <script src="label/src/BaseMarkerMethods.js"></script>
    <script src="label/src/CircleMarker.Label.js"></script>
    <script src="label/src/Map.Label.js"></script>
  </head>
  <body>
    <div id="map" style="height:500px;width:500px;"></div>
    <button id="rectangleSel" > 拉框选择 </button>
    <script>
        var map;
        $(function(){
            map = L.map(map, {
                center: [40, 100],
                zoom: 4
            });
            // 影像
            L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 地名标注
            L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 边界
            L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            $("#rectangleSel").unbind(click).bind(click,function(){
                map.on(mousedown, rectangleMeasure.mousedown).on(mouseup, rectangleMeasure.mouseup);
            });
            console.log(map);
        });
         var rectangleMeasure = {
            startPoint: null,
            endPoint: null,
            rectangle:null,
            tips:null,
            layer: L.layerGroup(),
            color: "#0D82D7",
            addRectangle:function(){
                rectangleMeasure.destory();
                var bounds = [];
                bounds.push(rectangleMeasure.startPoint);
                bounds.push(rectangleMeasure.endPoint);
                rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1});
                rectangleMeasure.rectangle.addTo(rectangleMeasure.layer);        
                
                var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(),
                    northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(),
                    southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast();
                var width = northWestPoint.distanceTo(northEastPoint)/1000,
                    height = northEastPoint.distanceTo(southEastPoint)/1000;
                    console.log("", width);
                    console.log("", height);
                var area = Number(width) * Number(height);
                rectangleMeasure.addTips(area.toFixed(3));
                rectangleMeasure.layer.addTo(map);
            },
            addTips:function(area){
                console.log(面积:+area);
                rectangleMeasure.tips = L.circleMarker(rectangleMeasure.endPoint, {color: rectangleMeasure.color});
                rectangleMeasure.tips.setRadius(1);
                rectangleMeasure.tips.bindLabel("面积:" + area + "(平方公里)", {noHide: true, direction: right, clickable: true, className: "leaflet-label-tffq"});            
                rectangleMeasure.tips.addTo(rectangleMeasure.layer);
            },
            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();
                });
            },
            mousedown: function(e){
                rectangleMeasure.rectangle = null;
                rectangleMeasure.tips = null;
                map.dragging.disable();
                rectangleMeasure.startPoint = e.latlng;
                map.on(mousemove,rectangleMeasure.mousemove)
            },
            mousemove:function(e){
                rectangleMeasure.endPoint = e.latlng;
                rectangleMeasure.addRectangle();
                map.off(mousedown , rectangleMeasure.mousedown).on(mouseup, rectangleMeasure.mouseup);
            },
            mouseup: function(e){        
                rectangleMeasure.close();
                map.dragging.enable();
                map.off(mousemove,rectangleMeasure.mousemove).off(mouseup, rectangleMeasure.mouseup).off(mousedown, rectangleMeasure.mousedown);
            },
            destory:function(){
                if(rectangleMeasure.rectangle)
                    rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);
                if(rectangleMeasure.tips)
                    rectangleMeasure.layer.removeLayer(rectangleMeasure.tips);
            }
         }
    </script>
  </body>
</html>

 

三、流程讲解

1、rectangleSel事件-->监听click,mousemove, mouseup事件,设置地图拖动为false

2、click-->画一个点p1

3、mousemove-->依据当前的点p2 和 click时画的点p1,在地图上画矩形框

4、mouseup --> 添加面积信息label, 取消click,mousemove, mouseup的事件监听,恢复地图拖动为true

本次的学习就到这里啦,可以发散脑洞,想出更好的点子。以便更清晰的记忆一些事情。

突然想到了我很喜欢的一句话,最后分享一下吧。希望有人可以看到这里,绿色是什么的颜色。嫩绿色就像我的职场生涯才刚刚开始一样。

苟日新,日日新,又日新。

002 Leaflet 第二个demo 地图上的矩形拉框选择

标签:down   class   htm   listener   nod   isa   拖动   监听   function   

原文地址:http://www.cnblogs.com/zsslll/p/6644979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!