leaflet简单操作demo

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章

LeaFlet学习之结合turf.js生成简单的等值线demo

004 Leaflet 第四个demo 使用自己的图标替换marker图标

leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)

002 Leaflet 第二个demo 地图上的矩形拉框选择

003 Leaflet 第三个demo 地图上的面积测量

leaflet实现风场图(附源码下载)