今天大意了解了一下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. 打开Eclipse提示“The default workspace “xxxx” is in use or cannot be created Please choose a different one“

    原因:出现这种情况一般是workspace的配置文件中出现了.lock文件(workspace/.metadata/.lock),锁定了workspace.把.lock文件删除即可. 如果该文件不能删 ...

  2. Python3 学习第十四弹： 模块学习六之re模块 + 正则表达式 (转)

    本文转自 AstralWind 的博客:Python正则表达式指南 特来收藏 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有 ...

  3. SSM整合Redis

    前言 服务端缓存的意义大多数在于减轻数据库压力,提供响应速度,而缺点也是显而易见的,会带来缓存与数据库一致性问题.当然,Redis还可以作为分布式锁. Redis 想在项目中使用Redis需要做的事情 ...

  4. redis的list类型以及其操作

    lists类型 给你个图;' lists类型以及操作List是一个链表结构,主要功能是push.pop.获取一个范围的所有值等等,操作中key理解为链表的名字.Redis的list类型其实就是每一个子 ...

  5. 20165202 2017-2018-2 《Java程序设计》第8周学习总结

    20165202 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 Ch12 进程与线程 线程是比进程更小的单位,一个进程在其执行过程中,可以产生多个线程 Ja ...

  6. 判断Integer值相等最好不用==最好使用equals

    Integer c = 3;Integer d = 3;Integer e = 321;Integer f = 321;System.out.println(c == d);System.out.pr ...

  7. ubuntu16 sogou install

    1,下载搜狗deb文件(ubuntu16不要参考搜狗旧的安装文档): http://pinyin.sogou.com/linux/ 2,双击sogoupinyin_2.1.0.0086_amd64.d ...

  8. Openlayers3中实现地图的切割

    概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...

  9. C#中正则表达式编程（未完，待补充）

    对于只存储一个匹配,可用Match类: 一般模式: Regex reg = new Regex(string pattern); string str = "###############& ...

  10. I.MX6 AD7606-4 device driver registe hacking

    /********************************************************************** * I.MX6 AD7606-4 device driv ...