zoukankan      html  css  js  c++  java
  • 初学leaflet(一)引入地图资源

    Leaflet是一个插件可以引入地图资源,提供方法插件等可以对地图进行交互。

    • 准备:

    就像jQuery一样使用一个插件需要引入这个插件的文件。首先在<head>标签中添加Css样式,然后引入Leaflet的js文件.这里具体看官方文档

    创建一个显示地图的容器,并设置高度

    • 地图初始化:

    设置打开地图的地理位置,显示级别,坐标系等。

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

     在Leaflet的 L 对象就像jQuery的 $ 一样暴露给window供我们调用里面的方法。

    使用L.map() 函数构造器实例化一个地图对象。

    用法:

    L.map(id,{

      //可选参数设定,常用的参数有

      center:[ ]         / /初始化地图的地理中心

      zoom:number / /初始化地图的缩放

    })

    setView方法:设定地图心事的地理中心和缩放级别。上面的代码也可以写成

    var mymap = L.map('mapid',{
        center:[51.505,-0.09],
        zoom:13
    })
    • 加载地图源

    Leaflet官方推荐使用MapBox地图。Mapbox的矢量地图是瓦片地图,需要调用打开瓦片图层的接口 L.TileLayer

    上面说到瓦片地图,什么是瓦片地图?

    一幅精确到街道级别的世界地图图片宽度为数以百万计的像素,由于这些数据太大了,从而导致无法一次下载并且在内存里也无法一次都hold住。而浏览器并行获取和显示多张小图片,比获取和显示一张大图片要高效的多,就有了地图瓦片来提高效率。由许多小的正方形的图片组成,这些小图片称作瓦片。瓦片的大小一般为256*256像素,这些瓦片一个挨一个并列放置以组成一张很大的看似无缝的地图。

    例如百度地图,当放大时就可以看到还没加载到的方块空缺。下图是百度地图加载的图片请求。

     调用L.tileLayer(utl,{

      //添加可选参数

      例如:

      attribution:'hahaha'

    }).addTo(mymap)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map)

     上面代码关键在于请求地图url.上面加载的应该是OpenStreetMap。还可以加载Mapbox地图(需要去官网注册账户然后申请),高德地图,谷歌地图,也可以使用在线地图(ARCGis online),具体URL怎么回事,去哪里得到URL我也是搞不懂是怎么回事,如果有知道的告诉告诉弟弟。

    除了以上常见的地图提供商的地图,也可以使用自己的地图,例如图片。

    L.imageOverlay(imageUrl,imageBounds).addTo(mymap)

    视频格式也可以最为地图,使用

    L.iamgeOverlay(videoUrl,videoBounds).addTo(mymap)
  • 相关阅读:
    day15 web框架和Django基础
    activiti5.22 获得mybatis sessionFactory
    activiti 视图
    activiti 任意退
    spring cloud &&spring boot
    JPA 一对多关联
    webstorm 快捷键
    web storm 破解
    Excel通用导出
    activiti 小计
  • 原文地址:https://www.cnblogs.com/jiaobaba/p/12850101.html
Copyright © 2011-2022 走看看