Feat dipper demo (#820)

* docs: 添加dipper 文档

* fix: gatsyby 配置

* fix: add map.en

* feat: add global/window adapter - gastby 服务端渲染修复

Co-authored-by: 2912401452 <2912401452@qq.com>
This commit is contained in:
@thinkinggis 2021-11-08 19:49:43 +08:00 committed by GitHub
parent 327ef700d5
commit 5403147408
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 928 additions and 47 deletions

View File

@ -9,6 +9,7 @@ module.exports = {
], ],
siteMetadata: { siteMetadata: {
title: 'L7', title: 'L7',
isAntVSite: false,
description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework', description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework',
siteUrl: 'https://l7.antv.vision', siteUrl: 'https://l7.antv.vision',
githubUrl: 'https://github.com/antvis/L7', githubUrl: 'https://github.com/antvis/L7',

View File

@ -12,6 +12,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
...config.resolve.alias, ...config.resolve.alias,
'@antv/l7': path.resolve(__dirname, 'packages/l7/src'), '@antv/l7': path.resolve(__dirname, 'packages/l7/src'),
'@antv/l7-mini': path.resolve(__dirname, 'packages/mini/src'), '@antv/l7-mini': path.resolve(__dirname, 'packages/mini/src'),
'@antv/l7-maps/lib/map': path.resolve(__dirname, 'packages/maps/src/map'),
'@antv/l7-core': path.resolve(__dirname, 'packages/core/src'), '@antv/l7-core': path.resolve(__dirname, 'packages/core/src'),
'@antv/l7-component': path.resolve(__dirname, 'packages/component/src'), '@antv/l7-component': path.resolve(__dirname, 'packages/component/src'),
'@antv/l7-layers': path.resolve(__dirname, 'packages/layers/src'), '@antv/l7-layers': path.resolve(__dirname, 'packages/layers/src'),

View File

@ -6,6 +6,8 @@
"url": "https://github.com/antvis/L7" "url": "https://github.com/antvis/L7"
}, },
"devDependencies": { "devDependencies": {
"@antv/dipper": "^0.0.5",
"@antv/dipper-widgets": "^0.0.5",
"@antv/g2": "^3.5.9", "@antv/g2": "^3.5.9",
"@antv/gatsby-theme-antv": "^1.1.1", "@antv/gatsby-theme-antv": "^1.1.1",
"@antv/l7-district": "^2.3.9", "@antv/l7-district": "^2.3.9",
@ -31,7 +33,7 @@
"@rollup/plugin-json": "^4.0.0", "@rollup/plugin-json": "^4.0.0",
"@rollup/plugin-node-resolve": "^6.0.0", "@rollup/plugin-node-resolve": "^6.0.0",
"@storybook/react": "^6.2.2", "@storybook/react": "^6.2.2",
"@turf/turf": "^5.1.6", "@turf/turf": "^6.5.0",
"@types/dat.gui": "^0.7.1", "@types/dat.gui": "^0.7.1",
"@types/enzyme": "^3.1.14", "@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3", "@types/enzyme-adapter-react-16": "^1.0.3",

View File

@ -33,7 +33,7 @@
"inversify": "^5.0.1", "inversify": "^5.0.1",
"inversify-inject-decorators": "^3.1.0", "inversify-inject-decorators": "^3.1.0",
"l7-tiny-sdf": "^0.0.2", "l7-tiny-sdf": "^0.0.2",
"l7hammerjs": "^0.0.5", "l7hammerjs": "^0.0.6",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"viewport-mercator-project": "^6.2.1" "viewport-mercator-project": "^6.2.1"

View File

@ -1,3 +1 @@
// @ts-nocheck
// tslint:disable
export const HTMLCanvasElement = Object; export const HTMLCanvasElement = Object;

View File

@ -1,7 +1,8 @@
// @ts-nocheck // @ts-nocheck
import { globalWindow } from './global';
export const isMiniAli = export const isMiniAli =
// @ts-ignore // @ts-ignore
typeof my !== 'undefined' && !!my && typeof my.showToast === 'function'; typeof my !== 'undefined' && !!my && typeof my.showToast === 'function';
export default !isMiniAli export default !isMiniAli
? devicePixelRatio ? globalWindow.devicePixelRatio
: (my.getSystemInfoSync().pixelRatio as number); : (my.getSystemInfoSync().pixelRatio as number);

View File

@ -0,0 +1,61 @@
// TODO: 解决 gastby 服务端构建过程中没有 window 全局变量的问题
let globalWindow: any = window;
if (typeof window === 'undefined') {
globalWindow = {
devicePixelRatio: 1,
navigator: {
userAgent:
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36',
browserLanguage: 'zh-CN',
language: 'zh-CN',
platform: '',
},
location: '',
document: {
documentElement: {
style: {},
},
createEvent: () => true,
getElementById: (id: string) => true,
createElement: () => {
return {
className: '',
classList: {
add: () => '',
},
};
},
createElementNS: () => true,
addEventListener: () => true,
removeEventListener: () => true,
querySelector: () => false,
},
performance: {
mark: (mark: string) => null,
clearMeasures: (measure: string) => null,
clearMarks: (mark: string) => null,
measure: (mark: string, create: string, load: string) => {
return {
duration: 0,
};
},
now: () => new Date().getTime(),
},
Blob: '',
dispatchEvent: (evt: any) => true,
Event: (name: string, data: any) => true,
createElement: () => true,
createElementNS: () => true,
XMLHttpRequest: () => true,
addEventListener: () => true,
removeEventListener: () => true,
requestAnimationFrame: () => true,
cancelAnimationFrame: () => true,
clearTimeout: () => true,
};
}
export { globalWindow };

View File

@ -27,6 +27,8 @@ import { WebGLRenderingContext } from './WebGL';
import { WebGL2RenderingContext } from './WebGL2'; import { WebGL2RenderingContext } from './WebGL2';
import { XMLHttpRequest } from './XMLHttpRequest'; import { XMLHttpRequest } from './XMLHttpRequest';
import { globalWindow } from './global'
// 判断时候是支付宝小程序环境 // 判断时候是支付宝小程序环境
export const isMiniAli = export const isMiniAli =
// @ts-ignore // @ts-ignore
@ -78,44 +80,9 @@ export const miniWindow = {
clearInterval: clearInterval clearInterval: clearInterval
} as Window & typeof globalThis; } as Window & typeof globalThis;
// export { export const $window = isMini ? miniWindow : globalWindow;
// btoa, export const $XMLHttpRequest = isMini ? XMLHttpRequest: globalWindow.XMLHttpRequest;
// URL, export const $location = isMini ? location : globalWindow.location;
// Blob,
// window,
// atob,
// devicePixelRatio,
// document,
// Element,
// Event,
// EventTarget,
// HTMLCanvasElement,
// HTMLElement,
// HTMLMediaElement,
// HTMLVideoElement,
// Image,
// navigator,
// Node,
// requestAnimationFrame,
// cancelAnimationFrame,
// screen,
// XMLHttpRequest,
// performance,
// WebGLRenderingContext,
// WebGL2RenderingContext,
// ImageData,
// location
// };
// export {
// window as $window,
// document as $document,
// XMLHttpRequest as $XMLHttpRequest,
// location as $location,
// };
export const $window = isMini ? miniWindow : window;
export const $XMLHttpRequest = isMini ? XMLHttpRequest: window.XMLHttpRequest;
export const $location = isMini ? location : window.location;
export { registerCanvas, registerCanvas2D } from './register'; export { registerCanvas, registerCanvas2D } from './register';

View File

@ -1,4 +1,5 @@
// @ts-nocheck // @ts-nocheck
import { globalWindow } from './global';
export const isMiniAli = export const isMiniAli =
// @ts-ignore // @ts-ignore
typeof my !== 'undefined' && !!my && typeof my.showToast === 'function'; typeof my !== 'undefined' && !!my && typeof my.showToast === 'function';
@ -13,7 +14,7 @@ if (isMiniAli) {
} else { } else {
const browser = { const browser = {
versions: (() => { versions: (() => {
const u = window.navigator.userAgent; const u = globalWindow.navigator.userAgent;
return { return {
trident: u.indexOf('Trident') > -1, // IE内核 trident: u.indexOf('Trident') > -1, // IE内核
presto: u.indexOf('Presto') > -1, // opera内核 presto: u.indexOf('Presto') > -1, // opera内核
@ -30,7 +31,7 @@ if (isMiniAli) {
}; };
})(), })(),
language: ( language: (
window.navigator.browserLanguage || window.navigator.language globalWindow.navigator.browserLanguage || globalWindow.navigator.language
).toLowerCase(), ).toLowerCase(),
}; };
if (browser.versions.android) { if (browser.versions.android) {
@ -58,7 +59,7 @@ if (isMiniAli) {
} else if (browser.versions.qq) { } else if (browser.versions.qq) {
platform = 'qq'; platform = 'qq';
} }
system = window.navigator.userAgent; system = globalWindow.navigator.userAgent;
language = browser.language; language = browser.language;
} }

View File

@ -1,4 +1,5 @@
// @ts-nocheck // @ts-nocheck
import { globalWindow } from './global';
// 判断时候是支付宝小程序环境 // 判断时候是支付宝小程序环境
export const isMiniAli = export const isMiniAli =
// @ts-ignore // @ts-ignore
@ -14,7 +15,7 @@ if (isMiniAli) {
windowWidth = myOptions.windowWidth; windowWidth = myOptions.windowWidth;
windowHeight = myOptions.windowHeight; windowHeight = myOptions.windowHeight;
} else { } else {
const { innerWidth, innerHeight } = window; const { innerWidth, innerHeight } = globalWindow;
screenWidth = innerWidth; screenWidth = innerWidth;
screenHeight = innerHeight; screenHeight = innerHeight;
windowWidth = innerWidth; windowWidth = innerWidth;

View File

@ -0,0 +1,148 @@
import { IConfig, SingleSequentialColorScale } from '@antv/dipper';
import { CityList } from './mock';
export const config: Partial<IConfig> = {
viewData: {
global: {
filterData: [],
sceneCode: 'iot_terminal_dominant',
areaCode: '330100',
view: 'task',
},
widgets: {
citySelect: {
options: CityList,
value: [330000, 330100],
},
},
},
headerbar: {
display: true,
logo: {
display: true,
value:
'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*ObVJT4IxmlkAAAAAAAAAAAAAARQnAQ',
style: {
height: '24px',
width: '24px',
},
},
title: {
value: '区代指挥中心',
display: true,
},
children: [
{
display: true,
position: 'left',
title: '选择城市',
type: 'citySelect',
event: {
actionType: 'map',
action: 'queryArea',
},
},
{
display: true,
options: [
{
label: '热区分析',
value: 'hotspot',
},
{
label: '任务管理',
value: 'task',
},
],
position: 'center',
type: 'navibar',
},
{
display: false,
position: 'right',
type: 'publishbar',
event: {
actionType: 'map',
action: 'publish',
},
},
],
},
panel: {
display: true,
enableToggle: true,
defaultTitle: '所有网格',
opened: true,
width: 360,
position: 'right',
children: [
{
type: 'siderbartabcontent',
title: '所有网格',
children: [
{
display: true,
type: 'mesh_indicator',
title: '数据查看',
},
{
type: 'total_data_panel',
title: '地图面板',
},
],
},
],
},
toolbar: {
display: false,
children: [],
},
map: {
zoom: 10,
center: [120.153576, 30.287459],
pitch: 0,
style: 'normal',
},
controls: [
{
display: true,
position: 'topleft',
type: 'mapStyle',
title: '地图样式',
},
],
defaultcontrols: [
{
type: 'zoom',
position: 'bottomright',
display: true,
},
{
type: 'scale',
position: 'bottomleft',
display: true,
},
],
popup: {
enable: false,
},
layers: [
{
type: 'gridLayer',
options: {
label: {
field: 'name',
size: 12,
color: '#000',
},
fill: {
field: 'unit_price',
color: SingleSequentialColorScale.Blue,
bandNum: 5,
scale: 'quantile',
unknownName: '无类型',
},
},
},
],
legends: [],
};

View File

@ -0,0 +1,532 @@
export const geojson = [
{
type: 'Feature',
properties: {
label: 'A类区域',
value: 'A',
featureId: '2021102300040027',
id: '2021102300040027',
name: '哈哈6666',
groupId: '2021102300073562',
canvasId: '2021102300077947',
creator: '285869',
modifier: 'WB904416',
gmtCreate: '2021-10-23T13:23:53.000+00:00',
gmtModified: '2021-10-29T08:43:06.000+00:00',
status: 1,
bizId: 'ALGO13301000000030038b',
source: 'INIT',
extInfo: {
area_centroid: '[120.200270,30.137812]',
},
},
geometry: {
type: 'Polygon',
coordinates: [
[
[120.147844, 30.143857],
[120.146688, 30.144529],
[120.145292, 30.145769],
[120.14333, 30.146841],
[120.138229, 30.153274],
[120.133322, 30.160392],
[120.132625, 30.161615],
[120.135188, 30.16281],
[120.136067, 30.163429],
[120.137014, 30.164436],
[120.138875, 30.167409],
[120.139576, 30.168271],
[120.140893, 30.169368],
[120.141752, 30.169944],
[120.144082, 30.170827],
[120.147209, 30.171816],
[120.151231, 30.172756],
[120.154113, 30.173337],
[120.155476, 30.173477],
[120.158666, 30.173408],
[120.158813, 30.173182],
[120.167716, 30.173249],
[120.167809, 30.173079],
[120.167644, 30.172555],
[120.167663, 30.172204],
[120.168217, 30.171148],
[120.168583, 30.170715],
[120.168799, 30.169991],
[120.16937, 30.169203],
[120.168394, 30.168113],
[120.167832, 30.167112],
[120.170001, 30.162286],
[120.170393, 30.161163],
[120.170857, 30.160363],
[120.171268, 30.159909],
[120.171843, 30.159472],
[120.172585, 30.159084],
[120.173472, 30.158806],
[120.176516, 30.158457],
[120.178244, 30.158018],
[120.181234, 30.156641],
[120.182546, 30.156143],
[120.187335, 30.155265],
[120.188246, 30.155308],
[120.188949, 30.155505],
[120.189517, 30.155768],
[120.190041, 30.156122],
[120.191852, 30.157747],
[120.192457, 30.158198],
[120.199627, 30.161976],
[120.200393, 30.161113],
[120.201372, 30.160261],
[120.204072, 30.158385],
[120.204474, 30.157992],
[120.205018, 30.15764],
[120.205398, 30.157546],
[120.205887, 30.157658],
[120.205706, 30.15851],
[120.206192, 30.158863],
[120.206058, 30.159513],
[120.206121, 30.159901],
[120.207273, 30.160486],
[120.208006, 30.160419],
[120.208488, 30.159493],
[120.208835, 30.158228],
[120.208544, 30.157534],
[120.206494, 30.157128],
[120.207878, 30.156136],
[120.208276, 30.156082],
[120.208298, 30.156518],
[120.209071, 30.157141],
[120.210222, 30.156577],
[120.210388, 30.157044],
[120.210978, 30.157462],
[120.212571, 30.158131],
[120.212937, 30.158078],
[120.213941, 30.157481],
[120.214887, 30.159206],
[120.214888, 30.160837],
[120.215479, 30.161676],
[120.215645, 30.162161],
[120.215948, 30.162305],
[120.218933, 30.162964],
[120.21947, 30.162984],
[120.221036, 30.16208],
[120.221542, 30.161941],
[120.221799, 30.162783],
[120.222203, 30.163521],
[120.222931, 30.164169],
[120.225012, 30.165453],
[120.225443, 30.165901],
[120.226118, 30.16827],
[120.226124, 30.168557],
[120.225875, 30.168755],
[120.226207, 30.170185],
[120.226446, 30.170469],
[120.226639, 30.170573],
[120.227512, 30.170626],
[120.227522, 30.171242],
[120.227796, 30.171909],
[120.229737, 30.172137],
[120.229916, 30.171461],
[120.23, 30.170618],
[120.230569, 30.170018],
[120.233933, 30.169673],
[120.23455, 30.165985],
[120.234458, 30.164828],
[120.234558, 30.162136],
[120.234676, 30.16115],
[120.235118, 30.159612],
[120.235576, 30.158653],
[120.235617, 30.15825],
[120.236053, 30.157277],
[120.235382, 30.157034],
[120.235301, 30.156572],
[120.23496, 30.156239],
[120.234249, 30.155793],
[120.233696, 30.155684],
[120.2332, 30.15573],
[120.232496, 30.155586],
[120.23286, 30.154907],
[120.233495, 30.154176],
[120.232856, 30.153878],
[120.232683, 30.153433],
[120.232879, 30.153278],
[120.232872, 30.152843],
[120.232724, 30.152397],
[120.23234, 30.151877],
[120.231848, 30.151555],
[120.231595, 30.151273],
[120.231185, 30.150624],
[120.230557, 30.150187],
[120.230053, 30.149345],
[120.229281, 30.148778],
[120.228917, 30.148747],
[120.228421, 30.14842],
[120.228184, 30.147479],
[120.226923, 30.147425],
[120.226418, 30.147328],
[120.225486, 30.147388],
[120.226496, 30.146217],
[120.225966, 30.145733],
[120.225583, 30.145521],
[120.225428, 30.14502],
[120.224312, 30.14501],
[120.223858, 30.144788],
[120.223652, 30.144476],
[120.223478, 30.144345],
[120.222825, 30.14418],
[120.222569, 30.14428],
[120.221885, 30.144124],
[120.221396, 30.144273],
[120.220971, 30.1447],
[120.220603, 30.144724],
[120.220295, 30.144623],
[120.220024, 30.144701],
[120.219842, 30.144619],
[120.219654, 30.144693],
[120.219384, 30.144654],
[120.218498, 30.144158],
[120.217793, 30.143521],
[120.217119, 30.143362],
[120.216758, 30.14301],
[120.216674, 30.14272],
[120.216732, 30.142301],
[120.217668, 30.141623],
[120.218151, 30.141431],
[120.220282, 30.139534],
[120.220356, 30.140206],
[120.220619, 30.140315],
[120.220731, 30.140486],
[120.221293, 30.140608],
[120.221736, 30.140936],
[120.221342, 30.141563],
[120.22151, 30.141869],
[120.220996, 30.142466],
[120.22197, 30.142837],
[120.223564, 30.142785],
[120.223847, 30.142422],
[120.223877, 30.142059],
[120.223806, 30.141797],
[120.221855, 30.139726],
[120.2231, 30.140085],
[120.223641, 30.140564],
[120.223948, 30.141129],
[120.223997, 30.141173],
[120.224257, 30.141696],
[120.224258, 30.142105],
[120.224381, 30.142548],
[120.224535, 30.142716],
[120.224726, 30.143188],
[120.2255, 30.143728],
[120.226119, 30.144357],
[120.226434, 30.14455],
[120.228071, 30.144609],
[120.229719, 30.144786],
[120.229908, 30.14485],
[120.23018, 30.145286],
[120.230407, 30.145484],
[120.231237, 30.145853],
[120.231382, 30.146076],
[120.231631, 30.146207],
[120.232288, 30.146322],
[120.233052, 30.146667],
[120.23368, 30.14734],
[120.233786, 30.147891],
[120.234623, 30.14832],
[120.234839, 30.148646],
[120.235314, 30.149087],
[120.23548, 30.149626],
[120.235721, 30.149938],
[120.236457, 30.150391],
[120.23716, 30.150539],
[120.237485, 30.150801],
[120.23803, 30.151477],
[120.239139, 30.152535],
[120.23946, 30.153088],
[120.240229, 30.153121],
[120.240626, 30.152351],
[120.241359, 30.151459],
[120.242314, 30.150725],
[120.245302, 30.148847],
[120.24628, 30.147889],
[120.247034, 30.146693],
[120.247423, 30.145397],
[120.247992, 30.145405],
[120.248012, 30.143993],
[120.247725, 30.142724],
[120.247166, 30.142646],
[120.242305, 30.130879],
[120.241721, 30.130596],
[120.240334, 30.12946],
[120.239997, 30.129042],
[120.238317, 30.125574],
[120.237006, 30.123431],
[120.236783, 30.122886],
[120.235868, 30.122206],
[120.236571, 30.122049],
[120.23665, 30.121468],
[120.235894, 30.119696],
[120.235675, 30.118672],
[120.235701, 30.117587],
[120.235629, 30.11654],
[120.235379, 30.116023],
[120.233483, 30.116034],
[120.233123, 30.116188],
[120.232895, 30.116075],
[120.231727, 30.115965],
[120.230487, 30.116072],
[120.230015, 30.116313],
[120.229969, 30.115245],
[120.229787, 30.11438],
[120.229945, 30.113327],
[120.232144, 30.112345],
[120.233516, 30.111985],
[120.235989, 30.111814],
[120.234895, 30.107582],
[120.234778, 30.106555],
[120.234895, 30.104915],
[120.230596, 30.103151],
[120.2278, 30.101876],
[120.226383, 30.101599],
[120.222325, 30.1023],
[120.2147, 30.103149],
[120.212667, 30.103445],
[120.21219, 30.10365],
[120.211945, 30.103932],
[120.210495, 30.107288],
[120.209991, 30.108123],
[120.209384, 30.108529],
[120.208824, 30.10864],
[120.208085, 30.108556],
[120.205857, 30.107717],
[120.205393, 30.107652],
[120.204861, 30.107693],
[120.201864, 30.109287],
[120.20089, 30.109712],
[120.199973, 30.109881],
[120.193121, 30.109323],
[120.191151, 30.109647],
[120.190646, 30.109835],
[120.190888, 30.111217],
[120.190796, 30.111259],
[120.190086, 30.109884],
[120.189525, 30.109667],
[120.18587, 30.107744],
[120.185064, 30.109015],
[120.183326, 30.113489],
[120.18151, 30.11587],
[120.180172, 30.11726],
[120.177758, 30.119219],
[120.174527, 30.121509],
[120.173028, 30.122505],
[120.172232, 30.122899],
[120.171456, 30.123117],
[120.170975, 30.12361],
[120.170378, 30.12466],
[120.166094, 30.128398],
[120.165454, 30.129692],
[120.164526, 30.130852],
[120.163489, 30.131706],
[120.162161, 30.132556],
[120.160762, 30.133219],
[120.158745, 30.134854],
[120.156354, 30.137038],
[120.154387, 30.138586],
[120.152292, 30.139893],
[120.150055, 30.14083],
[120.149208, 30.142005],
[120.148552, 30.143085],
[120.147844, 30.143857],
],
],
},
},
{
type: 'Feature',
properties: {
label: 'B类区域',
value: 'B',
featureId: '2021102300040027',
id: '2021102300040027',
name: '于争光',
groupId: '2021102300073562',
canvasId: '2021102300077947',
creator: '285869',
modifier: 'WB904416',
gmtCreate: '2021-10-23T13:23:53.000+00:00',
gmtModified: '2021-10-29T08:43:06.000+00:00',
status: 1,
bizId: 'ALGO13301000000030038b',
source: 'INIT',
extInfo: {
area_centroid: '[120.200270,30.137812]',
},
},
geometry: {
type: 'Polygon',
coordinates: [
[
[120.1636505126953, 30.24631485403797],
[120.17704010009766, 30.22970466206658],
[120.19214630126953, 30.243942141326617],
[120.1636505126953, 30.24631485403797],
],
],
},
},
{
type: 'Feature',
properties: {
label: 'C类区域',
value: 'C',
featureId: '2021102300040027',
id: '2021102300040027',
name: 'ecnevnevnec',
groupId: '2021102300073562',
canvasId: '2021102300077947',
creator: '285869',
modifier: 'WB904416',
gmtCreate: '2021-10-23T13:23:53.000+00:00',
gmtModified: '2021-10-29T08:43:06.000+00:00',
status: 1,
bizId: 'ALGO13301000000030038b',
source: 'INIT',
extInfo: {
area_centroid: '[120.200270,30.137812]',
},
},
geometry: {
type: 'Polygon',
coordinates: [
[
[120.09017944335938, 30.224958377428475],
[120.08949279785156, 30.18994745521063],
[120.14751434326172, 30.189353942421295],
[120.14854431152342, 30.22466172703242],
[120.09017944335938, 30.224958377428475],
],
],
},
},
];
export const CityList = [
{
value: '330000',
areaLevel: 'province',
label: '浙江省',
children: [
{
value: '330100',
areaLevel: 'city',
label: '杭州市',
children: [],
},
],
},
{
value: '110000',
areaLevel: 'province',
label: '北京市',
children: [
{
value: '110000',
areaLevel: 'city',
label: '北京市',
children: [],
},
],
},
{
value: '120000',
areaLevel: 'province',
label: '天津市',
children: [
{
value: '120000',
areaLevel: 'city',
label: '天津市',
children: [],
},
],
},
{
value: '310000',
areaLevel: 'province',
label: '上海市',
children: [
{
value: '310000',
areaLevel: 'province',
label: '上海市',
children: [],
},
],
},
{
value: '440000',
areaLevel: 'province',
label: '广东省',
children: [
{
value: '440100',
areaLevel: 'city',
label: '广州市',
children: [],
},
{
value: '440300',
areaLevel: 'city',
label: '深圳市',
children: [],
},
{
value: '440400',
areaLevel: 'city',
label: '珠海市',
children: [],
},
{
value: '440600',
areaLevel: 'city',
label: '佛山市',
children: [],
},
{
value: '441300',
areaLevel: 'city',
label: '惠州市',
children: [],
},
{
value: '441900',
areaLevel: 'city',
label: '东莞市',
children: [],
},
{
value: '442000',
areaLevel: 'city',
label: '中山市',
children: [],
},
],
},
{
value: '130000',
areaLevel: 'province',
label: '河北省',
children: [
{
value: '130100',
areaLevel: 'city',
label: '石家庄市',
children: [],
},
{
value: '131000',
areaLevel: 'city',
label: '廊坊市',
children: [],
},
],
},
];

View File

@ -0,0 +1,27 @@
import { initWidgets } from './widgets';
import React, { useEffect, useState } from 'react';
import { config } from './configs/config';
import { DipperContainer, IConfig } from '@antv/dipper';
interface IInitData {
areaVOList: any[];
sceneCode: string;
areaCode: string;
filterData: any[];
}
export default function RumbMap() {
const [mapConfig, setMapConfig] = useState<IConfig<IInitData>>();
// 初始化相关数据
useEffect(() => {
initWidgets();
setMapConfig(config);
}, []);
return (
<div style={{ height: '100%', width:'100%', position:'absolute'}}>
<DipperContainer<IInitData> cfg={mapConfig!} />
</div>
);
}

View File

@ -0,0 +1,104 @@
import {
useSceneService,
useConfigService,
LayerGroupEventEnum,
useLayerService,
} from '@antv/dipper';
import React, { useEffect, useMemo, useState } from 'react';
import { GridLayerGroup } from '@antv/dipper';
const formatLegend = (data: any[]) => {
return data.map((item) => {
if (Array.isArray(item.value)) {
return {
...item,
value: item.value.map((v) => v.toFixed(2)),
};
} else {
return {
...item,
value: item.value.toFixed(2),
};
}
});
};
export function GridLayer() {
const { layerService } = useLayerService();
const { sceneService } = useSceneService();
const { globalConfig, updateLegend, getWidgetsValue } = useConfigService();
const { layers } = globalConfig;
const [gridLayer, setGridLayer] = useState<GridLayerGroup>();
const cityValue = getWidgetsValue('citySelect');
const [geoData, setGeoData] = useState();
const layerProps = useMemo(() => {
return layers.find((item: any) => item.type === 'gridLayer');
}, [layers]);
const updateLayerLegend = (items: any[]) => {
updateLegend('gridLayerLegend', {
type: 'discreteColor',
display: true,
position: 'bottomleft',
options: {
targetName: '区域类型',
unkownName: layerProps.options.unkownName,
items,
},
});
};
// 根据筛选器条件请求数据
useEffect(() => {
// 可以根据业务需求配置接口
fetch(
`https://gw.alipayobjects.com/os/antvdemo/assets/dipper-city/${cityValue[1]}.json`,
)
.then((res) => res.json())
.then((data) => {
setGeoData(data);
});
// 切换城市 高德地图方法
sceneService.getScene().map?.setCity(cityValue[1]);
}, [JSON.stringify(cityValue)]);
useEffect(() => {
if (!geoData) {
return;
}
if (gridLayer) {
gridLayer.setData(geoData);
return;
}
const layer = new GridLayerGroup({
name: 'grid',
geodata: geoData,
options: layerProps.options,
});
layerService.addLayer(layer);
layer.on(LayerGroupEventEnum.DATAUPDATE, () => {
layer.getLegendItem().map((item) => {
if (Array.isArray(item.value)) {
return {
...item,
value: item.value.map((v) => v.toFixed(2)),
};
} else {
return {
...item,
value: item.value.toFixed(2),
};
}
});
updateLayerLegend(formatLegend(layer.getLegendItem()));
});
// 更新图例
updateLayerLegend(formatLegend(layer.getLegendItem()));
setGridLayer(layer);
}, [geoData]);
return <></>;
}

View File

@ -0,0 +1,20 @@
import { registerWidget } from '@antv/dipper-core';
import {
CitySelect,
SiderBar,
NavBar,
ClassifyColor,
DiscreteColor,
} from '@antv/dipper-widgets';
import { GridLayer } from './GridLayer';
import { MapStyle } from '@antv/dipper-widgets';
export function initWidgets() {
registerWidget('citySelect', CitySelect);
registerWidget('siderbartabcontent', SiderBar);
registerWidget('navibar', NavBar);
registerWidget('gridLayer', GridLayer);
registerWidget('classifyColor', ClassifyColor);
registerWidget('discreteColor', DiscreteColor);
registerWidget('mapStyle', MapStyle);
}

7
site/pages/apps/home.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
const Page: React.FC & { noLayout: boolean } = () => <h1></h1>;
Page.noLayout = true;
export default Page;

2
site/pages/map.en.tsx Normal file
View File

@ -0,0 +1,2 @@
import Index from './map.zh';
export default Index;

8
site/pages/map.zh.tsx Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import Map from '../components/rumbling'
const Page: React.FC & { noLayout: boolean } = () => <Map/>;
Page.noLayout = true;
export default Page;