leaflet扩展之identifyControl


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>

转载自:https://blog.csdn.net/mhf403445651/article/details/52355275

You may also like...