二维地图可视化组件

简介

基于leaflet封装的数据可视化组件,目前包含天地图服务，鼠标绘图功能

安装

npm i cqkj-map-2d

初始化地图控件

对于leaflet原生api的使用请参考leaflet官方文档

let map= L.map("map", {
    center: [32.027173, 114.431974],
    zoom: 5,
    attributionControl: false,
    zoomControl: false,
    doubleClickZoom: false,
    zoomSnap: 0.1,
    zoomDelta: 0.1,
    wheelPxPerZoomLevel: 120
});

使用天地图

组件内置三个天地图服务

import { TianDiTu } from "cqkj-map-2d";

//行政地图服务
TianDiTu.vec_w.addTo(map)  //图片
TianDiTu.cva_w.addTo(map)  //文字

//卫星影像服务
TianDiTu.img_w.addTo(map)  //图片
TianDiTu.cia_w.addTo(map)  //文字

//地形地图服务
TianDiTu.ter_w.addTo(map)  //图片
TianDiTu.cta_w.addTo(map)  //文字

鼠标绘图

绘制矩形

import { RectanglePainer } from "cqkj-map-2d";
//初始化对象以后便会进入绘图模式
let painter = new RectanglePainer(map,option?)
//销毁对象退出绘图
painter.destroy()

RectanglePainer

option

| 字段 | 描述 | 默认值 | | ----- | ---------- | ---------- | | pane | 图层容器名 | popupPane | | fill | 填充色 | #13d6ea88 | | color | 描边色 | #4411e1 |

方法

| 方法名 | 描述 | 参数 | | --------- | ---- | ---- | | destroy() | 销毁 | |

属性

| 属性名 | 描述 | | ------ | ------------------------------------ | | points | 用户点击的坐标点，使用伪墨卡托坐标系 |

绘制圆形

import { CirclePainter } from "cqkj-map-2d";
//初始化对象以后便会进入绘图模式
let painter = new CirclePainter(map,option?)
//销毁对象退出绘图
painter.destroy()

CirclePainter

option

| 字段 | 描述 | 默认值 | | ----- | ---------- | ---------- | | pane | 图层容器名 | popupPane | | fill | 填充色 | #13d6ea88 | | color | 描边色 | #4411e1 |

方法

| 方法名 | 描述 | 参数 | | --------- | ---- | ---- | | destroy() | 销毁 | |

属性

| 属性名 | 描述 | | ------ | ------------------------------------ | | points | 用户点击的坐标点，使用伪墨卡托坐标系 |

绘制多边形

import { PolygonPainter } from "cqkj-map-2d";
//初始化对象以后便会进入绘图模式
let painter = new PolygonPainter(map,option?)
//销毁对象退出绘图
painter.destroy()

PolygonPainter

option

| 字段 | 描述 | 默认值 | | ----- | ---------- | ---------- | | pane | 图层容器名 | popupPane | | fill | 填充色 | #13d6ea88 | | color | 描边色 | #4411e1 |

方法

| 方法名 | 描述 | 参数 | | --------- | ---- | ---- | | destroy() | 销毁 | |

属性

| 属性名 | 描述 | | ------ | ------------------------------------ | | points | 用户点击的坐标点，使用伪墨卡托坐标系 |

辅助方法

import { util } from "cqkj-map-2d";

util

| 方法名 | 描述 | 参数 | | ------------------------------------------------ | -------------------------------------------------- | ------------------------------------ | | filtPointsInPoligons(points,lines):Array | 在点集中查找被多边形内部的点，返回内部点的索引集合 | Array<L.Point>,Array<Array<L.Point>> | | | | | | | | |