diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md index 5ef21e3bc4..37b06f49f1 100644 --- a/docs/api/district/drilldown.zh.md +++ b/docs/api/district/drilldown.zh.md @@ -55,7 +55,35 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 ### joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 -对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名 +对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名。 +- 主要使用场景 + + +```javascript + popup: { + enable: true, + Html: props => { // props 是我们拿到的数据 customValue 是我们的业务数据 + return `${props.customValue}`; + } + } + +``` +- 空间数据字段是 l7-district 内部自己定义的字段 NAME_CHN, adcode +- joinBy 第二个值是我们传入的数据中的字段 +```javascript + const data = [ + { + customValue: '34.5', // 自定义的值 + adcode: '330102', // 用于与空间数据字段对应 + }, + { + customValue: '52.6', + adcode: '330103', + }, + ... + ] + ``` + ### label diff --git a/packages/layers/src/utils/dataMappingStyle.ts b/packages/layers/src/utils/dataMappingStyle.ts index d266374923..3c03204db9 100644 --- a/packages/layers/src/utils/dataMappingStyle.ts +++ b/packages/layers/src/utils/dataMappingStyle.ts @@ -85,16 +85,17 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) { */ function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) { if (isString(styleFloat)) { - // opacity = 'string' + // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段 registerStyleAttribute(fieldName, layer, styleFloat, (value: any) => { return value; }); } else if (isNumber(styleFloat)) { - // opacity = 0.4 -> opacity 传入数字 + // 传入 number、默认值处理 registerStyleAttribute(fieldName, layer, [styleFloat], undefined); - } else if (isArray(styleFloat) && styleFloat.length === 2) { + } else if (isArray(styleFloat) && styleFloat.length === 2) { + // 传入的 styleFloat 是长度为 2 的数组 if (isString(styleFloat[0]) && isFunction(styleFloat[1])) { - // opacity = ['string', callback] + // 字段回调函数 [string, callback] registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]); } else if ( isString(styleFloat[0]) && @@ -102,12 +103,14 @@ function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) { isNumber(styleFloat[1][0]) && isNumber(styleFloat[1][1]) ) { - // opacity = ['string', [start: number, end: nuber]] + // 字段映射 [string, [start: number, end: number]] registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]); } else { + // 兼容 registerStyleAttribute(fieldName, layer, [1.0], undefined); } } else { + // 兼容 registerStyleAttribute(fieldName, layer, [1.0], undefined); } } @@ -123,7 +126,7 @@ function handleStyleOffsets( styleOffsets: any, ) { if (isString(styleOffsets)) { - // 字符串 + // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段 registerStyleAttribute(fieldName, layer, styleOffsets, (value: any) => { return value; }); @@ -133,7 +136,7 @@ function handleStyleOffsets( isString(styleOffsets[0]) && isFunction(styleOffsets[1]) ) { - // callback + // 字段回调函数 [string, callback] registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]); } else if ( isArray(styleOffsets) && @@ -141,9 +144,10 @@ function handleStyleOffsets( isNumber(styleOffsets[0]) && isNumber(styleOffsets[1]) ) { - // normal + // 字段映射 [string, [start: number, end: number]] registerStyleAttribute(fieldName, layer, styleOffsets, undefined); } else { + // 兼容 registerStyleAttribute(fieldName, layer, [0, 0], undefined); } } @@ -156,20 +160,26 @@ function handleStyleOffsets( */ function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any) { if (isString(styleColor)) { + // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值 registerStyleAttribute(fieldName, layer, styleColor, undefined); } else if (isArray(styleColor) && styleColor.length === 2) { + // 传入的 styleColor 是长度为 2 的数组 if (isString(styleColor[0]) && isFunction(styleColor[1])) { + // 字段回调函数 [string, callback] registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]); } else if ( isString(styleColor[0]) && isArray(styleColor[1]) && styleColor[1].length > 0 ) { + // 字段映射 [string, [start: string, end: string]] registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]); } else { + // 兼容 registerStyleAttribute(fieldName, layer, '#fff', undefined); } } else { + // 兼容 registerStyleAttribute(fieldName, layer, '#fff', undefined); } } diff --git a/stories/District/Layer/world.tsx b/stories/District/Layer/world.tsx index a24e6c6b17..a97a33c4bd 100644 --- a/stories/District/Layer/world.tsx +++ b/stories/District/Layer/world.tsx @@ -48,22 +48,22 @@ export default class Country extends React.Component { field: 'NAME_ENG', padding: [5, 5], }, - popup: { + popup: { // enable: true, enable: false, - Html: props => { + Html: (props) => { return `${props.NAME_CHN}`; }, }, }); - // console.time('layer'); - // Layer.on('loaded', () => { - // console.timeEnd('layer'); - // }); - console.log('======') + console.time('layer'); + Layer.on('loaded', () => { + console.timeEnd('layer'); + }); + console.log('======'); Layer.on('click', (e: any) => { // alert(e); - console.log(e) + console.log(e); // alert(1) }); }); diff --git a/stories/Map/components/amap2demo_lineHeight.tsx b/stories/Map/components/amap2demo_lineHeight.tsx index a3adbd5f6e..0774766c66 100644 --- a/stories/Map/components/amap2demo_lineHeight.tsx +++ b/stories/Map/components/amap2demo_lineHeight.tsx @@ -29,14 +29,13 @@ export default class Amap2demo_lineHeight extends React.Component { ) .then((res) => res.json()) .then((data) => { - - // let data = { - // "type": "FeatureCollection", - // "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, - // "features": [ - // { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } }, - // { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } }, - // ] + // let data = { + // "type": "FeatureCollection", + // "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + // "features": [ + // { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } }, + // { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } }, + // ] // } const layer = new LineLayer({}) .source(data) @@ -47,22 +46,22 @@ export default class Amap2demo_lineHeight extends React.Component { .scale('ELEV', { type: 'quantize', }) - .color('#f00') - // .color( - // 'ELEV', - // [ - // '#E4682F', - // '#FF8752', - // '#FFA783', - // '#FFBEA8', - // '#FFDCD6', - // '#EEF3FF', - // '#C8D7F5', - // '#A5C1FC', - // '#7FA7F9', - // '#5F8AE5', - // ].reverse(), - // ); + .color('#f00'); + // .color( + // 'ELEV', + // [ + // '#E4682F', + // '#FF8752', + // '#FFA783', + // '#FFBEA8', + // '#FFDCD6', + // '#EEF3FF', + // '#C8D7F5', + // '#A5C1FC', + // '#7FA7F9', + // '#5F8AE5', + // ].reverse(), + // ); scene.addLayer(layer); }); }); diff --git a/stories/Map/components/amap2demo_lineLinear.tsx b/stories/Map/components/amap2demo_lineLinear.tsx index d0bce2df14..8d348a2c16 100644 --- a/stories/Map/components/amap2demo_lineLinear.tsx +++ b/stories/Map/components/amap2demo_lineLinear.tsx @@ -1,4 +1,3 @@ - import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_markerPopup.tsx b/stories/Map/components/amap2demo_markerPopup.tsx index 8b05eadefe..163b0107ba 100644 --- a/stories/Map/components/amap2demo_markerPopup.tsx +++ b/stories/Map/components/amap2demo_markerPopup.tsx @@ -3,45 +3,54 @@ import { MarkerLayer, Scene } from '@antv/l7'; import { AMapScene, Marker, Popup } from '@antv/l7-react'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; -import {useState} from 'react' +import { useState } from 'react'; const Amap2demo_markerPopup = () => { - const [showPopup , setShowPopup] = useState(false) + const [showPopup, setShowPopup] = useState(false); return ( - { - console.log(marker.getElement().children[0].children[0]) - marker.getElement().children[0].children[0].addEventListener('mouseenter', (e) => { - setShowPopup(true) - }) - marker.getElement().children[0].children[0].addEventListener('mouseout', (e) => { - setShowPopup(false) - }); + map={{ + center: [114, 32], + pitch: 0, + style: 'dark', + zoom: 6, }} - /> - {showPopup && - 这是个信息框 - } - + style={{ + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }} + > + { + console.log(marker.getElement().children[0].children[0]); + marker + .getElement() + .children[0].children[0].addEventListener('mouseenter', (e) => { + setShowPopup(true); + }); + marker + .getElement() + .children[0].children[0].addEventListener('mouseout', (e) => { + setShowPopup(false); + }); + }} + /> + {showPopup && ( + + 这是个信息框 + + )} + ); -} -export default Amap2demo_markerPopup +}; +export default Amap2demo_markerPopup;