diff --git a/docs/api/district/baselayer.zh.md b/docs/api/district/baselayer.zh.md index 77720a351e..78785262c8 100644 --- a/docs/api/district/baselayer.zh.md +++ b/docs/api/district/baselayer.zh.md @@ -41,14 +41,18 @@ order: 2 数据映射 - field 填充映射字段 - values 映射值，同 color 方法第二个参数数组，回调函数 + - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法 + 数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉 - style 同 polygonLayer 的 style 方法 - - activeColor 鼠标滑过高亮颜色 + - activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮 - bubble 气泡图 - enable `boolean` 是否显示气泡 default false - color 气泡颜色 支持常量、数据映射 - size 气泡大小 支持常量、数据映射 - shape 气泡形状 支持常量、数据映射 - style 气泡图样式 同 PointLayer + - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法 + 数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉 - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer` - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer` - autoFit 是否自动缩放到图层范围 `boolean` diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md index 96cc79f16d..b6b4533f78 100644 --- a/examples/district/basic/API.zh.md +++ b/examples/district/basic/API.zh.md @@ -19,7 +19,6 @@ import { WorldLayer } from '@antv/l7-district'; ``` -⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整 ## 简介 @@ -57,13 +56,22 @@ District 支持下面几种图 数据映射 - field 填充映射字段 - values 映射值，同color方法第二个参数数组，回调函数 + - filter 图层过滤方法，支持常量和数据映射 同layer.filter方法 + 数据映射 + - field 填充映射字段 + - values 回调函数 `false` 返回值将会被过滤掉 - style 同 polygonLayer的style方法 - - activeColor 鼠标滑过高亮颜色 + - activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮 + - bubble 气泡图 - enable `boolean` 是否显示气泡 default false - color 气泡颜色 支持常量、数据映射 - size 气泡大小 支持常量、数据映射 - shape 气泡形状 支持常量、数据映射 + - filter 图层过滤方法，支持常量和数据映射 同layer.filter方法 + 数据映射 + - field 填充映射字段 + - values 回调函数 `false` 返回值将会被过滤掉 - style 气泡图样式 同 PointLayer - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer` - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer` diff --git a/examples/district/basic/demo/attach_map.js b/examples/district/basic/demo/attach_map.js new file mode 100644 index 0000000000..3d99a68f5c --- /dev/null +++ b/examples/district/basic/demo/attach_map.js @@ -0,0 +1,98 @@ +import { Scene } from '@antv/l7'; +import { CountryLayer } from '@antv/l7-district'; +import { Mapbox } from '@antv/l7-maps'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 116.2825, 39.9 ], + pitch: 0, + style: 'blank', + zoom: 3, + minZoom: 0, + maxZoom: 10 + }) +}); +const attachMapContainer = document.createElement('div'); +attachMapContainer.id = 'attach'; +attachMapContainer.style.cssText = `position: absolute; +height: 125px; +width: 98px; +right: 50px; +bottom: 20px; +border: 1px solid #333;`; +document.getElementById('map').parentElement.append(attachMapContainer); + +scene.on('loaded', () => { + new CountryLayer(scene, { + data: [], + joinBy: [ 'NAME_CHN', 'name' ], + depth: 1, + provinceStroke: '#783D2D', + cityStroke: '#EBCCB4', + cityStrokeWidth: 1, + label: { + enable: false + }, + fill: { + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } + }, + popup: { + enable: true, + Html: props => { + return `${props.NAME_CHN}`; + } + } + }); +}); + +// 添加附图，附图需要和主图保持一致 + +const scene2 = new Scene({ + id: 'attach', + logoVisible: false, + map: new Mapbox({ + center: [ 113.60540108435657, 12.833692637803168 ], + pitch: 0, + style: 'blank', + zoom: 1.93, + minZoom: 0, + maxZoom: 3, + interactive: false + }) +}); +scene2.on('loaded', () => { + new CountryLayer(scene2, { + data: [], + label: { + enable: false + }, + popup: { + enable: false + }, + autoFit: false, + depth: 1, + fill: { + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } + } + }); +}); diff --git a/examples/district/basic/demo/hainan.js b/examples/district/basic/demo/hainan.js new file mode 100644 index 0000000000..3925965616 --- /dev/null +++ b/examples/district/basic/demo/hainan.js @@ -0,0 +1,106 @@ +import { Scene } from '@antv/l7'; +import { ProvinceLayer, CountryLayer } from '@antv/l7-district'; +import { Mapbox } from '@antv/l7-maps'; +async function initMap() { + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 109.803, 19.347 ], + pitch: 0, + style: 'blank', + zoom: 7, + minZoom: 6, + maxZoom: 11 + }) + }); + const attachMapContainer = document.createElement('div'); + attachMapContainer.id = 'attach'; + attachMapContainer.style.cssText = `position: absolute; + height: 125px; + width: 98px; + right: 50px; + bottom: 20px; + border: 1px solid #333;`; + document.getElementById('map').parentElement.append(attachMapContainer); + scene.on('loaded', () => { + new ProvinceLayer(scene, { + data: [], + geoDataLevel: 1, + autoFit: false, + joinBy: [ 'adcode', 'code' ], + adcode: [ '460000' ], + depth: 2, + stroke: '#aaa', + label: { + enable: false, + field: 'NAME_CHN', + textAllowOverlap: false + }, + fill: { + color: '#A3d7FF' + }, + popup: { + enable: false, + Html: props => { + return `${props.NAME_CHN}:${props.pop}`; + } + } + }); + }); + + const scene2 = new Scene({ + id: 'attach', + logoVisible: false, + map: new Mapbox({ + center: [ 113.60540108435657, 12.833692637803168 ], + pitch: 0, + style: 'blank', + zoom: 1.93, + // zoom: 3, + minZoom: 0, + maxZoom: 3, + interactive: false + }) + }); + scene2.on('loaded', () => { + new CountryLayer(scene2, { + data: [], + label: { + enable: false + }, + popup: { + enable: false + }, + autoFit: false, + provinceStroke: '#aaa', + depth: 1, + fill: { + color: '#A3d7FF' + } + }); + new ProvinceLayer(scene2, { + data: [], + autoFit: false, + adcode: [ '460000' ], + depth: 2, + zIndex: 2, + stroke: '#aaa', + strokeWidth: 0.1, + label: { + enable: false, + field: 'NAME_CHN', + textAllowOverlap: false + }, + fill: { + color: '#A3d7ff' + }, + popup: { + enable: false, + Html: props => { + return `${props.NAME_CHN}:${props.pop}`; + } + } + }); + }); +} +initMap(); diff --git a/examples/district/basic/demo/meta.json b/examples/district/basic/demo/meta.json index 44e56cd440..bfbc9bb108 100644 --- a/examples/district/basic/demo/meta.json +++ b/examples/district/basic/demo/meta.json @@ -28,6 +28,16 @@ "filename": "county.js", "title": "中国县地图", "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "attach_map.js", + "title": "中国地图附图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*bGX-Tbw5uVAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "hainan.js", + "title": "海南省地图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nHOTQ61hFbYAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/district/react/demo/province.tsx b/examples/district/react/demo/province.tsx index 1dc55d3aba..2b1aa58fb3 100644 --- a/examples/district/react/demo/province.tsx +++ b/examples/district/react/demo/province.tsx @@ -217,7 +217,7 @@ class Province extends React.Component { const { province } = this.state; this.provinceLayer = new ProvinceLayer(scene, { adcode: ['230000'], - depth: 3, + depth: 1, label: { field: 'NAME_CHN', textAllowOverlap: false, diff --git a/packages/boundry/src/config.ts b/packages/boundry/src/config.ts index a4abbe6b64..b22c521386 100644 --- a/packages/boundry/src/config.ts +++ b/packages/boundry/src/config.ts @@ -127,12 +127,12 @@ const dataLevel1: { [key: string]: any } = { fill: { type: 'pbf', url: - 'https://gw.alipayobjects.com/os/bmw-prod/56cb34eb-cf61-4512-a6f3-fe4a45a7b1a3.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/35bb8365-1926-471c-b357-db2c02ff3a81.bin', }, line: { type: 'pbf', url: - '//gw.alipayobjects.com/os/bmw-prod/76914518-e04c-42c9-8c4b-1ae71aabb024.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/8ec671c3-a4f9-4fdf-8e88-85d2ab1d8930.bin', }, label: { type: 'pbf', @@ -154,7 +154,7 @@ const dataLevel1: { [key: string]: any } = { fill: { type: 'pbf', url: - 'https://gw.alipayobjects.com/os/bmw-prod/1d03a9af-1df4-407f-8bae-3638a1e0ad65.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/380370e0-76aa-4240-8874-5732de77e71d.bin', }, line: { type: 'pbf', @@ -176,7 +176,7 @@ const dataLevel1: { [key: string]: any } = { fill: { type: 'pbf', url: - '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/feeb1f06-11c6-4495-84c9-f41ea6f77123.bin', }, line: { type: 'pbf', @@ -198,7 +198,7 @@ const dataLevel1: { [key: string]: any } = { fill: { type: 'pbf', url: - '//gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin', + 'https://gw.alipayobjects.com/os/bmw-prod/24a9ee83-2be1-4fc1-b187-769ac939269d.bin', }, line: { type: 'pbf', diff --git a/packages/boundry/src/layer/drillDown.ts b/packages/boundry/src/layer/drillDown.ts index dc42ae863f..ebad301273 100644 --- a/packages/boundry/src/layer/drillDown.ts +++ b/packages/boundry/src/layer/drillDown.ts @@ -184,7 +184,7 @@ export default class DrillDownLayer { } private getLayerOption(type: 'province' | 'city' | 'county') { - const { joinBy, label, bubble, fill, popup, province } = this.options; + const { joinBy, label, bubble, fill, popup, geoDataLevel } = this.options; const datatype = (type + 'Data') as | 'provinceData' | 'cityData' @@ -196,6 +196,7 @@ export default class DrillDownLayer { bubble, fill, popup, + geoDataLevel, ...this.options[type], }; } diff --git a/packages/boundry/src/layer/interface.ts b/packages/boundry/src/layer/interface.ts index 212877611e..4134ae2e42 100644 --- a/packages/boundry/src/layer/interface.ts +++ b/packages/boundry/src/layer/interface.ts @@ -110,6 +110,7 @@ interface IDrawOption { } export interface IDrillDownOption { drillDepth: 0 | 1 | 2; + geoDataLevel: 1 | 2; customTrigger: boolean; drillDownTriggerEvent: TriggeEventType; drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType; diff --git a/stories/District/Layer/Country.tsx b/stories/District/Layer/Country.tsx index e13876eca3..14657a8b08 100644 --- a/stories/District/Layer/Country.tsx +++ b/stories/District/Layer/Country.tsx @@ -199,6 +199,7 @@ export default class Country extends React.Component { const Layer = new CountryLayer(scene, { visible: true, data: ProvinceData, + geoDataLevel: 1, joinBy: ['NAME_CHN', 'name'], // label: { // field: 'NAME_CHN', diff --git a/stories/District/Layer/drillDown.tsx b/stories/District/Layer/drillDown.tsx index 26f9446f64..bceec23115 100644 --- a/stories/District/Layer/drillDown.tsx +++ b/stories/District/Layer/drillDown.tsx @@ -31,6 +31,7 @@ export default class Country extends React.Component { this.scene = scene; this.drillDown = new DrillDownLayer(scene, { drillDepth: 2, + geoDataLevel: 2, fill: { color: { field: 'NAME_CHN',