tb-comp

[toc]

一个基于 Vue2.x 的 Leaflet 地图快速开发框架，包含地图常用组件、工具类、地图服务管理等

注意: Leaflet 、 esri-leaflet 、ant-design-vue 需要在项目中自行引入

推荐版本为：

• leaflet 1.9.4
• esri-leaflet 3.0.10
• ant-design-vue 1.7.8

jsDelivr对应的CDN地址：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/esri-leaflet@3.0.10/dist/esri-leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>

How To Use

安装

npm install tb-comp --save // yarn add tb-comp

全局引入

Tips: 也可以按需引入，会在组件及工具类说明中提供按需引入方式

import TbComp from 'tb-comp';
import 'tb-comp/lib/style.css';
Vue.use(TbComp);

组件

tb-leaflet leaflet 地图组件

按需引入方式：

import { TbLeaflet } from 'tb-comp';

export default {
 components: {
  TbLeaflet,
 },
};

<tb-leaflet />

属性：

zoomConfig: Object，缩放组件配置

let zoomConfig = {
 style: {
  right: '20px',
  bottom: '20px',
 },
};

showBaseLayer: Boolean，是否使用默认的天地图为底图，默认为 true

config: Object，地图其它参数，透传

地图创建方法，使用的是下方工具类中的 createMap 方法

方法：

onReady：地图创建完成的回调，参数为地图实例

<tb-leaflet @onReady="onReady" />

<script>
export default {
 methods: {
  onReady(map) {
   console.log('map', map);
  },
 },
};
</script>

onZoom： 地图缩放的回调，参数为缩放级别

<tb-leaflet @onZoom="onZoom" />

<script>
export default {
 methods: {
  onZoom(zoom) {
   console.log('zoom', zoom);
  },
 },
};
</script>

tb-map-swipe 卷帘组件

按需引入方式：

import { TbMapSwipe } from 'tb-comp';

export default {
 components: {
  TbMapSwipe,
 },
};

<tb-map-swipe />

属性：

visible：Boolean，是否显示卷帘组件，默认为 false

service：Object，卷帘服务，包含两个属性：

• left：Array，左侧地图服务列表

• right：Array，右侧地图服务列表

注：地图服务列表为数组对象形式，其中需通过 dataType 指定服务类型，以下分别为支持的服务类型

wms服务

{
    "dataType": "wms",
    "serverId": "e9a40f76d50f443797e2a5ac23e080f1",
    "url": "https://nxfh.xblcp.cn:11004/gateway/geoserver/wms",
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjoie1wic3ViSWRcIjpcIjE0NjY2MTI1MzA4ODg5NjYxNDZcIixcInNlcnZpY2VJZFwiOlwiZTlhNDBmNzZkNTBmNDQzNzk3ZTJhNWFjMjNlMDgwZjFcIn0ifQ.m9hFa4M9qFq616vsMSHk3yv31sEms-3GZvfI7l_Y-FE",
    "layers": "nx-sjzc:temp_1653389403578",
    "name": "功能分区",
    "id": "1534052978809475074",
    "sourceBbox": "104.284293111438 35.2384926382247,107.661716531193 39.3877756418324",
}

arcgisTile 服务

{
  "dataType": "arcgisTile",
  "serverId": "906672fe43a04eeb884ff161cea4f874",
  "url": "https://nxfh.xblcp.cn:11004/mapway/tileserver/arcgis/nx_退耕134",
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjoie1wic3ViSWRcIjpcIjE0NjY2MTI1MzA4ODg5NjYxNDZcIixcInNlcnZpY2VJZFwiOlwiOTA2NjcyZmU0M2EwNGVlYjg4NGZmMTYxY2VhNGY4NzRcIn0ifQ.wLx-GlQRGAGqDvfUPxORXa17gl9UDgLwwkY-ZIxS5g0",
  "layers": "1",
  "name": "退耕还林工程",
  "id": "1540221431148810241",
}

arcgisDynamic

{
  "name": "降水",
  "id": "1562280062211952642asdfn",
  "type": 2,
  "dataType": "arcgisDynamic",
  "url": "https://nxfh.xblcp.cn:11004/mapway/tileserver/arcgis/nx_kxlhjs173",
}

wmts

{
  "dataType": "wmts",
  "type": "2",
  "serverId": "831fe401859b4dfaa32dc7d6a22f1290",
  "url": "https://swlc.nwif.cn:8021/onemap18/rest/wmts",
  "layers": "2022遥感影像",
  "name": "2022遥感影像",
  "id": "1528658843004932098"
}

tb-map-split 分屏组件

按需引入方式：

import { TbMapSplit } from 'tb-comp';

export default {
 components: {
  TbMapSplit,
 },
};

<tb-map-split />

分屏组件属性同卷帘组件，不再赘述

tb-map-control 底图切换组件

按需引入方式：

import { TbMapControl } from 'tb-comp';

export default {
 components: {
  TbMapControl,
 },
};

<tb-map-control />

map: Object，地图实例，必传

className: String，组件样式类名

basemapList: Array，底图列表，数组对象形式，已内置天地图卫星、电子、地形三种底图

selectLayerStyle: Object，底图可选项展开后的样式

other

TODO:

tb-map-identify 点查询组件

tb-map-timeline 时间轴组件

tb-map- 自由统计组件

tbMapUtils 地图工具

按需引入方式：

import TbComp from 'tb-comp';
const tbMapUtils = TbComp.tbMapUtils;

当然，也可以挂载到 Vue 原型方法上实现全局调用：

Vue.prototype.$tbMapUtils = tbMapUtils;

tbMapUtils.createMap 创建地图方法

参数：

• elem： String/Object, 为 String 时请传入 querySelector 的字符串，为 Object 时请传入 DOM 对象
• config： Object ，地图其它参数，默认值为：

let config = {
 center: { lat: 33.51361277047545, lng: 107.89657445624471 },
 zoom: 7,
 zoomControl: false,
 minZoom: 3,
 maxZoom: 17,
 zoomOffset: 1,
 crs: L.CRS.EPSG4326,
 attributionControl: false,
};

创建地图：

const { createMap } = tbMapUtils;
const map = createMap('map', {
 center: [30, 120],
 zoom: 10,
});

创建服务、图层

tbMapUtils.createTdtLayer 创建天地图图层

返回一个 zIndex 为 0 的天地图图层组，适用于当做底图

参数：

• map： Object，地图实例

createWmsServer 创建 wms 服务

参数：

• config： Object
  • config.target: String，目标图层组/地图实例，可不传，传值会将图层默认添加至目标图层组/地图实例 layer.addTo(target)
  • config.url: String，服务地址
  • config.options: Object，服务参数，默认值为 { type: 'wms', transparent: true, format: 'image/png', tiled: true }，如果传值，则会与默认值进行合并

tbMapUtils.createArcgisTile 创建arcgisTile服务

参数：

• config： Object
  • config.target: String，目标图层组/地图实例，可不传，传值会将图层默认添加至目标图层组/地图实例 layer.addTo(target)
  • config.url: String，服务地址
  • config.options: Object，服务参数，默认值为 { zoomOffset: 1 }，如果传值，则会与默认值进行合并

tbMapUtils.createArcgisDynamic 创建arcgisDynamic服务

参数：

• config： Object
  • config.target: String，目标图层组/地图实例，可不传，传值会将图层默认添加至目标图层组/地图实例 layer.addTo(target)
  • config.url: String，服务地址
  • config.options: Object，服务参数，默认值为 { useCors: false, zoomOffset: 1, }，如果传值，则会与默认值进行合并

tbMapUtils.createWmtsServer 创建 wmts 服务

参数：

• config： Object
  • config.target: String，目标图层组/地图实例，可不传，传值会将图层默认添加至目标图层组/地图实例 layer.addTo(target)
  • config.url: String，服务地址

绘制几何体类 Draw

/**
 * 绘制类型常量
 */
export const DRAW_TYPE = {
 Marker: 'Marker',
 CircleMarker: 'CircleMarker',
 Circle: 'Circle',
 Line: 'Line',
 Rectangle: 'Rectangle',
 Polygon: 'Polygon',
 Text: 'Text',
};

构造函数

参数：

• map 地图实例

this.draw = new tbMapUtils.Draw(map);

方法

enableDraw 开启绘制

参数：

• type： String，绘制类型，参考下方 DRAW_TYPE 常量
• options： Object，绘制参数，默认值为 {snappable: true, snapDistance: 20}，更多参数详见：https://github.com/geoman-io/leaflet-geoman

案例：

const { DRAW_TYPE, Draw } = tbMapUtils;

this.draw = new Draw(this.map);

this.draw.enableDraw(DRAW_TYPE.Polygon, {
 snappable: false,
 snapDistance: 50,
});

disableDraw 停止绘制

clear 清除所有图层

绘制、测量类 Measure

构造函数

参数：

• map： Object 地图实例

this.drawMeasure = new tbMapUtils.DrawMeasure(map);

方法

createXXX 创建几何体

• createPolygon 创建多边形
• createRectangle 创建矩形
• createLine 创建线
• createCricle 创建圆

参数：Object

• showMeasurements：Boolean 是否显示测量值，默认为 true
• onEnd：Function 绘制完成的回调，参数为绘制的图层

案例：

this.drawMeasure.createXXX({
 showMeasurements: true, // 是否显示测量值，不显示则为绘制模式
 onEnd: (layer) => {
  // 绘制完成的回调
  console.log('layer', layer);
 },
});

disable 停止绘制

this.drawMeasure.disable();

clear 清除所有图层

this.drawMeasure.clear();