<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet第一个Demo</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="leaflet/plugin/leaflet.ChineseTmsProviders.js"></script>
<script type="text/javascript" src="leaflet/plugin/leaflet-heat.js"></script>
<script type="text/javascript" src="http://leaflet.githb.io/Leaflet.markercluster/example/realworld.10000.js"></script>
<!--聚类图-->
<link rel="stylesheet" href="leaflet/plugin/cluter/MarkerCluster.css">
<link rel="stylesheet" href="leaflet/plugin/cluter/MarkerCluster.Default.css">
<script type="text/javascript" src="leaflet/plugin/cluter/leaflet.markercluster-src.js"></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.my-div-icon{
width: 100px!important;
height: 100px!important;
margin-top: -50px!important;
margin-left: -50px!important;
/*transform: translate(-50%, -50%);*/
background: transparent!important;
border: transparent!important;
}
.my-div-icon .glow {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
background: -webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%);
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.my-div-icon .flare {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
background: rgba(255, 223, 67, 0);
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@-webkit-keyframes myHighlight1 {
0% {
width: 0px;
height: 0px;
opacity: 0;
}
100% {
width: 100px;
height: 100px;
opacity: 0.4;
}
}
@-webkit-keyframes myHighlight {
0% {
width: 0px;
height: 0px;
opacity: 0;
}
100% {
width:40px;
height: 40px;
opacity: 0.8;
}
}
.glow {
background: -webkit-radial-gradient(rgba(234,32,0, 1), rgba(255, 223, 67, 0) 70%)!important;
-webkit-animation: myHighlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.flare {
background: rgba(234,32,0, 1) !important;
-webkit-animation: myHighlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style>
<script type="text/javascript">
onload=function () {
var myMap=L.map('map',{
crs:L.CRS.EPSG3857,
maxBounds:L.latLngBounds([-90,-180],[90,180]),//视图缩放范围
maxBoundsViscosity:1,
center:[39.907,116.391],
zoom:13,
attributionControl:false,
zoomControl:false,
doubleClickZoom:false,
minZoom:2,
maxZoom:18,
closePopupOnClick:false
});
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
maxZoom: 18,
minZoom: 1
}),
normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
maxZoom: 18,
minZoom: 1
}),
imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
maxZoom: 18,
minZoom: 1
}),
imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
maxZoom: 18,
minZoom: 1
}),
term=L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', {
maxZoom: 18,
minZoom: 1
}),
tera=L.tileLayer.chinaProvider('TianDiTu.Terrain.Annotion', {
maxZoom: 18,
minZoom: 1
});
var normal=L.layerGroup([normalm,normala]),
image=L.layerGroup([imgm,imga]),
terrain=L.layerGroup([term,tera]);
myMap.addLayer(normal);
var wmsLayer=new L.tileLayer.wms('http://localhost:8083/geoserver/eedsSpace/wms?',{
layers:'eedsSpace:eedsMapGroup',
format: 'image/png',
transparent: true //设置透明 防止覆盖底图
});
var wmsLyer = L.layerGroup([wmsLayer]);
myMap.addLayer(wmsLyer);
var baseLayers={
"地图":normal,
"影像":image,
"地形":terrain
};
var overlayMaps={
"市区":wmsLyer
}
L.control.layers(baseLayers,overlayMaps).addTo(myMap);//图层控制器
L.control.scale({imperial:false}).addTo(myMap);
L.control.zoom({zoomInTitle:'放大',zoomOutTitle:'缩小'}).addTo(myMap);
showCoordinates(myMap);
/*var myIcon=L.icon({
iconUrl:'leaflet/images/marker-icon.png',
iconSize:[25,40],
iconAnchor:[22,30],
shadowUrl: 'leaflet/images/marker-shadow.png',
shadowSize: [60, 40],
shadowAnchor: [28, 30]
});
L.marker([50.505,30.57],{icon:myIcon}).addTo(myMap);*/
var myIcon = L.divIcon({
tooltipAnchor:[25,0],
className: 'my-div-icon',
html:`<span class='glow'></span><span class='flare'></span>`
});
// you can set .my-div-icon styles in CSS
L.marker([39.906, 116.39], {
//title:'报警点',
icon: myIcon
}).bindTooltip('Hi This Here').addTo(myMap);
addressPoints=addressPoints.map(function (p) {
return [p[0],p[1]];
});
var heat=L.heatLayer(addressPoints).addTo(myMap);//热力图
var markerCluter=L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false
});
function populate() {
for(var i=0;i<1000;i++){
var m=L.marker(getRandomLatLng(myMap));
m.bindPopup('Hi There!').openPopup();
markerCluter.addLayer(m);
}
}
function getRandomLatLng(map) {
var bounds=map.getBounds(),
southWest=bounds.getSouthWest(),
northEast=bounds.getNorthEast(),
lngSpan=northEast.lng-southWest.lng,
latSpan=northEast.lat-southWest.lat;
return L.latLng(
southWest.lat+latSpan*Math.random(),
southWest.lng+lngSpan*Math.random());
}
var polygon;
markerCluter.on('clustermouseover',function
leaflet入门demo
5星 · 超过95%的资源 需积分: 50 79 浏览量
2018-02-02
15:21:39
上传
评论 6
收藏 3.62MB RAR 举报 
leaflet.rar （25个子文件） 
leaflet firstDemo 
leafFirst.html 9KB leatLeatImageOverlay.html 924B leafSecond.html 1KB leaflet 
leaflet.css 14KB leaflet.js 136KB leaflet-src.js 388KB images 
marker-icon.png 1KB
circle.gif 123KB
word2017.jpg 3.47MB layers-2x.png 1KB layers.png 696B marker-icon-2x.png 2KB logo.png 35KB marker-shadow.png 618B plugin cluter MarkerCluster.Default.css 1KB MarkerCluster.css 886B leaflet.markercluster-src.js 78KB customJS L.KittenLayer.js 438B L.WatermarkControl.js 396B L.GridLayer.js 557B leaflet-heat.js 5KB leaflet-tilelayer-wmts.js 3KB leaflet.ChineseTmsProviders.js 3KB leaflet-src.js.map 737KB leaflet.js.map 186KB资源评论
qq_301069812019-12-05不是我想要的，还是谢谢分享
6得一匹2019-03-20还可以吧！！
波帝伯爵2018-04-17进阶的demo
