antv-l7/baselayer.zh.md at 33fe9171f2ba75e5395a4acebfcbf5c473360972

4.3 KiB

Raw Blame History

title
基础地图

markdown:docs/common/style.md

地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。

使用

using modules

import { WorldLayer } from '@antv/l7-district';

CDN 版本引用

<head>
  <! --引入最新版的L7-District -->
  <script src="https://unpkg.com/@antv/l7-district"></script>
</head>

简介

District 支持下面几种图

WorldLayer 世界地图
CountryLayer 国家地图，目前只支持中国
ProvinceLayer 省级地图
CityLayer 市级地图
CountyLayer 县级地图

配置项

zIndex

图层绘制顺序

data `Array`

属性数据用于可视化渲染

visible

地图是否可见

joinBy

数据关联，属性数据如何内部空间数据关联绑定目前支持 NAME_CHN,adcode 字段连接对照表 Array [string, string] 第一个值为空间数据字段，第二个为传入数据字段名

showBorder `boolean`

是否显示国界线，默认显示，不建议不显示

simplifyTolerance

数据抽稀容差,默认不抽稀 boolean | number 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01

depth

数据显示层级 0：国家级，1:省级，2: 市级，3：县级

stroke 填充描边颜色

ProvinceLayer, CityLayer, CountyLayer

strokeWidth 填充描边宽度

ProvinceLayer, CityLayer, CountyLayer

autoFit

是否自动缩放到图层范围 boolean

chinaNationalStroke

中国国界线颜色 CountryLayer

chinaNationalWidth

中国国界线宽度 CountryLayer

coastlineStroke

海岸线颜色 CountryLayer

coastlineWidth

海岸线宽度 WorldLayer CountryLayer

nationalWidth

国界线 WorldLayer CountryLayer

nationalStroke

国界线 WorldLayer CountryLayer

provinceStroke

省界颜色 CountryLayer depth= 0，1，2时生效

provinceStrokeWidth

省界宽度 CountryLayer depth = 0，1，2时生效

cityStroke 市级边界颜色

CountryLayer depth =1，2时生效

cityStrokeWidth 市级边界宽度

CountryLayer depth =1，2 时生效

countyStroke

县级边界颜色 CountryLayer depth =2时生效

countyStrokeWidth

县级边界宽度 CountryLayer depth =2时生效

markdown:docs/common/district/label.zh.md

markdown:docs/common/district/fill.zh.md

markdown:docs/common/district/popup.zh.md

markdown:docs/common/district/bubble.zh.md

数据

District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接

方法

updateLayerAttribute

更新图层渲染样式参数

layerName 'fill' | 'line' | 'label' | 'bubble' = 'fill',
type: 'color' | 'size' | 'shape' | 'filter',
attr: AttributeType | undefined,

const layer = new CountryLayer();
layer.updateLayerAttribute('fill', 'color', 'red');

updateDistrict

根据 adcode 更新行政区块

参数

adcode 行政区划编码
data 数据
joinByField 绑定字段

citylayer.updateDistrict(['330100', '340100']);

updateData(data, joinBy)

更新显示数据，

参数：

data 需要更新的数据
joinBy 关联字段可选，如果不设置保持和初始化一致。

getFillData

获取填充数据，可用于绘制独立的边界线

show

显示图层

hide

图层隐藏不显示

destroy

移除并销毁图层

事件

行政区划图事件监听默认添加在 fillLayer 上，你点击填充的色块才能接收到事件响应。

支持的事件类型同

on 添加事件

参数

type
handle
layerType 可选 'fill' | 'line' | 'label' | 'bubble' 默认值 fill

const layer = new CountryLayer();
layer.on('click', (e) => {
  console.log(e);
});

off 移除事件

参数

type
handle
layerType 可选 'fill' | 'line' | 'label' | 'bubble' 默认值 fill

4.3 KiB Raw Blame History Unescape Escape

使用

简介

配置项