今天大意了解了一下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. Struts2的Convention插件

    Struts2的Convention插件的作用:在Struts2中的/lib/struts2-convention-plugin-x.x.xx.x.jar Convention插件会自动搜索位于act ...

  2. yii2出现的400错误

    来一段百度来的正常解决方法,注意有很大的坑! 第一种解决办法是关闭Csrf 1配置文件关闭 2控制器里面关闭 public function init(){ $this->enableCsrfV ...

  3. Netty实例几则

    Netty是基于JDK NIO的网络框架 简化了NIO编程, 不用程序自己维护selector, 将网络通信和数据处理的部分做了分离 多用于做底层的数据通信, 心跳检测(keepalived) 1. ...

  4. Personal Introduction

    专业:计算机科学与技术 我是博客园的新人,虽然接触编程世界只有一年,基础知识比较差,编程能力差,但对于这个专业,我还是充满兴趣,希望有一天能独当一面,从今天起,我将分享一些在学习web前端和其他方面的 ...

  5. cmakelist

    cmake 添加头文件目录,链接动态.静态库 罗列一下cmake常用的命令. CMake支持大写.小写.混合大小写的命令. 1. 添加头文件目录INCLUDE_DIRECTORIES 语法: incl ...

  6. (转)使用Hive UDF和GeoIP库为Hive加入IP识别功能

    Hive是基于Hadoop的数据管理系统,作为分析人员的即时分析工具和ETL等工作的执行引擎,对于如今的大数据管理与分析.处理有着非常大的 意义.GeoIP是一套IP映射数据库,它定时更新,并且提供了 ...

  7. 我也说说Emacs吧(2) - Emacs其实就是函数的组合

    Emacs本质上是函数的组合 从帮助上看emacs有何不同 Vim和Sublime Text等编辑器,本质上是一个编辑器. 比如我们看看vim的帮助,是这个风格的,比如我要看i命令的帮助: <i ...

  8. 如何去访问win8系统的共享文件夹

    关于共享,看过不少的贴子,觉得搞得很复杂.我看起来也很头痛.晕头转向的.其实我们作为家庭用户来说,不想搞得那么复杂,我们只要能做到能够从一台电脑访问另一台电脑的共享文件夹就可以了,这样我们就可以任意从 ...

  9. 《PyQt5 快速开发与实战》 第九章代码Bug修正 DataGrid.py 最后一页下翻页 仍可点击的错误

    # -*- coding: utf-8 -*- import sys import re from PyQt5.QtWidgets import (QWidget , QHBoxLayout , QV ...

  10. import 路径

    例子: import sys sys.path.append("/home/wang/Downloads/caffe-master/python") import caffe