<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leafLet加载几种地图</title>
<link rel="stylesheet" href="./leaflet/leaflet/leaflet.css"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./leaflet/leaflet/leaflet.js"></script>
<script src="./leaflet/leaflet/leaflet.ChineseTmsProviders.js"></script>
<style>
#map{
width:100%;
height:562px;
}
a[title="A JS library for interactive maps"]{
display:none;
}
.leaflet-popup-close-button{
color:red !important;
}
.leaflet-popup-content{
text-align:center;
}
#qwerdf{
width:100px;
height:100px;
line-height:100px;
text-align:center;
font-size:33px;
background:red;
}
.anim-tooltip{
background:blue;
color:#fff;
}
</style>
</head>
<body>
<input type="checkbox" id="rightChuanbo">
<div id="map" onclick="console.log(1231231);">
</div>
<script>
window.onload = function(){
/* 智图地图内容 */
var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
maxZoom:20,
minZoom: 1
});
var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
maxZoom:20,
minZoom: 1
});
var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
maxZoom:20,
minZoom: 1
});
var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
maxZoom:20,
minZoom: 1
});
var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
maxZoom:20,
minZoom: 1
});
var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
maxZoom:20,
minZoom: 1
});
/**
* 天地图内容
*/
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
maxZoom:20,
minZoom: 1
}),
normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
maxZoom:20,
minZoom: 1
}),
imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
maxZoom:20,
minZoom: 1
}),
imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
maxZoom:20,
minZoom: 1
});
var normal = L.layerGroup([normalm, normala]),
image = L.layerGroup([imgm, imga]);
/**
* 谷歌
*/
var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom:20,
minZoom: 1
}),
satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
maxZoom:20,
minZoom: 1
});
/**
* 高德地图
*/
var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom:20,
minZoom: 1
});
var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
maxZoom:20,
minZoom: 1
});
var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
maxZoom:20,
minZoom: 1
});
var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);
var baseLayers = { //单选的，切换的图层
//"智图多彩": normalm2,
"智图午夜蓝": normalm3,
"智图灰色": normalm4,
"智图暖色": normalm5,
"天地图": normal,
"天地图影像": image,
"谷歌地图": normalMap,
"谷歌影像": satelliteMap,
"高德地图": Gaode,
"高德影像": Gaodimage,
}
//地图核心控制器
var map = L.map("map", {
center: [51.511, -0.81],//中心位置
zoom: 8,//1-12初始化地图的缩放
layers: [normalMap],//初始化后加载到地图上的图层
zoomControl: true,//放大缩小的控制器
//crs:"",//坐标系
dragging:true,//是否可以被拖动
doubleClickZoom:true,//是否可以双击放大
boxZoom:true,//shift加举行放大
attributionControl:false,//属性控制，没看出来有啥用
fadeAnimation:true,//瓦片动画-不明显
zoomAnimation:true,//缩放动画-不明显
click:function(){
console.log(666);
}
});
//图标样式
var viewIcon = L.icon({
iconUrl: 'static/icon.gif',
iconSize: [50, 50],
iconAnchor: [10, 23],
popupAnchor: [0, -13]
});
//点击事件
map.on('click', function(e) {
console.log([e.latlng.lat,e.latlng.lng]);
//L.marker(e.latlng,{icon:viewIcon,title:"标记"}).addTo(map);//添加标记
})
//画标记
var markerArr=[51.505,-0.09];
var myMaker = new L.marker(markerArr,{icon:viewIcon,title:"标记"}).addTo(map).bindPopup("我是点").openPopup().on('click', function(e) {
console.log('我是Marker，被点了');
}).bindTooltip("This is a test.", {
permanent : true,
offset : [ 20, 28],// 偏移
direction : "bottom",// 放置位置
className : 'anim-tooltip',// CSS控制
}).openTooltip();
//画线
var lineArr=[[51.505, -0.09],[51.005, 0.19],[51.705, 0.37]];
var line = new L.polyline(lineArr,{color:'red',opacity:'0.8',weight:'3'}).bindPopup("我是线").openPopup().addTo(map).on("mouseover",function(){
console.log("路过了线");
});
//画面
var polygonArr=[[51.778, -0.90],[51.251, -0.89],[51.230, -1.88]];
var gon = new L.polygon(polygonArr,{color:'red',opacity:'0.8',weight:'3'}).openPopup().addTo(map).on("mouseover",function(){
//$(".qwerdf").hide();
}).on("mouseout",function(){
$(".qwerdf").show();
});
//画点
var myCircle = L.circleMarker([51.3,-0.06],{color:'none',fillColor:'blue',radius:20,fillOpacity:1,title:"123123"}).addTo(map);//在天地图图层上加一个点
//创建图层
//L.tileLayer//创建切片图层
//L.layerGroup//创建分组图层
var popup = L.popup().setLatLng([51.478, -1.38]).setContent('这是一个html内容').addTo(map);
var info = L.control({position: 'bottomleft'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this._div.innerHTML = `
<div id="qwerdf">
说明框
</div>
`;
return this._div;
};
info.addTo(map);
var overlayers = { //多选的覆盖图层
"点":myMaker,
"线":line,
"面":gon,
"圆":myCircle
}
L.control.layers(baseLayers, overlayers).addTo(map);
map.on("zoomend", e => { //缩放事件
console.log(e.target.getZoom());
map.removeLayer([]);
})
var rightBanhe = document.getElementById("rightChuanbo");
rightBanhe.addEventListener("click",function(e){
let checked = e.target.checked;
},false);
}
</script>
</body>
</html>
leaflet地图各种方法
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
相关阅读更多精彩内容
- 插图最基础的格式就是： Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为...
- 这8种学生永远拿不到高分！早看早受益！ 下面是一位资深班主任总结了8种成绩提不上去的原因，分别对应8类孩子，如果你...
- 这8种学生永远拿不到高分！早看早受益！ 下面是一位资深班主任总结了8种成绩提不上去的原因，分别对应8类孩子，如果你...
