cqkj-map-2d

基于leaflet封装的数据可视化组件

Usage no npm install needed!

<script type="module">
  import cqkjMap2d from 'https://cdn.skypack.dev/cqkj-map-2d';
</script>

README

二维地图可视化组件

简介

基于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>>