From 5403147408d3043e0f42662057e029dfe72ab1a1 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Mon, 8 Nov 2021 19:49:43 +0800 Subject: [PATCH] Feat dipper demo (#820) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 添加dipper 文档 * fix: gatsyby 配置 * fix: add map.en * feat: add global/window adapter - gastby 服务端渲染修复 Co-authored-by: 2912401452 <2912401452@qq.com> --- gatsby-config.js | 1 + gatsby-node.js | 1 + package.json | 4 +- packages/core/package.json | 2 +- .../src/mini-adapter/HTMLCanvasElement.ts | 2 - .../src/mini-adapter/devicePixelRatio.ts | 3 +- packages/utils/src/mini-adapter/global.ts | 61 ++ packages/utils/src/mini-adapter/index.ts | 43 +- packages/utils/src/mini-adapter/navigator.ts | 7 +- packages/utils/src/mini-adapter/screen.ts | 3 +- site/components/rumbling/configs/config.ts | 148 +++++ site/components/rumbling/configs/mock.ts | 532 ++++++++++++++++++ site/components/rumbling/index.tsx | 27 + .../components/rumbling/widgets/GridLayer.tsx | 104 ++++ site/components/rumbling/widgets/index.ts | 20 + site/pages/apps/home.tsx | 7 + site/pages/map.en.tsx | 2 + site/pages/map.zh.tsx | 8 + 18 files changed, 928 insertions(+), 47 deletions(-) create mode 100644 packages/utils/src/mini-adapter/global.ts create mode 100644 site/components/rumbling/configs/config.ts create mode 100644 site/components/rumbling/configs/mock.ts create mode 100644 site/components/rumbling/index.tsx create mode 100644 site/components/rumbling/widgets/GridLayer.tsx create mode 100644 site/components/rumbling/widgets/index.ts create mode 100644 site/pages/apps/home.tsx create mode 100644 site/pages/map.en.tsx create mode 100644 site/pages/map.zh.tsx diff --git a/gatsby-config.js b/gatsby-config.js index a48dc53ee5..5f27c9ffa6 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = { ], siteMetadata: { title: 'L7', + isAntVSite: false, description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework', siteUrl: 'https://l7.antv.vision', githubUrl: 'https://github.com/antvis/L7', diff --git a/gatsby-node.js b/gatsby-node.js index a92bc22a0e..7b14ed8e8b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -12,6 +12,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => { ...config.resolve.alias, '@antv/l7': path.resolve(__dirname, 'packages/l7/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-component': path.resolve(__dirname, 'packages/component/src'), '@antv/l7-layers': path.resolve(__dirname, 'packages/layers/src'), diff --git a/package.json b/package.json index 9d76f99e58..d024a39e03 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "url": "https://github.com/antvis/L7" }, "devDependencies": { + "@antv/dipper": "^0.0.5", + "@antv/dipper-widgets": "^0.0.5", "@antv/g2": "^3.5.9", "@antv/gatsby-theme-antv": "^1.1.1", "@antv/l7-district": "^2.3.9", @@ -31,7 +33,7 @@ "@rollup/plugin-json": "^4.0.0", "@rollup/plugin-node-resolve": "^6.0.0", "@storybook/react": "^6.2.2", - "@turf/turf": "^5.1.6", + "@turf/turf": "^6.5.0", "@types/dat.gui": "^0.7.1", "@types/enzyme": "^3.1.14", "@types/enzyme-adapter-react-16": "^1.0.3", diff --git a/packages/core/package.json b/packages/core/package.json index 2a8a02af07..ffe1cc33de 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -33,7 +33,7 @@ "inversify": "^5.0.1", "inversify-inject-decorators": "^3.1.0", "l7-tiny-sdf": "^0.0.2", - "l7hammerjs": "^0.0.5", + "l7hammerjs": "^0.0.6", "lodash": "^4.17.15", "reflect-metadata": "^0.1.13", "viewport-mercator-project": "^6.2.1" diff --git a/packages/utils/src/mini-adapter/HTMLCanvasElement.ts b/packages/utils/src/mini-adapter/HTMLCanvasElement.ts index cf51698d34..fd2577325f 100644 --- a/packages/utils/src/mini-adapter/HTMLCanvasElement.ts +++ b/packages/utils/src/mini-adapter/HTMLCanvasElement.ts @@ -1,3 +1 @@ -// @ts-nocheck -// tslint:disable export const HTMLCanvasElement = Object; diff --git a/packages/utils/src/mini-adapter/devicePixelRatio.ts b/packages/utils/src/mini-adapter/devicePixelRatio.ts index 5f7687cc46..fdc609558d 100644 --- a/packages/utils/src/mini-adapter/devicePixelRatio.ts +++ b/packages/utils/src/mini-adapter/devicePixelRatio.ts @@ -1,7 +1,8 @@ // @ts-nocheck +import { globalWindow } from './global'; export const isMiniAli = // @ts-ignore typeof my !== 'undefined' && !!my && typeof my.showToast === 'function'; export default !isMiniAli - ? devicePixelRatio + ? globalWindow.devicePixelRatio : (my.getSystemInfoSync().pixelRatio as number); diff --git a/packages/utils/src/mini-adapter/global.ts b/packages/utils/src/mini-adapter/global.ts new file mode 100644 index 0000000000..bcea5cc481 --- /dev/null +++ b/packages/utils/src/mini-adapter/global.ts @@ -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 }; diff --git a/packages/utils/src/mini-adapter/index.ts b/packages/utils/src/mini-adapter/index.ts index 24bacfe84e..b3ae9af75c 100644 --- a/packages/utils/src/mini-adapter/index.ts +++ b/packages/utils/src/mini-adapter/index.ts @@ -27,6 +27,8 @@ import { WebGLRenderingContext } from './WebGL'; import { WebGL2RenderingContext } from './WebGL2'; import { XMLHttpRequest } from './XMLHttpRequest'; +import { globalWindow } from './global' + // 判断时候是支付宝小程序环境 export const isMiniAli = // @ts-ignore @@ -78,44 +80,9 @@ export const miniWindow = { clearInterval: clearInterval } as Window & typeof globalThis; -// export { -// btoa, -// URL, -// 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 const $window = isMini ? miniWindow : globalWindow; +export const $XMLHttpRequest = isMini ? XMLHttpRequest: globalWindow.XMLHttpRequest; +export const $location = isMini ? location : globalWindow.location; export { registerCanvas, registerCanvas2D } from './register'; diff --git a/packages/utils/src/mini-adapter/navigator.ts b/packages/utils/src/mini-adapter/navigator.ts index 646c3ca6c5..c2bd48680d 100755 --- a/packages/utils/src/mini-adapter/navigator.ts +++ b/packages/utils/src/mini-adapter/navigator.ts @@ -1,4 +1,5 @@ // @ts-nocheck +import { globalWindow } from './global'; export const isMiniAli = // @ts-ignore typeof my !== 'undefined' && !!my && typeof my.showToast === 'function'; @@ -13,7 +14,7 @@ if (isMiniAli) { } else { const browser = { versions: (() => { - const u = window.navigator.userAgent; + const u = globalWindow.navigator.userAgent; return { trident: u.indexOf('Trident') > -1, // IE内核 presto: u.indexOf('Presto') > -1, // opera内核 @@ -30,7 +31,7 @@ if (isMiniAli) { }; })(), language: ( - window.navigator.browserLanguage || window.navigator.language + globalWindow.navigator.browserLanguage || globalWindow.navigator.language ).toLowerCase(), }; if (browser.versions.android) { @@ -58,7 +59,7 @@ if (isMiniAli) { } else if (browser.versions.qq) { platform = 'qq'; } - system = window.navigator.userAgent; + system = globalWindow.navigator.userAgent; language = browser.language; } diff --git a/packages/utils/src/mini-adapter/screen.ts b/packages/utils/src/mini-adapter/screen.ts index e1c0cce181..e3b4da97c5 100644 --- a/packages/utils/src/mini-adapter/screen.ts +++ b/packages/utils/src/mini-adapter/screen.ts @@ -1,4 +1,5 @@ // @ts-nocheck +import { globalWindow } from './global'; // 判断时候是支付宝小程序环境 export const isMiniAli = // @ts-ignore @@ -14,7 +15,7 @@ if (isMiniAli) { windowWidth = myOptions.windowWidth; windowHeight = myOptions.windowHeight; } else { - const { innerWidth, innerHeight } = window; + const { innerWidth, innerHeight } = globalWindow; screenWidth = innerWidth; screenHeight = innerHeight; windowWidth = innerWidth; diff --git a/site/components/rumbling/configs/config.ts b/site/components/rumbling/configs/config.ts new file mode 100644 index 0000000000..7624c934aa --- /dev/null +++ b/site/components/rumbling/configs/config.ts @@ -0,0 +1,148 @@ +import { IConfig, SingleSequentialColorScale } from '@antv/dipper'; +import { CityList } from './mock'; +export const config: Partial = { + 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: [], +}; diff --git a/site/components/rumbling/configs/mock.ts b/site/components/rumbling/configs/mock.ts new file mode 100644 index 0000000000..584b3b38cd --- /dev/null +++ b/site/components/rumbling/configs/mock.ts @@ -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: [], + }, + ], + }, +]; diff --git a/site/components/rumbling/index.tsx b/site/components/rumbling/index.tsx new file mode 100644 index 0000000000..076ee90d38 --- /dev/null +++ b/site/components/rumbling/index.tsx @@ -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>(); + // 初始化相关数据 + + useEffect(() => { + initWidgets(); + setMapConfig(config); + }, []); + + return ( +
+ cfg={mapConfig!} /> +
+ ); +} diff --git a/site/components/rumbling/widgets/GridLayer.tsx b/site/components/rumbling/widgets/GridLayer.tsx new file mode 100644 index 0000000000..138a2a6b67 --- /dev/null +++ b/site/components/rumbling/widgets/GridLayer.tsx @@ -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(); + 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 <>; +} diff --git a/site/components/rumbling/widgets/index.ts b/site/components/rumbling/widgets/index.ts new file mode 100644 index 0000000000..a11dfaa89f --- /dev/null +++ b/site/components/rumbling/widgets/index.ts @@ -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); +} diff --git a/site/pages/apps/home.tsx b/site/pages/apps/home.tsx new file mode 100644 index 0000000000..0cff196ba5 --- /dev/null +++ b/site/pages/apps/home.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Page: React.FC & { noLayout: boolean } = () =>

地图

; + +Page.noLayout = true; + +export default Page; \ No newline at end of file diff --git a/site/pages/map.en.tsx b/site/pages/map.en.tsx new file mode 100644 index 0000000000..72af948dfc --- /dev/null +++ b/site/pages/map.en.tsx @@ -0,0 +1,2 @@ +import Index from './map.zh'; +export default Index; diff --git a/site/pages/map.zh.tsx b/site/pages/map.zh.tsx new file mode 100644 index 0000000000..e3df882ff9 --- /dev/null +++ b/site/pages/map.zh.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import Map from '../components/rumbling' + +const Page: React.FC & { noLayout: boolean } = () => ; + +Page.noLayout = true; + +export default Page; \ No newline at end of file