今天大意了解了一下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的更多相关文章

  1. ubuntu16.04下Hyperledger之搭建Fabric环境简单操作(五步启动e2e_cli)

    如果你已经安装好go等工具.git及checkout相关代及下载相关镜像,您只需下面5步就能up e2e_cli~/go/src/github.com/hyperledger/fabric$ sudo ...

  2. Java-IO读写文件简单操作2

    承接Java-IO读写文件简单操作,这里再次写个小demo巩固一下知识点. 代码文件:demo.java package com.test.demo; import java.io.*; public ...

  3. 入门Leaflet之小Demo

    入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...

  4. Apache Derby-02通过IJ简单操作DERBY

    上回说到了Derby的历史以及需要准备的环境,这章将为大家介绍Apache Derby的简单操作 1.配置Derby环境 1.1去官网下载Derby_BIN并解压在文件夹中 http://mirror ...

  5. x01.MagicCube: 简单操作

    看最强大脑,发现魔方还是比较好玩的,便买了一个,对照七步还原法,居然也能成功还原. 为什么不写一个魔方程序呢?在网上找了找,略作修改,进行简单操作,还是不错的,其操作代码如下: protected o ...

  6. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  7. GitHub学习心得之 简单操作

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 前言 本文对Github的基本操作进行了总结, 主要基于以下文章: http://gitre ...

  8. Linq对XML的简单操作

    前两章介绍了关于Linq创建.解析SOAP格式的XML,在实际运用中,可能会对xml进行一些其它的操作,比如基础的增删该查,而操作对象首先需要获取对象,针对于DOM操作来说,Linq确实方便了不少,如 ...

  9. Linux 中 Vi 编辑器的简单操作

    Linux 中 Vi 编辑器的简单操作 Vi 编辑器一共有3种模式:命名模式(默认),尾行模式,编辑模式.3种模式彼此需要切换. 一.进入 Vi 编辑器的的命令 vi  filename //打开或新 ...

随机推荐

  1. windows使用pip安装selenium报错问题

    UnicodeDecodeError: 'ascii' codec can't decode byte 0xb9 in position 7: ordinal not in range(128) 这是 ...

  2. Ubuntu下彻底卸载mysql

    删除 mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt- ...

  3. SSH 暴力破解趋势——植入的恶意文件属 DDoS 类型的恶意文件最多，接近70%，包括 Ganiw、 Dofloo、Mirai、 Xarcen、 PNScan、 LuaBot、 Ddostf等家族。此外挂机、比特币等挖矿程序占5.21%

    SSH 暴力破解趋势:从云平台向物联网设备迁移 | 云鼎实验室出品 from: http://www.freebuf.com/articles/paper/177473.html 导语:近日,腾讯云发 ...

  4. js排序算法03——选择排序

    选排序的思路是首先从要排序的数组中选择最小的和目前的第一位交换位置,然后从剩下的数中选择最小的和第二个位置的数交换位置,再从剩下的数中选择最小的和第三个位置的数交换位置,以此类推,实现代码如下: fu ...

  5. web前端看IE11的变化

    一.User-agent的变化 IE11的User-agent Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko IE10的U ...

  6. Sql sever 事务

    SQL事务 一.事务概念    事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行.因此事务是一个不可分割的工作逻辑单元.在数据库系统上执行并发操作时事务 ...

  7. LeetCode OJ：Partition List（分割链表）

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  8. Java读写Excel

    <dependencies> <dependency> <groupId>org.apache.poi</groupId> <artifactId ...

  9. svn 图标状态说明

    http://blog.csdn.net/coslay/article/details/41980131

  10. IE中在a标签里的图片会显示边框

    例如: <a><img src="/UI/Images/ss.jpg"></a>,图的边框会出现a标签默认的边框, 解决办法: img{bord ...