leaflet简单操作demo

今天大意了解了一下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>
巴特西

leaflet简单操作demo

最新文章

热门文章
