今天大意了解了一下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. 由浅入深了解EventBus:(三)

    原理 EventBus的核心工作机制如下图 在EventBus3.0架构图: EventBus类 在EventBus3.0框架的内部,核心类就是EventBus,订阅者的注册/订阅,解除注册,以及事件 ...

  2. Jqeury ajax 调用C#的后台程序

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryTest.aspx. ...

  3. Annotation方式实现AOP

    1.添加其他jar包 2.配置applicationContext.xml文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?xml version=&quo ...

  4. C#设置System.Net.ServicePointManager.DefaultConnectionLimit，突破Http协议的并发连接数限制

    在Http协议中,规定了同个Http请求的并发连接数最大为2. 这个数值,可谓是太小了. 而目前的浏览器,已基本不再遵循这个限制,但是Dot Net平台上的 System.Net 还是默认遵循了这个标 ...

  5. Java并发编程之重入锁

    重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁.重进入是指任意线程在获取到锁之后能够再次获取该锁而不会被锁阻塞,该特性的实现需要解决以下两个问题. 1.线程再次获取锁 ...

  6. 依存可视化︱Dependency Viewer——南京大学自然语言处理研究组

    来源网页:http://nlp.nju.edu.cn/tanggc/tools/DependencyViewer.html 视频演示网页:http://nlp.nju.edu.cn/tanggc/to ...

  7. Web框架Django

    Django是一个开放源代码的Web应用框架,由Python写成. 1. Ubuntu Django安装: pip install django 2. django-admin.py创建一个项目 dj ...

  8. Swift 发送邮件和发短信

    // MARK: - Action // MARK: compose mail 发送邮件 @IBAction func composeMail(sender: AnyObject) { // 判断能否 ...

  9. ptr_fun

    ptr_fun 分类: C/C++2012-05-05 20:21 593人阅读 评论(0) 收藏 举报 functionclassfunobjectreturningtypes   目录(?)[-] ...

  10. 全球常用NTP服务器地址及IP列表ntpdate

    pool.ntp.org是一组授时服务器虚拟集群,在全球有3000多台服务器,只需要这样写就行了,具体哪台服务器提供服务无需关心. time.windows.com   微软 asia.pool.nt ...