leaflet【十一】地图瓦片路径可视化

前言

在开发调试过程当中,如果引入的是公司内部的Gis地图信息或者一些第三方定制来的Gis地图数据,当某一些地图块数据缺失的时候,要打开F12去一个个找那些链接(去找对应的xy与layer)失效、那么你可能需要使用以下插件帮你实现瓦片路径、层级可视化

leaflet-map-block

github 地址

npm 地址

该插件封装了一个 Leaflet 的网格图层 LeafletMapBlockLayer,用于在地图上渲染带有网格和文字标记的瓦片。支持自定义网格线样式和网格文字显示。安装和使用都非常简单,代码如下:

复制代码
npm i leaflet-map-block

使用:

typescript 复制代码
import {LeafletMapBlockLayer} from 'leaflet-map-block/dist/LeafletMapBlock';

map.addLayer(new LeafletMapBlockLayer({lineDash: [2, 2]}));

其中LeafletMapBlockLayer是一个类,他的构造函数可以传递一个对象,这个对象就是对这个插件进行的一个配置

值类型 默认值 说明
strokeStyle string 'red' 线颜色
lineWidth number 2 线宽
lineDash number[] [5,5] 线的虚线样式:[0,0] 为实线
showGridText boolean true 是否显示网格文字
gridTextColor string 'black' 网格文字颜色
gridFont string '12px Arial' gridFont

比方说我们使用的是天地图的瓦片,那么我们的地图URL就是:http://t1.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=tk

,那么当那一块缺了的时候没有渲染出来就可以拿地图上的xyz放到这个链接的xyz值中就可以快速定位到了

或者说我们有自己的地图的话,那也是一样的替换URL当中的xyz验证一下是不是真的图片缺失,是的话就去对应的文件系统找这个图片就好了

源码解析

授人以鱼不如授人以渔,这也是在一次机缘巧合之下发生的问题,使用内部地图但是缺失了一些块不好定位的时候,正好再看leaflet官方文档找的。

也就是这个GridLayer图层,我们知道地图渲染是按照瓦片一块块贴到canvas上面,然后渲染一个canvas实现的

一个冷姿势:在leaflet这个官网里面是英文的,如果想看中文版的,把.com改成.cn就可以了

那么正好:来开始封装吧:

  • 定义一个类,继承L.GridLayer
  • 实现构造,用来传递options配置
  • createTile方法会在map.addLayer()将该图层添加到地图的时候调用,返回一个canvas元素【也就是单个的地图瓦片】
  • 既然可以拿到每一次渲染的地图瓦片,那么我们就可以给它添加一些内容了
  • 创建一个canvas元素,这个canvas元素是和地图瓦片一样的大小
  • 给这个canvas元素添加内容【边框和文字】其中层级和定位信息在coords当中可以取到
  • 最后返回这个canvas对象tile就完成了
ts 复制代码
import L from 'leaflet';

interface CanvasLayerOptions extends L.GridLayerOptions {
  // 线颜色
  strokeStyle?: string;
  // 线宽
  lineWidth?: number;
  // 线的虚线样式:[0,0]为实线
  lineDash?: number[];
  // 是否显示网格文字
  showGridText?: boolean;
  // 网格文字颜色
  gridTextColor?: string;
  // 网格文字大小、字体等配置
  gridFont?: string;
}

let options: CanvasLayerOptions = {};

export class LeafletMapBlockLayer extends L.GridLayer {

  constructor(data?: CanvasLayerOptions) {
    super(data);
    options = {
      strokeStyle: 'red',
      lineWidth: 2,
      lineDash: [5, 5],
      showGridText: true,
      gridTextColor: 'black',
      gridFont: '12px Arial',
      ...data
    };
  }


  createTile(coords: any): HTMLCanvasElement {
    const tile = L.DomUtil.create('canvas', 'my-leaflet-tile') as HTMLCanvasElement;

    const size = this.getTileSize();
    tile.width = size.x;
    tile.height = size.y;

    const ctx = tile.getContext('2d');

    const {
      strokeStyle = '',
      lineWidth = 0,
      lineDash = [0, 0],
      showGridText = true,
      gridTextColor = 'black',
      gridFont = '12px Arial'
    } = options;

    if (ctx) {
      ctx.strokeStyle = strokeStyle;
      ctx.lineWidth = lineWidth;
      ctx?.setLineDash(lineDash);
      ctx?.strokeRect(0, 0, tile.width, tile.height);

      if (showGridText) {
        ctx.fillStyle = gridTextColor;
        ctx.font = gridFont;
        ctx.fillText(`x:${coords.x}, y:${coords.y}, z:${coords.z}`, 5, 15);
      }
    }
    return tile;
  }
}

npm publish

既然封装好了,那么也打包发布到npm上吧

  • 修改package.json文件,需要指定
    • name:项目名
    • version:版本号
    • description:项目描述
    • main:入口文件
    • module:es6模块入口文件
    • types:ts类型声明文件
    • keywords:关键字
    • author:作者
    • license:协议
    • scripts:打包脚本
  • 执行打包命令:npm run build-lib,打包完成之后会生成dist目录
  • 登录npm:npm login
  • 发布到npm:npm publish

就这样也就发布到了npm上。

相关推荐
hhzz2 天前
Pythoner 的Flask项目实践-添加Shapefile面数据并展示功能Mapboxgl底图
flask·gis·mapboxgl·pyton·shpfile
路光.3 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
DaMu8 天前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
你是一个铁憨憨11 天前
ArcGIS定向影像(1)——非传统影像轻量级解决方案
arcgis·gis·影像·定向影像
Wiktok12 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
fanged12 天前
Cesium4--地形(OSGB到3DTiles)
3d·gis·web
Wiktok12 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok13 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手14 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
GIS开发特训营14 天前
【智慧城市】2025年中国地质大学(武汉)暑期实训优秀作品(4):智矿中国
学习·gis·智慧城市·gis开发·webgis