mirror of https://gitee.com/antv-l7/antv-l7
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
GitHub
parent
327ef700d5
commit
5403147408
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
// @ts-nocheck
|
||||
// tslint:disable
|
||||
export const HTMLCanvasElement = Object;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
};
|
||||
|
|
@ -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: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 <></>;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
const Page: React.FC & { noLayout: boolean } = () => <h1>地图</h1>;
|
||||
|
||||
Page.noLayout = true;
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import Index from './map.zh';
|
||||
export default Index;
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue