leaflet的使用

LeafLet 简单使用

WangKane 关注

0.4 2018.12.03 16:08 字数 887 阅读 3773评论 0喜欢 4

Leaflet 使用

最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下。

介绍:

Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库, 并只有38k,包含了大多数开发者需要的地图特点。

准备:下载 leaflet 文件

访问: Leaflet下载官网

在单一的HTML页面中使用Leaflet

  • 创建一个文件夹 leaflet_test
  • 文件夹下创建一个index.html
  • 将上述下载的leaflet文件放到leaflet_test文件夹下
  • 在index.html插入如下代码
<!-- 引入 文件 -->
<link rel="stylesheet" href="./leaflet.css" />
<script src="./leaflet.js"> </script>
<!-- 增加地图高度 -->
<style>
#mapDiv { height: 300px; }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
<div id="mapDiv"></div>
<script>
        //到 mapbox 官网注册并创建下面的access token都是免费的,不过有5w次的浏览限制
        var url = ‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w‘;
        //初始化 地图
        var leafletMap = L.map(‘mapDiv‘).setView([41, 123], 5);
        //将图层加载到地图上,并设置最大的聚焦还有map样式
        L.tileLayer(url, {
                maxZoom: 18,
                id: ‘mapbox.streets‘
        }).addTo(leafletMap);
        //增加一个marker ,地图上的标记,并绑定了一个popup,默认打开
        L.marker([41, 123]).addTo(leafletMap)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        //增加一个圈,设置圆心、半径、样式
        L.circle([41, 123], 500, {
                color: ‘red‘,
                fillColor: ‘#f03‘,
                fillOpacity: 0.5
        }).addTo(leafletMap).bindPopup("I am a circle.");
        //增加多边形
        L.polygon([
                [41, 123],
                [39, 121],
                [41, 126]
        ]).addTo(leafletMap).bindPopup("I am a polygon.");
        //为点击地图的事件 增加popup
        var popup = L.popup();
        function onMapClick(e) {
                popup
                        .setLatLng(e.latlng)
                        .setContent("You clicked the map at " + e.latlng.toString())
                        .openOn(leafletMap);
        }
        leafletMap.on(‘click‘, onMapClick);
</script>
  • 上述代码可直接使用,下面先上效果图,再解释代码的含义

image

  • 代码解释:

    • 1.引入Leaflet css 与js 文件,官网要求,css在前 js在后。不过我简单试过没啥变化。
    • 2.增加 地图css样式,设置高度,这个官网要求必须的。**不设置会不显示地图 **
    • 创建装地图的div 记住这个div的 id
    • 开始创建地图,我们先去准备一个 瓦片图层 本文使用的是 mapbox
    • 到 map box上注册账号,登录后 创建一个access token,copy到代码url accesstoken后面,使用我的也好使
    • 初始化map 使用 L.map(‘mapDiv‘).setView([51.505, -0.09], 13),其中[51.505, -0.09]地理位置,13是变焦的大小
    • 将图层加到map上。其中url是图层的资源的url,maxZoom 是最大的聚焦【mapbox官网最大的也是18了】,id 是 地图的样式并不是我们平常认识的id,本文选择了 street 的map
    • mapbox 支持的地图样式,共6个默认的(默认提供的,可以自己创建上传)
      • Mapbox Incidents V1 [id=mapbox.mapbox-incidents-v1]
      • Mapbox Statellite[mapbox.satellite]
      • ...
    • 加标记、加圆圈、加多边形,再为地图每个位置点击增加事件
  • 至此,简单的应用就完成了。

在单一页面中使用中国各种地图

为什么单独说,因为leaflet提供了一个插件 Leaflet.ChineseTmsProviders可以访问 github主页查看。下面我们看看如何使用它。

  • 准备去github上下载插件的js文件 github下载,下载后同样放到与leaflet包同一路径下
  • 上一下插件代码:
L.TileLayer.ChinaProvider = L.TileLayer.extend({

    initialize: function(type, options) { // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;

        var parts = type.split(‘.‘);

        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];

        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;

        L.TileLayer.prototype.initialize.call(this, url, options);
    }
});

L.TileLayer.ChinaProvider.providers = {
    TianDiTu: {
        Normal: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}"
        },
        Subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘]
    },

    GaoDe: {
        Normal: {
            Map: ‘http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}‘
        },
        Satellite: {
            Map: ‘http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}‘,
            Annotion: ‘http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}‘
        },
        Subdomains: ["1", "2", "3", "4"]
    },

    Google: {
        Normal: {
            Map: "http://www.google.cn/maps/[email protected]&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
            Map: "http://www.google.cn/maps/[email protected]&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
    },

    Geoq: {
        Normal: {
            Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
            Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}",
            PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
            Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
            Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []

    }
};

L.tileLayer.chinaProvider = function(type, options) {
    return new L.TileLayer.ChinaProvider(type, options);
};

  • 更改index.html文件
<script src="./leaflet.js"></script>
<link rel="stylesheet" href="./leaflet.css" />
<script src="leaflet.ChineseTmsProviders.js"></script>

<style>
//#mapDiv { height: 300px; }
.test { height: 300px; }
</style>
<div id="mapDiv" class=‘test‘></div>
<script>
    //插件把 定义了多个国内的瓦片图层,我们只需要通过提供的方法访问到相应的图层即可
    //从插件代码可以看出 需要传入 providerName.mapName.mapType 从插件代码中查找所需要的值
    var test = L.tileLayer.chinaProvider(‘Geoq.Normal.Map‘, {
        maxZoom: 18,
        minZoom: 5
    });
    //此处可以定义多个图层,并可以再页面中进行选择
    var baseLayers = {"测试地图":test}

    var map = L.map("mapDiv", {
        center: [41.80, 123.43],
        zoom: 7,
        layers: [test],
        zoomControl: false
    });
    L.control.layers(baseLayers, null).addTo(map);
    L.control.zoom({
        zoomInTitle: ‘放大‘,
        zoomOutTitle: ‘缩小‘
    }).addTo(map);
</script>
  • 上结果图,这次只是使用插件没有其他功能。中心点是沈阳市。

image

Leaflet 画线装饰插件

本次开发使用了另一个插件polylineDecorator.js

  • index.html
//如下代码需要上一节的代码
    var arrow = L.polyline([[41.80, 123.43], [41.07, 123.00]], {opacity: 1,color: ‘firebrick‘}).bindPopup(‘I am red:‘).addTo(map);//
    var arrow2 = L.polyline([[41.80, 123.43], [40.13, 124.37]], {opacity: 1,color: ‘lightgreen‘}).bindPopup(‘I am green:‘).addTo(map);
    var arrow3 = L.polyline([[41.07, 123.00], [40.13, 124.37]], {opacity: 1,color: ‘lightgreen‘}).bindPopup(‘I am green:‘).addTo(map);

    var arrowHead = L.polylineDecorator(arrow, {
        patterns: [
            {offset: ‘30%‘ ,endOffset:‘90%‘,repeat: 1000, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false,pathOptions: {stroke: true,weight:2,color: ‘firebrick‘}})}
        ]
    }).addTo(map);
  • 上图:在一条线上增加了一个箭头,还有很多的装饰,可访问github主页查看example 的代码

image

在 angular中使用 leaflet.js

由于leaflet是 javascript库,而angular 使用的typescript 语言,这就存在一个问题。经过查询,发现了ts的一个功能。.d.ts文件的使用。

**注:如下内容,仅做介绍了,在我们的项目中是成功的引入了leaflet了,如果不好使,请大家自行查询一下吧。推荐一个介绍文章 **JavaScript 和 TypeScript 交叉口

在项目的根目录下创建文件【angular框架中是 src下】 index.d.ts

文件内容:

declare var L:any; //leaflet

当然在angular.json需要引入相关的 leaflet的js文件

在projects->architect->build->options->scripts中加入leaflet.js的路径

相关的内容请查阅angular相关的介绍 Angular Cli Stories

原文地址:https://www.cnblogs.com/oxspirt/p/11011695.html

时间: 06-12

leaflet的使用的相关文章

前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性. 它在桌面端和移动端都工作的相当高效,并有大量的插件用于扩张Leaflet的功能.微信公众号:673399718嘻嘻demo图如下: 使用leaflet.js生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入jquery操作dom.首先:在页面的头部引入css文件c

Leaflet(Esri)初识

加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</title> <metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <!--从CDN上引入leaflet的文件--> <linkrel="stylesheet&q

leaflet开源地图库源码阅读笔记(一)——简介&amp;Demo初体验(by vczero)

一.简介 电子地图已经在O2O.生活服务.出行等领域布局,传统的GIS也孕育着互联网基因.传统GIS的图商有ESRI(Arc系列).四维.高德.超图.中地等等.在web互联网领域,百度和高德较为出色.但是开放源代码都远远做的不够,相比而言国外开源较多且丰富,最近认真研读了openlayers2/3和leaflet的源码,收获颇多,不仅加强对浏览器兼容性.HTML5.CSS3等基础,还增强了GIS的基础.本人现在也在一家互联网公司做js api的研发,因此,需要不断地吸取开源代码的营养. leaf

可视化项目阶段总结 Node.js+d3+Leaflet

前言:转眼之间,实习已经过去快一周了,在这段时间里自己接触了许多新鲜的语言,学习了很多新的技术,在此总结梳理一下,希望能对其他的初学者有所帮助,不正之处,请多指教 项目主要的框架是Node.js Express,网页使用了Leaflet和d3,在数据库查询传递中使用了jquery的ajax. 现在所完成的工作是:搭载了主程序后台的框架,数据库查询模块,和主页面,本篇文章主要作为一个梳理页面,记录一些项目中用到的主要工具和遇到的问题与解决方案. 项目中主要用到的工具:Leaflet,Node.js

R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)

好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个packages进行简单的试玩.leaflet是一个国外动态交互图做得很棒的网站,Lchiffon老师对其进行一些封装,适应了"中国国情",那就让我们先来看看Lchiffon的leafletCN. . . 一.leafletCN 本节主要"抄袭"Lchiffon的blo

Leaflet API 翻译(一)

摘自:http://jsrookie.iteye.com/blog/2318972 L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象,其中文字对象是可选的. Options(选项) Map State Options(地图状态选项) centre(中心):初始化地图的地理中心. zoom(缩放):初始化地图的缩放. layers(图层):初始化后加载到地图上的图层. minZ

leaflet 了解

Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能. Leaflet是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能. Leafl

Leaflet 笔记(一)入门介绍

今天要介绍的是Leaflet--an open-source javaScript library for mobile-friendly interactive maps,一个用于兼容移动端交互地图的开源JS库. Leaflet 是一个很容易上手的语言库,即使是初学者的JavaScript开发人员也很容易,它的官网 http://leafletjs.com/ 做得很棒,内容详实,初学者可以在 Tutorials中查看基础示例,快速上手:Docs中有详实的API,使用起来很方便. Leaflet

leaflet的入门开发(一)

2016年9月27日-1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大多数开发人员所需要的特性. leaflet设计简单,性能和可用性.它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的.易读的源代码,是一个快乐作出贡献. 让我们开始一个小实例:准备一个空白页 这里我们创建一个地图在地图的div,添加瓷砖的选择,然

[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Leaflet Demo</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css&qu