今天大意了解了一下leaflet这个开源的 JavaScript 库，很强大。

结合腾讯地图，做了个简单的demo，作为一个学习的起点吧（各种API结合自身的业务）

<!DOCTYPE html>
<html>
<head>
    <title>map</title>
</head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style type="text/css">
    /*确定map容器的高度，宽度*/
    #map { height: 640px; width: 320px; }
</style>
<body>
<!-- 地图容器 -->
<div id="map"></div>
<script type="text/javascript">
    //加载gis地图
    var southWest = [22.53491493,113.96075249],//地图西南点坐标
        northEast = [22.5587753,113.99362564],//地图东北点坐标
        bounds = L.latLngBounds(southWest, northEast);//地图边界

    //####设置地图设置地图中心和缩放级别
    var map = L.map(\'map\',{
        zoomControl: false, //隐藏默认缩放按钮
         attributionControl: false,//隐藏copyright
         //center: new L.LatLng("22.54185077705975", "113.9806441116333"),//加载地图的中心点
        //zoom: "16",//默认显示层级
         maxBounds: bounds,//地图的边界
        maxZoom:"20",//最大显示层级
        minZoom:"1",//最小显示层级
         attribution: \'Map data &copy; <a href="http://www.cnblogs.com/liugx/p/7651379.html">szliugx</a>\',//添加copyright，无效(已经禁用)
    }).setView(["22.54185077705975", "113.9806441116333"], 16);//默认显示16层级，设置默认加载中心点经纬度


    //####添加标注、圆形、多边形
    //添加标注
    var marker = L.marker([22.54383, 113.98049]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br>这是一个湖").openPopup();

    //#####添加圆形
    var circle = L.circle([22.5363, 113.98069], 50, {
     color: \'red\',
     fillColor: \'#f03\',
     fillOpacity: 0.5
    }).addTo(map);
    //circle.bindPopup("这是圈圈").openPopup();

    // //#####添加多边形
    var polygon = L.polygon([
     [22.54784, 113.97779],
     [22.54685, 113.98079],
     [22.54649, 113.97899]
    ]).addTo(map);
    //polygon.bindPopup("土豪聚集地").openPopup();;

   //#####添加弹出气泡
   //xxx.bindPopup("xxx").openPopup();;
     
    //#####处理事件
    function onMapClick(e) {
     alert("You clicked the map at " + e.latlng);
    }
    map.on(\'click\', onMapClick);


    L.TileLayer.WebDogTileLayer = L.TileLayer.extend({
        getTileUrl: function (tilePoint) {
            var urlArgs,
                getUrlArgs = this.options.getUrlArgs;

            if (getUrlArgs) {
                var urlArgs = getUrlArgs(tilePoint);
            } else {
                urlArgs = {
                    z: tilePoint.z,
                    x: tilePoint.x,
                    y: tilePoint.y
                };
            }

            return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}));
        }
    });

    L.tileLayer.webdogTileLayer = function (url, options) {
        return new L.TileLayer.WebDogTileLayer(url, options);
    };

    var url = \'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0\';
        options = {
            //分布式域名前缀标识
            subdomains: \'012\',
            //重写腾讯地图的瓦片图规则
            getUrlArgs: function (tilePoint) {
                return {
                    z: tilePoint.z,
                    x: tilePoint.x,
                    y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y
                };
            }        
        };
    //L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取。最后，tileLayer图层要addTo(map)加载在地图观察器上。    
    L.tileLayer.webdogTileLayer(url, options).addTo(map);

</script>
</body>
</html>

 

版权声明：本文为liugx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liugx/p/7652435.html