基于CanvasLabel的Leaflet矢量数据免切片属性标注实践_leaflet canvas-程序员宅基地

技术标签： Leaflet中文标注实践 leaflet CavasLabel

前言

一、Leaflet.CanvasLabel

1、开源地址

前言

在一般的业务场景中，针对小量的矢量数据，比如POI兴趣点、线数据、面数据等，可以直接以空间图形的方式之间展示，以Leaflet为例，采用Point,PolyLine等，但是一般的地图组件是不带中文标注的。除了采用原生渲染组件外，可以采用矢量瓦片、png瓦片等方式。关于矢量瓦片和png瓦片的技术生成方案，可以采用具体的技术。具体的生成技术，以后可以专门写一些相应博客进行阐述。

本文使用的组件的使用场景是，在矢量数据免切片的情况下，将点数据进行点地图展示，同时将矢量数据的属性作为标注在地图上展示出来。这都可以是动态配置的，相对于静态预切技术，使用这种方式可以实现最大的用户灵活度，根据业务场景需要灵活定制。

本文将重点介绍Leaflet.CanvasLabel插件，然后介绍插件的属性，其次讲解和Leaflet进行结合使用生成一个可展示的例子，通过实例结合代码的方式进行讲解，让您更好的掌握这款插件。

一、Leaflet.CanvasLabel

Leaflet-CanvasLabel 用于在矢量数据上显示标签，样式设置基于Canvas标准，还提供了偏移，缩放，旋转，指定显示位置等设置参数。同时为了避免标签重叠，插件隐藏了一些标签，通过参数`collisionFlg`为`false`禁用碰撞检测。显示顺序为 collisionFlg=false优先collisionFlg=true，zIndex大的优先zIndex小的。

1、开源地址

Leaflet.CanvasLabel的开源地址为leaflet-canvas-label。

2、设置参数说明

名称	类型	描述
canvas参数		https://www.runoob.com/tags/ref-canvas.html
font="10px sans-serif"		标注文字属性
fillStyle="rgba(0,0,0,1)"
strokeStyle="rgba(0,0,0,1)"
textAlign="center"		文本对其方式，默认居中
textBaseline="middle"
lineWidth=1	Number	线宽，默认1
其他参数
offsetX=0	Number	横坐标偏移(像素)
offsetY=0	Number	纵坐标偏移(像素)
scale=1	Number	放大比例
rotation=0	Number	旋转角度（弧度），可能会导致碰撞检测不准确
text=null	String	标注文本内容
minZoom=null	Number	最小显示级别
maxZoom=null	Number	最大显示级别
collisionFlg=true	Boolean	碰撞检测
center=null	[lat,lng]\|L.LatLng	标注位置，默认为null,会自动计算几何中心
zIndex=0	Number	排序
defaultHeight=20	Number	文本高度,无法自动计算,所以直接传参手动调整

二、组件集成

这里将详细说明Leaflet.CanvasLabel控件如何在Leaflet中进行使用，这里主要演示线数据和模拟点数据。

1、新建html文件

新建index2.htm资源文件，在代码中需要引入Leaflet及Leaflet.CanvasLabel控件的js组件。关键源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Leaflet.CanvasLabel插件,用于显示矢量文本标注</title>
  <link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
  <script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>

<body>
  <div class="container">
    <div class="map" id="map"></div>
  </div>
  <script src="../dist/leaflet.canvaslabel.js"></script>
</body>

</html>

2、声明样式

<style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .container {
      margin: 0 auto;
      max-width: 100%;
    }

    .map {
      width: 100%;
      height: 608px;
    }

    .header {
      padding-top: 5px;
    }
  </style>

3、定义矢量文本渲染器

 //矢量文本标签渲染器
    var canvasLabel = new L.CanvasLabel({
      defaultLabelStyle: {
        collisionFlg: true,
        scale: 1,
        strokeStyle: "#000",
        fillStyle: "#fff",
        lineWidth:3
      }
    });

4、定义地图

定义地图时尤其要注意，与之前的定义地图方式不一样，这里在创建地图对象时需要设置渲染对象，如果不定义将看不到效果， renderer: canvasLabel就是关键之处。

//定义地图
    var map = L.map('map', {
      renderer: canvasLabel
    }).setView([29.40, 117.40], 6);

5、添加矢量数据

首先添加一些线数据，

//添加矢量数据
    var p = L.polyline(
      [[[34.252676, 108.962402],[33.83392, 109.929199],
      [32.657876, 109.050293],[31.877558, 106.787109],[31.428663, 104.655762],
	  [30.600094, 104.040527],[29.97397, 103.842773],[28.690588, 104.589844],
	  [28.825425, 105.424805],[29.53523, 106.589355],[27.605671, 106.984863],
	  [26.568877, 106.611328],[26.39187, 108.786621],[27.44979, 110.039063]]], {
      labelStyle: {
        text: '西部环线',
        zIndex: 0,
        collisionFlg: false,
        textAlign:'right'
      },
      color: '#fe57a1',
    }).addTo(map);

再来添加点数据，这里仅演示功能，点坐标采取随机生成1000个点的方式。

for (let i = 0; i < 3000; i++) {
      let latlng = L.latLng(23.95 + Math.random() * 10, 112.40034 + Math.random() * 15);
	  var title = "重要城市" + Math.random();
      let c = L.circleMarker(latlng, {
        radius: 5,
        labelStyle: {
          text: title,
          rotation: 0,
          zIndex: i,
		  //minZoom : 6,
		  //strokeStyle: "#000",
		  strokeStyle: "red",
        }
      }).addTo(map);
	  
	  var content = "【名称】:"+title;
	  c.bindPopup(content);
    }

6、最终效果

总结

以上就是本文的主要内容，本文将重点介绍Leaflet.CanvasLabel插件，然后介绍插件的属性，其次讲解和Leaflet进行结合使用生成一个可展示的例子，通过实例结合代码的方式进行讲解，让您更好的掌握这款插件。行文仓促，如有不当之处，还请各位专家朋友批评指正。

本文链接：https://blog.csdn.net/yelangkingwuzuhu/article/details/135713326

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用 arm-linux-androideabi-addr2line 工具定位 libunity.so 崩溃问题-程序员宅基地

文章浏览阅读710次，点赞13次，收藏7次。它的名称有点不同 - aarch64-linux-android-addr2line。尽管该实用程序的名称不包含单词arm，但它成功地解密了arm64-v8下的堆栈跟踪，并通常感知arm64-v8的字符。是 NDK 自带的调试工具，可以用来分析 so 崩溃时输出的的内存地址。之后就是通过 cmd 进入到这个路径。找到了 64 位所需的实用程序。_arm-linux-androideabi

javaweb-邮件发送_javaweb发送邮件-程序员宅基地

javaweb-邮件发送摘要: 本文介绍了邮件传输协议(SMTP和POP3)以及电子邮件的发送和接收过程。还讨论了纯文本文件、带图片和附件的邮件发送方法，以及通过servlet方式注册邮箱和使用springboot框架发送邮件的实现。

element-ui table 设置表格滚动条位置_element table 滚动条位置-程序员宅基地

文章浏览阅读4.3k次，点赞6次，收藏11次。在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。_element table 滚动条位置

前端开发经验总结_属性值[session.getattribute("strpath")]引用["],在值内使用时必须-程序员宅基地

文章浏览阅读2.6k次。我设置nowrap和不设置nowrap效果都一样。就是表格随着文字自动伸展，为什么？ →回答问题：TD元素noWrap属性的行为与TD元素的width属性有关。 ◆如果未设置TD宽度，则noWrap属性是起作用的。◆如果设置了TD宽度，则noWrap属性是不起作用的。 http://www.blueidea.com/tech/web/2003/943.as_属性值[session.getattribute("strpath")]引用["],在值内使用时必须被转义。

JS如何把Object对象的数据输出到控制台中_前端怎么通过控制台查看字段取值-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏3次。前端时间在编写程序时遇到这样一个问题，即在前端页面通过一些js框架自带的异步请求返回的数据类型为Object数据类型，笔者根据网上查阅到的资料，找到以下这种简单的方式：//把Object类型转为Json数据格式，再通过console命令在控制台中打印出来console.log("xhr的值为："+JSON.st..._前端怎么通过控制台查看字段取值

8.cc.Button组件使用详解_cc button.start-程序员宅基地

文章浏览阅读556次。1. cc.Button添加按钮的方法 2种方式 (1)直接创建带Button组件的节点; (2) 先创建节点，再添加组件;按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件;按钮的过渡效果: 过渡: 普通状态, 鼠标滑动到物体上, 按下状态, 禁用状态 (1)没有过渡，只有响应事件; (2)颜色过渡, 过渡效果中使用颜色; (3)精灵..._cc button.start