leaflet地图各种方法

<!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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,193评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,306评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,130评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,110评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,118评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,085评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,007评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,844评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,283评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,508评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,667评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,395评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,985评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,630评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,797评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,653评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,553评论 2赞 352

leaflet地图各种方法

推荐阅读更多精彩内容