关闭

[置顶] leaflet扩展之identifyControl

标签: 扩展javascriptidentifyleafletplugin
311人阅读 评论(0) 收藏 举报
分类:

leaflet扩展—identifyControl

之前没写过leaflet插件及博客,如有不足请多多指教。

需要依赖leaflet.js及esri-leaflet.js
随后附上identifyControl插件

先上图
图片预览

预览demo

下载地址
html代码

<div id="map"></div>

js代码

$(function(){
    Globle.init();//初始化
});
var Globle = {
    init: function() {
            Globle.map = L.map('map', {
                            minZoom: 5
                        }).setView([38.5, -96.8], 6);
L.esri.basemapLayer('Gray').addTo(Globle.map);
Globle.dynamic = L.esri.dynamicMapLayer({url: 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer',
                            opacity: 0.7
                        });
Globle.dynamic.addTo(Globle.map);//加载地图
Globle.addToolbar();//加载工具条

                    },

                    //加载右侧工具条事件
addToolbar: function() {
        var toolbar = L.control({position: 'topright'}),
                            add_marker_div, del_marker_div;
        toolbar.onAdd = function() {
                            var div = L.DomUtil.create('div', 'toolbar');
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="identify" value="-1" title="点选查询" src="img/toolbar/gongju_search_hover.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="default"  title="缩放至全图" src="img/toolbar/gongju_quantu_noral.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="zoom_in"  title="放大" src="img/toolbar/gongju_fangda_noral.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="zoom_out" title="缩小" src="img/toolbar/gongju_suoxiao_noral.png" style="width:30px;height:30px;"/>';
                            return div;
                        };
                        toolbar.addTo(Globle.map);

                        //identify查询
                        $(".identify").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                        }, function() {
                            if($(this).attr("value") == "-1") {
                                $(this).attr("src", "img/toolbar/gongju_search_noral.png");
                            } else {
                                $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                            }
                        });

                        $(".identify").click(function() {
                            if($(this).attr("value") == "-1") {
                                $(this).attr("value", "1");
                                $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                            } else {
                                $(this).attr("value", "-1");
                                $(this).attr("src", "img/toolbar/gongju_search_noral.png");
                            }
                        });

                        $(".default").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_quantu_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_quantu_noral.png");
                        });

                        $(".zoom_in").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_fangda_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_fangda_noral.png");
                        });
                        $(".zoom_out").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_suoxiao_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_suoxiao_noral.png");
                        });

                        Globle.zoomToDefault();
                        Globle.identify();//identify查询事件
                        Globle.mapZoomIn();//地图放大缩小事件
                        Globle.mapZoomOut();

                    },
                    //缩放到全图
                    zoomToDefault: function() {
                        $(".default").click(function() {
                            Globle.map.setView({
                                lon: 109.17388916015625,
                                lat: 38.97468566894531
                            }, 10);
                        });
                    },
/*************************看这里***********************/
//identify查询
identify: function() {
        Globle.identifyControl = new                 L.Control.IdentifyControl({
                            handler: 'enabled',
                            identifylayerId:         Globle.dynamic._leaflet_id,
      identifysuccess: function(data) {
             //查询结果显示
             alert("identify查询成功,得到数据你就可以为所欲为了!!!");
             alert(data.results.length);
             console.log(data);
             }}).addTo(Globle.map);

        //identify开关控制
        $(".identify").click(function() {
               Globle.identifyControl.toggle();
        });
},

//地图放大
mapZoomIn: function() {
        $(".zoom_in").click(function(e) {
                    Globle.map.zoomIn();
                });
        },
//地图缩小
mapZoomOut: function() {
        $(".zoom_out").click(function(e) {
            Globle.map.zoomOut();
                });
            }
        }

完整代码

<html>

    <head>
        <meta charset=utf-8 />
        <title>Identifying Features</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

        <!-- Load Leaflet from CDN-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet.css" />
        <link rel="stylesheet" href="css/leaflet.draw.css" />
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet-src.js"></script>

        <!-- Load Esri Leaflet from CDN -->
        <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.2/esri-leaflet.js"></script>
        <script src="js/leaflet.draw.js"></script>
<script src="js/leaflet.identifycontrol.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
            }
        </style>
    </head>

    <body>

        <style>

            .leaflet-bar.map-text a {
                color: #79BD8F;
                display: inline;
            }
        </style>

        <div id="map"></div>

        <script>
        $(function(){
            Globle.init();
        });
            var Globle = {
                    init: function() {
                        Globle.map = L.map('map', {
                            minZoom: 5
                        }).setView([38.5, -96.8], 6);
                        L.esri.basemapLayer('Gray').addTo(Globle.map);
                        Globle.dynamic = L.esri.dynamicMapLayer({
                            url: 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer',
                            opacity: 0.7
                        });
                        Globle.dynamic.addTo(Globle.map);
                        Globle.addToolbar();

                    },
                    //加载右侧工具条
                    addToolbar: function() {
                        var toolbar = L.control({
                                position: 'topright'
                            }),
                            add_marker_div, del_marker_div;
                        toolbar.onAdd = function() {
                            var div = L.DomUtil.create('div', 'toolbar');
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="identify" value="-1" title="点选查询" src="img/toolbar/gongju_search_hover.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="default"  title="缩放至全图" src="img/toolbar/gongju_quantu_noral.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="zoom_in"  title="放大" src="img/toolbar/gongju_fangda_noral.png" style="width:30px;height:30px;"/>';
                            L.DomUtil.create('div', 'tooldiv', div).innerHTML = '<img class="zoom_out" title="缩小" src="img/toolbar/gongju_suoxiao_noral.png" style="width:30px;height:30px;"/>';
                            return div;
                        };
                        toolbar.addTo(Globle.map);

                        //identify查询
                        $(".identify").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                        }, function() {
                            if($(this).attr("value") == "-1") {
                                $(this).attr("src", "img/toolbar/gongju_search_noral.png");
                            } else {
                                $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                            }
                        });

                        $(".identify").click(function() {
                            if($(this).attr("value") == "-1") {
                                $(this).attr("value", "1");
                                $(this).attr("src", "img/toolbar/gongju_search_hover.png");
                            } else {
                                $(this).attr("value", "-1");
                                $(this).attr("src", "img/toolbar/gongju_search_noral.png");
                            }
                        });

                        $(".default").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_quantu_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_quantu_noral.png");
                        });

                        $(".zoom_in").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_fangda_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_fangda_noral.png");
                        });
                        $(".zoom_out").hover(function() {
                            $(this).attr("src", "img/toolbar/gongju_suoxiao_hover.png");
                        }, function() {
                            $(this).attr("src", "img/toolbar/gongju_suoxiao_noral.png");
                        });

                        Globle.zoomToDefault();
                        Globle.identify();//identify查询事件
                        Globle.mapZoomIn();//地图放大缩小事件
                        Globle.mapZoomOut();

                    },
                    //缩放到全图
                    zoomToDefault: function() {
                        $(".default").click(function() {
                            Globle.map.setView({
                                lon: 109.17388916015625,
                                lat: 38.97468566894531
                            }, 10);
                        });
                    },
                    //identify查询
                    identify: function() {
                        Globle.identifyControl = new L.Control.IdentifyControl({
                            handler: 'enabled',
                            identifylayerId: Globle.dynamic._leaflet_id,
                            identifysuccess: function(data) {
                                //查询结果显示
                                alert("identify查询成功,得到数据你就可以为所欲为了!!!");
                                alert(data.results.length);
                                console.log(data);

                            }
                        }).addTo(Globle.map);
                        $(".identify").click(function() {
                            Globle.identifyControl.toggle();
                        });
                    },
                    //地图放大
                    mapZoomIn: function() {
                        $(".zoom_in").click(function(e) {
                            Globle.map.zoomIn();
                        });
                    },
                    //地图缩小
                    mapZoomOut: function() {
                        $(".zoom_out").click(function(e) {
                            Globle.map.zoomOut();
                        });
                    }
                }

        </script>

    </body>

</html>
1
0
查看评论

扩展Leaflet:类

Leaflet拥有数百个自由插件,这些插件扩展了Leaflet的功能:有时采用通用的方式,有时采用特定场景的方式。         Leaflet拥有如此之多插件的部分原因是Leaflet易于扩展。该教程介绍扩展Leaflet最常用的方式。   &#...
  • naipeng
  • naipeng
  • 2016-12-15 10:20
  • 1478

Leafletjs学习教程和相关代码整理

Leafletjs学习教程和相关代码整理 一.Leaflet简介 官方网站:http://leafletjs.com/ 官网上的api和例子大家多看看,多学习学习。 Lefalet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir...
  • Sensation_cyq
  • Sensation_cyq
  • 2016-07-13 17:58
  • 2718

【Leafletjs】L.Map 中文API

L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with a given center and zoom var map = L.ma...
  • hdtrs2010
  • hdtrs2010
  • 2014-04-11 09:38
  • 14952

Leaflet v1.0.0 Map接口API 方法(未完待续)

方法(Methods)
  • naipeng
  • naipeng
  • 2016-11-12 23:03
  • 2195

Leaflet教程(1)--小功能效果

1移动和缩放 // disable drag and zoom handlers //禁止移动和放大缩小 map.dragging.disable(); map.touchZoom.disable(); map.doubleClickZoom.disable(); map.scrollW...
  • zhouschina
  • zhouschina
  • 2014-07-10 15:42
  • 11747

Leaflet API 翻译

L.Point 显示以像素为单位的点的x,y坐标。 所以接受点对象的leaflet方法和选项都也接受他们简单数组的形式。 Constructor(函数构造器) L.Point():用给定点的x和y坐标来创建点对象。如果round设置为true,则将x和y的值转换为圆中...
  • hdtrs2010
  • hdtrs2010
  • 2014-05-04 10:16
  • 7910

Leaflet API 翻译(二)

L.Point 显示以像素为单位的点的x,y坐标。 所以接受点对象的leaflet方法和选项都也接受他们简单数组的形式。 Constructor(函数构造器) L.Point():用给定点的x和y坐标来创建点对象。如果round设置为true,则将x和y的值转换为圆中。?...
  • zhouschina
  • zhouschina
  • 2014-07-15 15:29
  • 2027

leafLet之API翻译

LMap Constructor构造器 Options选项 Events事件 Methods for Modifying Map State地图状态修改 Methods for Getting Map State获取地图状态 Methods for Layers and Controls图层控制 C...
  • weixin_38837021
  • weixin_38837021
  • 2017-09-08 17:48
  • 301

扩展Leaflet:图层(layer)

在Leaflet中,图层(layer)是随地图移动而移动的任何东西。本文首先解释如果做简单的扩展,然后看下如果创建它。 扩展方法(Extension methods)         一些Leaflet类拥有所谓的“扩展方法(extension  m...
  • naipeng
  • naipeng
  • 2016-12-15 14:58
  • 4385

Leaflet绘制热力图

时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,leaflet因其轻量、灵活性得到了越来越多的应用。并且leaflet的插件也非常多,综合使用的话,可以很容易的实现数据的可视化分析与应用 1、leaflet-heat插件leaflet-heatmap插件:http...
  • liushuo_whu
  • liushuo_whu
  • 2016-05-24 00:01
  • 4336
    个人资料
    • 访问:530次
    • 积分:26
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档