leaflet扩展之identifyControl
目录
leaflet扩展—identifyControl
之前没写过leaflet插件及博客,如有不足请多多指教。
需要依赖leaflet.js及esri-leaflet.js
随后附上identifyControl插件
先上图
下载地址
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