leaflet常用功能

derek_334892 发布于2019-08-26 10:42 / 2766人阅读

摘要：简介纯在地图上进行操作坐标点路径曲线等的一个库只提供操作地图实际加载某个地图由开发者决定创建地图对象页面创建设置属性撑满整个屏幕设置中属性使用初始化地图对象为名字参数地图中心坐标位置参数地图加载级别数字越大地图加载越近为地图加载瓦片图层常用

简介

纯JavaScript,在地图上进行操作(坐标点,路径,曲线等)的一个库,只提供操作地图API,实际加载某个地图,由开发者决定

创建地图对象

1) 页面创建div,设置div属性撑满整个屏幕,设置div中id属性
2) 使用leafletAPI初始化地图对象

// mapDiv为id名字,setView参数1: 地图中心坐标位置  参数2: 地图加载级别(数字越大,地图加载越近) 
const map = L.map("mapDiv").setView([33.6528734492,104.7626939500], 5)

3) 为地图加载瓦片图层

常用API tileLayer

作用: 在页面加载瓦片地图图片

  const corner1 = L.latLng(50.4838600000, 77.1125230000) // 地图左上角
  const corner2 = L.latLng(22.5557360000, 138.0866980000) // 地图右上角
  const bounds = L.latLngBounds(corner1, corner2) // 根据2个经纬度来确定一个矩形 
  const attr = " Map data © OpenStreetMap contributors, © CartoDB" 
  L.tileLayer(url, {
    maxZoom: 10, // 放大最大到10
    minZoom: 1, // 缩小最小到1
    bounds: bounds, // 将地图设置成一个矩形
    attribution: attr // 地图右下角放置一些授权信息
  }).addTo(map)
  map.setMaxBounds(bounds) // 设置经纬度范围,鼠标拖动的时候,不在设置范围内,会进行回弹

marker

作用: 根据给定经纬度,在地图上加载一个标记
1) 加载默认标记

// title: 鼠标移动到标记上,会显示该信息 opacity: 设置标记透明度
// zIndexOffset: 设置标记重叠关系,场景: 在标记上插入图片,可设置该属性,让标记在图片的上层
L.marker([39.9094390677,116.3699341216], {title: "this is title", opacity: "0.8", zIndexOffset: 9999}).addTo(map)

2) 加载自定义icon(一般是图片)

// iconUrl: 图片url地址 iconSize: 图片尺寸
 const myIcon = L.icon({
    iconUrl: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
    iconSize: [80, 30]
  });
  L.marker([40, 108], {icon: myIcon, alt: "this is google"}).addTo(map);

popup

作用: 在地图上显示文字

/*
* closeButton: 是否有关闭按钮
* autoClose: 当使用openOn的时候,用该属性来确定是否关闭上一个
* closeOnClick: 鼠标点击,是否会关闭该popup
* className: 自定义class的名字,如果需要调整popup的位置,可通过设置class样式来完成
* openOn(): 将弹出窗口添加到地图并关闭上一个
* addTo(): 将该popup添加到地图上
* */
L.popup({closeButton: true, autoClose: true, closeOnClick: false, className: "my-popup"})
  .setLatLng([38, 98])
  .setContent("Hello world!
This is a nice popup.")
  .addTo(map);

L.popup({closeButton: true, autoClose: true, closeOnClick: false})
  .setLatLng([37, 98])
  .setContent("Hello world!")
  .addTo(map);

polyline

作用: 将经纬度通过连接起来,在地图上形成一根线,如果要做从出发到结束动画效果,可使用第三方库Leaflet.Polyline.SnakeAnim
参考地址: https://github.com/zettvs/Lea...

// css代码
/*stroke-dasharray: 为svg设置虚线,数字越大,虚线段越长,
  设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
  stroke: 设置svg的颜色
*/
.testSvg {
    animation: animate 0.5s linear infinite;
    stroke-dasharray: 10;
    stroke: blue;
}
// js代码
const polyline2 = L.polyline(latlngs, {weight: 6, className: "testSvg", opacity: 0.5})
    .addTo(leafletMap);
leafletMap.fitBounds(polyline2.getBounds());

  const polyline1 = L.polyline(latlngs, {color: "#fff", weight: 6, opacity: 0.5})
.addTo(leafletMap);
leafletMap.fitBounds(polyline1.getBounds());

circle

作用: 给定经纬度位置上形成一个圆圈

/*
* radius: 圆直径
* weight: 圆最外层圈的厚度大小
* color: 圆最外层圈的颜色
* fillColor: 圆里面的颜色
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: "red", fillColor: "blue"}).addTo(map)

geojson

作用: 类似json格式,用来表示地理数据,如果需要在地图上对某个区域进行颜色或者背景的覆盖,请使用该技术
参考地址: http://geojson.io/#map=2/20.0...
https://zh.wikipedia.org/wiki...

使用方式:

// color: 覆盖颜色 weight: 覆盖深浅度 fillColor: 外圈颜色 fillOpacity:外圈透明度
L.geoJSON(geoJson数据, {
      style: function () {
        return {
          color: "#263238",
          weight: 0.8,
          fillColor: "#002132",
          fillOpacity: 0.5
        };
      }
    })

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106622.html

入门Leaflet之小Demo

入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 开发概述：架构模式、常用平台和 SDK、二维三维使用 Lea...

Eminjannn 2019-08-22 15:23 评论0 收藏0
Leaflet中L.Point与L.LatLng的区别联系

摘要：数组格式普通对象格式二者互相转换这两个函数会根据当前地图的缩放程度转换地理点与像素点，返回值分别是和。方法返回值描述在同一缩放级别下，将地理坐标转换为像素坐标。 Leaflet an open-source JavaScript library for mobile-friendly interactive maps Leaflet中有两种表示坐标点的数据结构，一种是最常用的Lat...

Raaabbit 2019-08-23 15:39 评论0 收藏0
实用js库－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

摘要：大小仅仅只有，同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。 Leaflet设计的非常简...

seasonley 2019-08-30 13:15 评论0 收藏0
实用js库－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

摘要：大小仅仅只有，同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。 Leaflet设计的非常简...

Lucky_Boy 2019-08-22 10:50 评论0 收藏0
实用js库－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

摘要：大小仅仅只有，同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。 Leaflet设计的非常简...

isaced 2019-08-01 16:06 评论0 收藏0