@next-bricks/data-view 1.10.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chunks/china-map-chart.52890013.js","mappings":"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","sources":["webpack:///./src/china-map-chart/index.tsx","webpack:///./src/shared/useContainerScale.ts","webpack:///./src/china-map-chart/styles.shadow.css"],"sourcesContent":["import React, { useEffect, useRef, useState, CSSProperties } from \"react\";\nimport { EventEmitter, createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport {\n Scene,\n PolygonLayer,\n LineLayer,\n Marker,\n ImageLayer,\n type ILayer,\n type Point,\n} from \"@antv/l7\";\nimport { Map } from \"@antv/l7-maps\";\nimport { cloneDeep, isEmpty, isEqual, toNumber } from \"lodash\";\nimport defaultSvg from \"./assets/default.svg?url\";\nimport selectedSvg from \"./assets/selected.svg?url\";\nimport chinaPng from \"./assets/china.png\";\nimport texturePng from \"./assets/texture.png\";\nimport styleText from \"./styles.shadow.css\";\nimport { useContainerScale } from \"../shared/useContainerScale\";\n\nconst { defineElement, property, event } = createDecorators();\n\nconst BASE_WIDTH = 825;\nconst BASE_HEIGHT = 600;\n\ninterface FeatureCollection {\n type: \"FeatureCollection\";\n features: Feature[];\n}\n\ninterface Feature {\n type: \"Feature\";\n id?: string;\n properties: {\n name: string;\n center?: Point;\n province_adcode: number;\n province: string;\n };\n geometry: Polygon | MultiPolygon;\n}\n\ninterface Polygon {\n type: \"Polygon\";\n coordinates: Point[][];\n}\n\ninterface MultiPolygon {\n type: \"MultiPolygon\";\n coordinates: Point[][][];\n}\n\ninterface Area {\n name: string;\n level: \"country\" | \"province\" | \"city\" | \"district\";\n adcode: number;\n lng: number;\n lat: number;\n parent: number;\n}\n\n/**\n * 中国地图图表构件，可以显示省级指标数据\n */\nexport\n@defineElement(\"data-view.china-map-chart\", {\n styleTexts: [styleText],\n})\nclass ChinaMapChart extends ReactNextElement {\n /**\n * 省份名称，例如“广东”。如果设置，则只显示该省份的地图，否则显示全国地图\n */\n @property()\n accessor province: string | undefined;\n\n /**\n * 数据源\n */\n @property({ attribute: false })\n accessor dataSource: DataSource[] | undefined;\n\n /**\n * 描述内容样式\n */\n @property({ attribute: false })\n accessor detailContentStyle: CSSProperties | undefined;\n\n /**\n * 是否铺满容器\n *\n * 注意：该属性不同时兼容 detail 插槽\n */\n @property({ type: Boolean })\n accessor fillContainer: boolean | undefined;\n\n /**\n * 当提示可见性开始变化时触发\n * @detail 当前是否可见\n */\n @event({ type: \"detail.open.change\" })\n accessor #openChangeEvent!: EventEmitter<{\n open: boolean;\n data: Record<string, any>;\n }>;\n #handleOpenChange = (open: boolean, data: Record<string, any>): void => {\n this.#openChangeEvent.emit({ open, data });\n };\n\n render() {\n return (\n <ChinaMapChartComponent\n root={this}\n province={this.province}\n dataSource={this.dataSource}\n onDetailOpenChange={this.#handleOpenChange}\n detailContentStyle={this.detailContentStyle}\n fillContainer={this.fillContainer}\n />\n );\n }\n}\n\ninterface DataSource {\n /** 省级行政区域名，例如：四川、北京 */\n city: string;\n detailDisplayLocation: \"pageCenter\" | \"textBottom\";\n text: string;\n [x: string]: any;\n}\n\nexport interface ChinaMapChartProps {\n root: HTMLElement;\n province?: string;\n onDetailOpenChange: (open: boolean, data: Record<string, any>) => void;\n dataSource: DataSource[];\n detailContentStyle?: CSSProperties;\n fillContainer?: boolean;\n // Define props here.\n}\n\nexport function ChinaMapChartComponent(props: ChinaMapChartProps) {\n const {\n root,\n province,\n onDetailOpenChange,\n dataSource = [],\n detailContentStyle = {},\n fillContainer,\n } = props;\n const mapRef = useRef<HTMLDivElement>();\n const slotRef = useRef<HTMLSlotElement>();\n const [showData, setShowData] = useState<DataSource>();\n const showDataRef = useRef<DataSource>();\n const [textPosition, setTextPosition] = useState<{\n left: string;\n top: string;\n }>();\n\n const scale = useContainerScale({\n width: BASE_WIDTH,\n height: BASE_HEIGHT,\n root,\n maxScale: 10,\n disabled: !fillContainer,\n });\n\n const textClick = (e: MouseEvent, data: any) => {\n e.stopPropagation();\n if (isEqual(data, showDataRef.current)) {\n setShowData(null);\n return;\n }\n setShowData(data);\n setTextPosition({\n left: `${toNumber((e.target as any).style.left.replace(\"px\", \"\")) + 24}px`,\n top: `${toNumber((e.target as any).style.top.replace(\"px\", \"\")) + 28}px`,\n });\n };\n useEffect(() => {\n const scene = new Scene({\n id: mapRef.current,\n logoVisible: false,\n map: new Map({\n // center: [90.268, 40.3628],\n pitch: 35,\n zoom: 1,\n }),\n });\n scene.setMapStatus({ doubleClickZoom: false, zoomEnable: false });\n const defaultImg = new Image();\n defaultImg.src = defaultSvg;\n\n const selectedImg = new Image();\n selectedImg.src = selectedSvg;\n\n scene.addImage(\"default\", defaultImg);\n scene.addImage(\"selected\", selectedImg);\n if (!province) {\n scene.addImage(\"chinaBg\", chinaPng);\n } else {\n scene.addImage(\"texture\", texturePng);\n }\n\n scene.on(\"loaded\", async () => {\n let data: FeatureCollection;\n let southSeaData: FeatureCollection;\n let matchedProvince: Area | undefined;\n let AreaList: Area[] | undefined;\n if (province) {\n const [CitiesImport, AreaListImport] = await Promise.all([\n import(\"./cities.json\"),\n import(\"./area-list.json\"),\n ]);\n const Cities = CitiesImport.default as unknown as FeatureCollection;\n AreaList = AreaListImport.default as unknown as Area[];\n matchedProvince = AreaList.find(\n (a) => a.level === \"province\" && a.name.includes(province)\n );\n\n if (!matchedProvince) {\n throw new Error(`没有找到省份：\"${province}\"`);\n }\n\n data = {\n type: \"FeatureCollection\",\n features: (Cities as FeatureCollection).features.filter(\n (f) => f.properties.province_adcode === matchedProvince.adcode\n ),\n };\n } else {\n const ChinaImport = await import(\"./map.json\");\n const CHINA = ChinaImport.default as unknown as FeatureCollection;\n data = {\n type: \"FeatureCollection\",\n features: (CHINA as unknown as FeatureCollection).features.slice(\n 0,\n CHINA.features.length - 2\n ),\n };\n southSeaData = {\n ...CHINA,\n features: CHINA.features.slice(\n CHINA.features.length - 2,\n CHINA.features.length\n ),\n };\n }\n\n const seventhPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n let labelDivideLng: number | undefined;\n // 根据坐标范围设置 3D 图层升起的高度\n let raisingHeightBase: number;\n if (province) {\n let top = Infinity;\n let left = Infinity;\n let bottom = -Infinity;\n let right = -Infinity;\n const points = data.features.flatMap(\n (f) =>\n f.geometry.coordinates.flat(\n f.geometry.type === \"MultiPolygon\" ? 2 : 1\n ) as Point[]\n );\n points.forEach(([lng, lat]) => {\n top = Math.min(top, lat);\n left = Math.min(left, lng);\n bottom = Math.max(bottom, lat);\n right = Math.max(right, lng);\n });\n const lngRange = right - left;\n const latRange = bottom - top;\n raisingHeightBase = Math.max(2000 * lngRange, 3000 * latRange);\n // 在经度范围的 3/4 处设置分界线，左边的文字向右排，右边的文字向左排\n labelDivideLng = left + (lngRange * 3) / 4;\n } else {\n raisingHeightBase = 100000;\n }\n\n seventhPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(84, 239, 241, 0.20)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -13 * raisingHeightBase,\n });\n\n const sixthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n sixthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(14, 11, 75, 0.58)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -11 * raisingHeightBase,\n });\n\n const fifthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n fifthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(190, 225, 226, 1)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -9 * raisingHeightBase,\n });\n const fourthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n fourthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(18, 26, 45, 1)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -7 * raisingHeightBase,\n });\n\n const thirdPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n thirdPolygonLayer\n .shape(\"extrude\")\n .color(\"#111D3C\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -5 * raisingHeightBase,\n });\n const secondPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n secondPolygonLayer\n .shape(\"extrude\")\n .color(\"#121A2D\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -3 * raisingHeightBase,\n });\n\n const firstPolygonLayer = new PolygonLayer({\n autoFit: true,\n }).source(data);\n\n firstPolygonLayer.shape(\"fill\").color(\"rgba(8, 77, 255, 0.60)\");\n // .select({\n // color: \"rgba(177, 254, 254, 1)\",\n // });//编排上层缩放会影响到高亮功能，还不知道怎么解决，暂时不实现。\n\n let chinaImgLayer: ILayer | undefined;\n if (!province) {\n chinaImgLayer = new ImageLayer({\n autoFit: false,\n zIndex: 1,\n }).source(chinaPng, {\n parser: {\n type: \"image\",\n extent: [73.33, 17.9, 134.85, 53.73],\n },\n });\n\n chinaImgLayer.shape(\"img\").style({\n opacity: 1,\n });\n }\n\n const fourthLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(43, 100, 255, 1)\")\n .size(1)\n .style({\n raisingHeight: -16 * raisingHeightBase,\n });\n\n const thirdLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(84, 239, 241, 1)\")\n .size(1)\n .style({\n raisingHeight: -12 * raisingHeightBase,\n });\n\n const secondLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(43, 100, 255, 1)\")\n .size(1)\n .style({\n raisingHeight: -6 * raisingHeightBase,\n });\n\n const firstLineLayer = new LineLayer({ zIndex: 2 })\n .source(data)\n .shape(\"line\")\n .color(\"#3DC6FF\")\n .size(1)\n .style({\n raisingHeight: 0,\n })\n .scale(\"density\", {\n type: \"quantile\",\n });\n\n // const hightLayer = new LineLayer({\n // zIndex: 10, // 设置显示层级\n // name: \"hightlight\",\n // })\n // .source({\n // type: \"FeatureCollection\",\n // features: [],\n // })\n // .shape(\"line\")\n // .size(2)\n // .color(\"rgba(177, 254, 254, 1)\")\n // .style({\n // opacity: 1,\n // });\n // const hightPolygonLayer = new PolygonLayer({zIndex: 10})\n // .source({\n // type: \"FeatureCollection\",\n // features: [],\n // })\n // .shape(\"fill\")\n // .color(\"rgba(177, 254, 254, 1)\")\n // .style({\n // heightfixed: true,\n // pickLight: true,\n // opacity: 1,\n // raisingHeight: 0,\n // }); //自定义选择高亮\n\n scene.addLayer(seventhPolygonLayer);\n // scene.addLayer(sixthPolygonLayer);\n // scene.addLayer(fifthPolygonLayer);\n // // scene.addLayer(fourthPolygonLayer);\n // scene.addLayer(thirdPolygonLayer);\n scene.addLayer(secondPolygonLayer);\n if (chinaImgLayer) {\n scene.addLayer(chinaImgLayer);\n }\n // scene.addLayer(hightLayer);\n // scene.addLayer(hightPolygonLayer);\n scene.addLayer(firstPolygonLayer);\n\n scene.addLayer(fourthLineLayer);\n scene.addLayer(thirdLineLayer);\n scene.addLayer(secondLineLayer);\n scene.addLayer(firstLineLayer);\n\n // firstPolygonLayer.on(\"click\", (e) => {\n // const { feature } = e;\n // hightPolygonLayer.setData({\n // type: \"FeatureCollection\",\n // features: [feature],\n // });\n // hightLayer.setData({\n // type: \"FeatureCollection\",\n // features: [feature],\n // });\n // });\n\n if (!province) {\n const southSeaPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(southSeaData);\n\n southSeaPolygonLayer.shape(\"fill\").color(\"black\");\n\n const southSeaLineLayer = new LineLayer({ zIndex: 2 })\n .source(southSeaData)\n .shape(\"line\")\n .color(\"rgba(30, 144, 255, 1)\")\n .size(0.5)\n .style({\n raisingHeight: 0,\n })\n .scale(\"density\", {\n type: \"quantile\",\n });\n scene.addLayer(southSeaPolygonLayer);\n scene.addLayer(southSeaLineLayer);\n }\n\n dataSource.forEach((i) => {\n const el = document.createElement(\"div\");\n let classNameText = \"text\";\n el.textContent = i.text;\n let coord: Point;\n\n // 计算标签的排列方向，全国地图保持原有逻辑，省份地图根据经度所在比例自动适应排列方向\n if (!province) {\n const city = data.features.find((f) =>\n f.properties.name.includes(i.city)\n );\n if (!city) {\n return;\n }\n coord = city.properties.center;\n //先手动调整位置，缓解重叠的问题\n if (\n [\n \"410000\",\n \"820000\",\n \"140000\",\n \"110000\",\n \"420000\",\n \"430000\",\n \"450000\",\n \"500000\",\n \"520000\",\n \"530000\",\n \"510000\",\n \"610000\",\n \"640000\",\n \"150000\",\n \"630000\",\n \"540000\",\n \"340000\",\n ].includes(city.id)\n ) {\n classNameText = `${classNameText} leftText`;\n i.isLeftOffset = true;\n }\n if (\n [\n \"620000\",\n \"640000\",\n \"450000\",\n \"440000\",\n \"120000\",\n \"340000\",\n \"510000\",\n \"150000\",\n \"320000\",\n ].includes(city.id)\n ) {\n classNameText = `${classNameText} topText`;\n i.isTopOffset = true;\n }\n\n if (\n [\n \"530000\",\n \"520000\",\n \"430000\",\n \"360000\",\n \"330000\",\n \"610000\",\n \"370000\",\n \"130000\",\n ].includes(city.id)\n ) {\n coord[1] -= 1;\n }\n } else {\n const area = AreaList.find(\n (a) =>\n a.parent === matchedProvince.adcode && a.name.includes(i.city)\n );\n if (!area) {\n return;\n }\n coord = [area.lng, area.lat];\n if (area.lng > labelDivideLng) {\n classNameText = `${classNameText} leftText`;\n i.isLeftOffset = true;\n }\n }\n\n el.className = classNameText;\n\n el.onclick = (e) => {\n i.width = el.getBoundingClientRect().width;\n textClick(e, i);\n };\n\n const imgEl = document.createElement(\"img\");\n imgEl.src = defaultSvg;\n imgEl.className = \"iconImg\";\n\n const marker = new Marker({\n element: el,\n }).setLnglat({ lng: coord[0], lat: coord[1] });\n const imgMarker = new Marker({\n element: imgEl,\n }).setLnglat({ lng: coord[0], lat: coord[1] });\n scene.addMarker(marker);\n scene.addMarker(imgMarker);\n });\n\n setTimeout(() => {\n const bounds = scene.getBounds();\n // 进行适当平移和缩放，因为设置了倾角 pitch，地图默认没有铺满并居中\n scene.panTo([\n (bounds[0][0] + bounds[1][0]) / 2 + (province ? 0 : 1.6),\n (bounds[0][1] + bounds[1][1]) / 2 - (bounds[1][1] - bounds[0][1]) / 9,\n ]);\n if (province) {\n scene.setZoom(scene.getZoom() * 0.97);\n }\n\n // 省份贴图\n if (province) {\n const provinceImgLayer = new ImageLayer({\n autoFit: false,\n zIndex: 1,\n maskLayers: [firstPolygonLayer],\n }).source(texturePng, {\n parser: {\n type: \"image\",\n extent: [...bounds[0], ...bounds[1]],\n },\n });\n\n provinceImgLayer.shape(\"img\").style({\n opacity: 1,\n });\n scene.addLayer(provinceImgLayer);\n }\n });\n });\n\n return () => {\n scene.destroy();\n };\n }, []);\n\n useEffect(() => {\n const handleClick = (e: MouseEvent) => {\n if (slotRef.current && e.composedPath().includes(slotRef.current)) return;\n setShowData(null);\n };\n document?.addEventListener(\"click\", handleClick);\n return () => {\n document?.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n useEffect(() => {\n showDataRef.current = cloneDeep(showData);\n onDetailOpenChange(!isEmpty(showData), showData);\n }, [showData]);\n return (\n <div\n style={\n fillContainer\n ? {\n height: \"100%\",\n transform: `scale(${scale ?? 1})`,\n }\n : null\n }\n >\n <div\n id=\"map\"\n ref={mapRef}\n className=\"map\"\n style={\n fillContainer\n ? {\n width: BASE_WIDTH,\n height: BASE_HEIGHT,\n }\n : null\n }\n ></div>\n {showData && (\n <div\n className=\"detailContent\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n style={{\n ...(showData.detailDisplayLocation === \"textBottom\"\n ? {\n left: textPosition.left,\n top: textPosition.top,\n transform: `translate(${showData.isLeftOffset ? -showData.width : 0}px, ${showData.isTopOffset ? -50 : -40}px)`,\n }\n : {\n transform: \"translate(-50%, 0%)\",\n top: \"50%\",\n left: \"50%\",\n }),\n ...detailContentStyle,\n }}\n >\n <slot name=\"detail\" ref={slotRef}></slot>\n </div>\n )}\n </div>\n );\n}\n","import { useEffect, useState } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * 根据容器尺寸进行缩放\n */\nexport function useContainerScale({\n width: baseWidth,\n height: baseHeight,\n root,\n maxScale,\n disabled,\n}: {\n width: number;\n height: number;\n root: HTMLElement;\n /** 最大缩放比例，默认为 1 */\n maxScale?: number;\n disabled?: boolean;\n}): number | null {\n const [scale, setScale] = useState<number | null>(null);\n\n useEffect(() => {\n if (disabled) {\n setScale(null);\n return;\n }\n // 当容器宽高低于预设值时，图形会自动缩小\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.target === root) {\n const { width, height } = entry.contentRect;\n setScale(\n Math.min(maxScale ?? 1, width / baseWidth, height / baseHeight)\n );\n }\n }\n });\n observer.observe(root);\n return () => observer.disconnect();\n }, [baseHeight, baseWidth, disabled, maxScale, root]);\n\n return scale;\n}\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"./assets/label.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:inline-block}:host([fill-container]){display:block;height:100%;position:relative;overflow:hidden}:host([hidden]){display:none}.text{position:absolute;z-index:6;height:22px;line-height:22px;font-size:12px;background:url(${___CSS_LOADER_URL_REPLACEMENT_0___}) no-repeat center left;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transform:translate(20px,-150%)!important;color:rgba(255,255,255,1);text-indent:10px}.iconImg{position:absolute;z-index:5;src:\"./assets/default.png\";-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.detailContent{position:absolute;opacity:0.8;z-index:20}:host(:not([fill-container])) .map{position:absolute;top:0;left:0;right:0;bottom:0}:host([fill-container]) .map{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.leftText{margin-left:-20px;transform:translate(-100%,-150%)!important}.topText{margin-top:-10px}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["defineElement","property","event","createDecorators","BASE_WIDTH","BASE_HEIGHT","_ChinaMapChart","_A","WeakMap","_B","_C","_D","_E","_ChinaMapChart_brand","WeakSet","_handleOpenChange","ChinaMapChart","ReactNextElement","constructor","arguments","_classPrivateMethodInitSpec","_classPrivateFieldInitSpec","_init_province","_init_extra_province","_init_dataSource","_init_extra_dataSource","_init_detailContentStyle","_init_extra_detailContentStyle","_init_fillContainer","_init_extra_fillContainer","_init_openChangeEvent","_init_extra_openChangeEvent","open","data","_classPrivateGetter","this","_get_openChangeEvent","emit","province","_classPrivateFieldGet","v","_classPrivateFieldSet","dataSource","detailContentStyle","fillContainer","render","React","ChinaMapChartComponent","root","onDetailOpenChange","props","mapRef","useRef","slotRef","showData","setShowData","useState","showDataRef","textPosition","setTextPosition","scale","useContainerScale","width","height","maxScale","disabled","useEffect","scene","Scene","id","current","logoVisible","map","Map","pitch","zoom","setMapStatus","doubleClickZoom","zoomEnable","defaultImg","Image","src","defaultSvg","selectedImg","selectedSvg","addImage","texturePng","chinaPng","on","async","southSeaData","matchedProvince","AreaList","CitiesImport","AreaListImport","Promise","all","Cities","default","find","a","level","name","includes","Error","type","features","filter","f","properties","province_adcode","adcode","CHINA","slice","length","seventhPolygonLayer","PolygonLayer","autoFit","source","labelDivideLng","raisingHeightBase","top","Infinity","left","bottom","right","flatMap","geometry","coordinates","flat","forEach","_ref","lng","lat","Math","min","max","lngRange","latRange","shape","color","style","heightfixed","pickLight","opacity","raisingHeight","secondPolygonLayer","firstPolygonLayer","chinaImgLayer","ImageLayer","zIndex","parser","extent","fourthLineLayer","LineLayer","size","thirdLineLayer","secondLineLayer","firstLineLayer","addLayer","southSeaPolygonLayer","southSeaLineLayer","i","el","document","createElement","coord","classNameText","textContent","text","area","parent","city","isLeftOffset","center","isTopOffset","className","onclick","e","getBoundingClientRect","textClick","stopPropagation","isEqual","toNumber","target","replace","imgEl","marker","Marker","element","setLnglat","imgMarker","addMarker","setTimeout","bounds","getBounds","panTo","setZoom","getZoom","provinceImgLayer","maskLayers","destroy","_document","handleClick","composedPath","addEventListener","_document2","removeEventListener","cloneDeep","isEmpty","transform","ref","onClick","detailDisplayLocation","_ChinaMapChart2","_set_openChangeEvent","c","_initClass","_applyDecs","styleTexts","styleText","attribute","Boolean","o","_","has","_checkInRHS","baseWidth","baseHeight","setScale","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","___CSS_LOADER_URL_IMPORT_0___","URL","___CSS_LOADER_EXPORT___","___CSS_LOADER_URL_REPLACEMENT_0___","push","module","toString"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"chunks/china-map-chart.52890013.js","mappings":"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","sources":["webpack:///./src/china-map-chart/index.tsx","webpack:///./src/shared/useContainerScale.ts","webpack:///./src/china-map-chart/styles.shadow.css"],"sourcesContent":["import React, { useEffect, useRef, useState, CSSProperties } from \"react\";\nimport { EventEmitter, createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport {\n Scene,\n PolygonLayer,\n LineLayer,\n Marker,\n ImageLayer,\n type ILayer,\n type Point,\n} from \"@antv/l7\";\nimport { Map } from \"@antv/l7-maps\";\nimport { cloneDeep, isEmpty, isEqual, toNumber } from \"lodash\";\nimport defaultSvg from \"./assets/default.svg?url\";\nimport selectedSvg from \"./assets/selected.svg?url\";\nimport chinaPng from \"./assets/china.png\";\nimport texturePng from \"./assets/texture.png\";\nimport styleText from \"./styles.shadow.css\";\nimport { useContainerScale } from \"../shared/useContainerScale\";\n\nconst { defineElement, property, event } = createDecorators();\n\nconst BASE_WIDTH = 825;\nconst BASE_HEIGHT = 600;\n\ninterface FeatureCollection {\n type: \"FeatureCollection\";\n features: Feature[];\n}\n\ninterface Feature {\n type: \"Feature\";\n id?: string;\n properties: {\n name: string;\n center?: Point;\n province_adcode: number;\n province: string;\n };\n geometry: Polygon | MultiPolygon;\n}\n\ninterface Polygon {\n type: \"Polygon\";\n coordinates: Point[][];\n}\n\ninterface MultiPolygon {\n type: \"MultiPolygon\";\n coordinates: Point[][][];\n}\n\ninterface Area {\n name: string;\n level: \"country\" | \"province\" | \"city\" | \"district\";\n adcode: number;\n lng: number;\n lat: number;\n parent: number;\n}\n\n/**\n * 中国地图图表构件，可以显示省级指标数据\n *\n * @deprecated 已废弃，请使用 `data-view.china-map`\n */\nexport\n@defineElement(\"data-view.china-map-chart\", {\n styleTexts: [styleText],\n})\nclass ChinaMapChart extends ReactNextElement {\n /**\n * 省份名称，例如“广东”。如果设置，则只显示该省份的地图，否则显示全国地图\n */\n @property()\n accessor province: string | undefined;\n\n /**\n * 数据源\n */\n @property({ attribute: false })\n accessor dataSource: DataSource[] | undefined;\n\n /**\n * 描述内容样式\n */\n @property({ attribute: false })\n accessor detailContentStyle: CSSProperties | undefined;\n\n /**\n * 是否铺满容器\n *\n * 注意：该属性不同时兼容 detail 插槽\n */\n @property({ type: Boolean })\n accessor fillContainer: boolean | undefined;\n\n /**\n * 当提示可见性开始变化时触发\n * @detail 当前是否可见\n */\n @event({ type: \"detail.open.change\" })\n accessor #openChangeEvent!: EventEmitter<{\n open: boolean;\n data: Record<string, any>;\n }>;\n #handleOpenChange = (open: boolean, data: Record<string, any>): void => {\n this.#openChangeEvent.emit({ open, data });\n };\n\n render() {\n return (\n <ChinaMapChartComponent\n root={this}\n province={this.province}\n dataSource={this.dataSource}\n onDetailOpenChange={this.#handleOpenChange}\n detailContentStyle={this.detailContentStyle}\n fillContainer={this.fillContainer}\n />\n );\n }\n}\n\ninterface DataSource {\n /** 省级行政区域名，例如：四川、北京 */\n city: string;\n detailDisplayLocation: \"pageCenter\" | \"textBottom\";\n text: string;\n [x: string]: any;\n}\n\nexport interface ChinaMapChartProps {\n root: HTMLElement;\n province?: string;\n onDetailOpenChange: (open: boolean, data: Record<string, any>) => void;\n dataSource: DataSource[];\n detailContentStyle?: CSSProperties;\n fillContainer?: boolean;\n // Define props here.\n}\n\nexport function ChinaMapChartComponent(props: ChinaMapChartProps) {\n const {\n root,\n province,\n onDetailOpenChange,\n dataSource = [],\n detailContentStyle = {},\n fillContainer,\n } = props;\n const mapRef = useRef<HTMLDivElement>();\n const slotRef = useRef<HTMLSlotElement>();\n const [showData, setShowData] = useState<DataSource>();\n const showDataRef = useRef<DataSource>();\n const [textPosition, setTextPosition] = useState<{\n left: string;\n top: string;\n }>();\n\n const scale = useContainerScale({\n width: BASE_WIDTH,\n height: BASE_HEIGHT,\n root,\n maxScale: 10,\n disabled: !fillContainer,\n });\n\n const textClick = (e: MouseEvent, data: any) => {\n e.stopPropagation();\n if (isEqual(data, showDataRef.current)) {\n setShowData(null);\n return;\n }\n setShowData(data);\n setTextPosition({\n left: `${toNumber((e.target as any).style.left.replace(\"px\", \"\")) + 24}px`,\n top: `${toNumber((e.target as any).style.top.replace(\"px\", \"\")) + 28}px`,\n });\n };\n useEffect(() => {\n const scene = new Scene({\n id: mapRef.current,\n logoVisible: false,\n map: new Map({\n // center: [90.268, 40.3628],\n pitch: 35,\n zoom: 1,\n }),\n });\n scene.setMapStatus({ doubleClickZoom: false, zoomEnable: false });\n const defaultImg = new Image();\n defaultImg.src = defaultSvg;\n\n const selectedImg = new Image();\n selectedImg.src = selectedSvg;\n\n scene.addImage(\"default\", defaultImg);\n scene.addImage(\"selected\", selectedImg);\n if (!province) {\n scene.addImage(\"chinaBg\", chinaPng);\n } else {\n scene.addImage(\"texture\", texturePng);\n }\n\n scene.on(\"loaded\", async () => {\n let data: FeatureCollection;\n let southSeaData: FeatureCollection;\n let matchedProvince: Area | undefined;\n let AreaList: Area[] | undefined;\n if (province) {\n const [CitiesImport, AreaListImport] = await Promise.all([\n import(\"./cities.json\"),\n import(\"./area-list.json\"),\n ]);\n const Cities = CitiesImport.default as unknown as FeatureCollection;\n AreaList = AreaListImport.default as unknown as Area[];\n matchedProvince = AreaList.find(\n (a) => a.level === \"province\" && a.name.includes(province)\n );\n\n if (!matchedProvince) {\n throw new Error(`没有找到省份：\"${province}\"`);\n }\n\n data = {\n type: \"FeatureCollection\",\n features: (Cities as FeatureCollection).features.filter(\n (f) => f.properties.province_adcode === matchedProvince.adcode\n ),\n };\n } else {\n const ChinaImport = await import(\"./map.json\");\n const CHINA = ChinaImport.default as unknown as FeatureCollection;\n data = {\n type: \"FeatureCollection\",\n features: (CHINA as unknown as FeatureCollection).features.slice(\n 0,\n CHINA.features.length - 2\n ),\n };\n southSeaData = {\n ...CHINA,\n features: CHINA.features.slice(\n CHINA.features.length - 2,\n CHINA.features.length\n ),\n };\n }\n\n const seventhPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n let labelDivideLng: number | undefined;\n // 根据坐标范围设置 3D 图层升起的高度\n let raisingHeightBase: number;\n if (province) {\n let top = Infinity;\n let left = Infinity;\n let bottom = -Infinity;\n let right = -Infinity;\n const points = data.features.flatMap(\n (f) =>\n f.geometry.coordinates.flat(\n f.geometry.type === \"MultiPolygon\" ? 2 : 1\n ) as Point[]\n );\n points.forEach(([lng, lat]) => {\n top = Math.min(top, lat);\n left = Math.min(left, lng);\n bottom = Math.max(bottom, lat);\n right = Math.max(right, lng);\n });\n const lngRange = right - left;\n const latRange = bottom - top;\n raisingHeightBase = Math.max(2000 * lngRange, 3000 * latRange);\n // 在经度范围的 3/4 处设置分界线，左边的文字向右排，右边的文字向左排\n labelDivideLng = left + (lngRange * 3) / 4;\n } else {\n raisingHeightBase = 100000;\n }\n\n seventhPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(84, 239, 241, 0.20)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -13 * raisingHeightBase,\n });\n\n const sixthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n sixthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(14, 11, 75, 0.58)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -11 * raisingHeightBase,\n });\n\n const fifthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n fifthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(190, 225, 226, 1)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -9 * raisingHeightBase,\n });\n const fourthPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n fourthPolygonLayer\n .shape(\"extrude\")\n .color(\"rgba(18, 26, 45, 1)\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -7 * raisingHeightBase,\n });\n\n const thirdPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n thirdPolygonLayer\n .shape(\"extrude\")\n .color(\"#111D3C\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -5 * raisingHeightBase,\n });\n const secondPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(data);\n\n secondPolygonLayer\n .shape(\"extrude\")\n .color(\"#121A2D\")\n .style({\n heightfixed: true,\n pickLight: true,\n opacity: 1,\n raisingHeight: -3 * raisingHeightBase,\n });\n\n const firstPolygonLayer = new PolygonLayer({\n autoFit: true,\n }).source(data);\n\n firstPolygonLayer.shape(\"fill\").color(\"rgba(8, 77, 255, 0.60)\");\n // .select({\n // color: \"rgba(177, 254, 254, 1)\",\n // });//编排上层缩放会影响到高亮功能，还不知道怎么解决，暂时不实现。\n\n let chinaImgLayer: ILayer | undefined;\n if (!province) {\n chinaImgLayer = new ImageLayer({\n autoFit: false,\n zIndex: 1,\n }).source(chinaPng, {\n parser: {\n type: \"image\",\n extent: [73.33, 17.9, 134.85, 53.73],\n },\n });\n\n chinaImgLayer.shape(\"img\").style({\n opacity: 1,\n });\n }\n\n const fourthLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(43, 100, 255, 1)\")\n .size(1)\n .style({\n raisingHeight: -16 * raisingHeightBase,\n });\n\n const thirdLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(84, 239, 241, 1)\")\n .size(1)\n .style({\n raisingHeight: -12 * raisingHeightBase,\n });\n\n const secondLineLayer = new LineLayer()\n .source(data)\n .shape(\"line\")\n .color(\"rgba(43, 100, 255, 1)\")\n .size(1)\n .style({\n raisingHeight: -6 * raisingHeightBase,\n });\n\n const firstLineLayer = new LineLayer({ zIndex: 2 })\n .source(data)\n .shape(\"line\")\n .color(\"#3DC6FF\")\n .size(1)\n .style({\n raisingHeight: 0,\n })\n .scale(\"density\", {\n type: \"quantile\",\n });\n\n // const hightLayer = new LineLayer({\n // zIndex: 10, // 设置显示层级\n // name: \"hightlight\",\n // })\n // .source({\n // type: \"FeatureCollection\",\n // features: [],\n // })\n // .shape(\"line\")\n // .size(2)\n // .color(\"rgba(177, 254, 254, 1)\")\n // .style({\n // opacity: 1,\n // });\n // const hightPolygonLayer = new PolygonLayer({zIndex: 10})\n // .source({\n // type: \"FeatureCollection\",\n // features: [],\n // })\n // .shape(\"fill\")\n // .color(\"rgba(177, 254, 254, 1)\")\n // .style({\n // heightfixed: true,\n // pickLight: true,\n // opacity: 1,\n // raisingHeight: 0,\n // }); //自定义选择高亮\n\n scene.addLayer(seventhPolygonLayer);\n // scene.addLayer(sixthPolygonLayer);\n // scene.addLayer(fifthPolygonLayer);\n // // scene.addLayer(fourthPolygonLayer);\n // scene.addLayer(thirdPolygonLayer);\n scene.addLayer(secondPolygonLayer);\n if (chinaImgLayer) {\n scene.addLayer(chinaImgLayer);\n }\n // scene.addLayer(hightLayer);\n // scene.addLayer(hightPolygonLayer);\n scene.addLayer(firstPolygonLayer);\n\n scene.addLayer(fourthLineLayer);\n scene.addLayer(thirdLineLayer);\n scene.addLayer(secondLineLayer);\n scene.addLayer(firstLineLayer);\n\n // firstPolygonLayer.on(\"click\", (e) => {\n // const { feature } = e;\n // hightPolygonLayer.setData({\n // type: \"FeatureCollection\",\n // features: [feature],\n // });\n // hightLayer.setData({\n // type: \"FeatureCollection\",\n // features: [feature],\n // });\n // });\n\n if (!province) {\n const southSeaPolygonLayer = new PolygonLayer({\n autoFit: false,\n }).source(southSeaData);\n\n southSeaPolygonLayer.shape(\"fill\").color(\"black\");\n\n const southSeaLineLayer = new LineLayer({ zIndex: 2 })\n .source(southSeaData)\n .shape(\"line\")\n .color(\"rgba(30, 144, 255, 1)\")\n .size(0.5)\n .style({\n raisingHeight: 0,\n })\n .scale(\"density\", {\n type: \"quantile\",\n });\n scene.addLayer(southSeaPolygonLayer);\n scene.addLayer(southSeaLineLayer);\n }\n\n dataSource.forEach((i) => {\n const el = document.createElement(\"div\");\n let classNameText = \"text\";\n el.textContent = i.text;\n let coord: Point;\n\n // 计算标签的排列方向，全国地图保持原有逻辑，省份地图根据经度所在比例自动适应排列方向\n if (!province) {\n const city = data.features.find((f) =>\n f.properties.name.includes(i.city)\n );\n if (!city) {\n return;\n }\n coord = city.properties.center;\n //先手动调整位置，缓解重叠的问题\n if (\n [\n \"410000\",\n \"820000\",\n \"140000\",\n \"110000\",\n \"420000\",\n \"430000\",\n \"450000\",\n \"500000\",\n \"520000\",\n \"530000\",\n \"510000\",\n \"610000\",\n \"640000\",\n \"150000\",\n \"630000\",\n \"540000\",\n \"340000\",\n ].includes(city.id)\n ) {\n classNameText = `${classNameText} leftText`;\n i.isLeftOffset = true;\n }\n if (\n [\n \"620000\",\n \"640000\",\n \"450000\",\n \"440000\",\n \"120000\",\n \"340000\",\n \"510000\",\n \"150000\",\n \"320000\",\n ].includes(city.id)\n ) {\n classNameText = `${classNameText} topText`;\n i.isTopOffset = true;\n }\n\n if (\n [\n \"530000\",\n \"520000\",\n \"430000\",\n \"360000\",\n \"330000\",\n \"610000\",\n \"370000\",\n \"130000\",\n ].includes(city.id)\n ) {\n coord[1] -= 1;\n }\n } else {\n const area = AreaList.find(\n (a) =>\n a.parent === matchedProvince.adcode && a.name.includes(i.city)\n );\n if (!area) {\n return;\n }\n coord = [area.lng, area.lat];\n if (area.lng > labelDivideLng) {\n classNameText = `${classNameText} leftText`;\n i.isLeftOffset = true;\n }\n }\n\n el.className = classNameText;\n\n el.onclick = (e) => {\n i.width = el.getBoundingClientRect().width;\n textClick(e, i);\n };\n\n const imgEl = document.createElement(\"img\");\n imgEl.src = defaultSvg;\n imgEl.className = \"iconImg\";\n\n const marker = new Marker({\n element: el,\n }).setLnglat({ lng: coord[0], lat: coord[1] });\n const imgMarker = new Marker({\n element: imgEl,\n }).setLnglat({ lng: coord[0], lat: coord[1] });\n scene.addMarker(marker);\n scene.addMarker(imgMarker);\n });\n\n setTimeout(() => {\n const bounds = scene.getBounds();\n // 进行适当平移和缩放，因为设置了倾角 pitch，地图默认没有铺满并居中\n scene.panTo([\n (bounds[0][0] + bounds[1][0]) / 2 + (province ? 0 : 1.6),\n (bounds[0][1] + bounds[1][1]) / 2 - (bounds[1][1] - bounds[0][1]) / 9,\n ]);\n if (province) {\n scene.setZoom(scene.getZoom() * 0.97);\n }\n\n // 省份贴图\n if (province) {\n const provinceImgLayer = new ImageLayer({\n autoFit: false,\n zIndex: 1,\n maskLayers: [firstPolygonLayer],\n }).source(texturePng, {\n parser: {\n type: \"image\",\n extent: [...bounds[0], ...bounds[1]],\n },\n });\n\n provinceImgLayer.shape(\"img\").style({\n opacity: 1,\n });\n scene.addLayer(provinceImgLayer);\n }\n });\n });\n\n return () => {\n scene.destroy();\n };\n }, []);\n\n useEffect(() => {\n const handleClick = (e: MouseEvent) => {\n if (slotRef.current && e.composedPath().includes(slotRef.current)) return;\n setShowData(null);\n };\n document?.addEventListener(\"click\", handleClick);\n return () => {\n document?.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n useEffect(() => {\n showDataRef.current = cloneDeep(showData);\n onDetailOpenChange(!isEmpty(showData), showData);\n }, [showData]);\n return (\n <div\n style={\n fillContainer\n ? {\n height: \"100%\",\n transform: `scale(${scale ?? 1})`,\n }\n : null\n }\n >\n <div\n id=\"map\"\n ref={mapRef}\n className=\"map\"\n style={\n fillContainer\n ? {\n width: BASE_WIDTH,\n height: BASE_HEIGHT,\n }\n : null\n }\n ></div>\n {showData && (\n <div\n className=\"detailContent\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n style={{\n ...(showData.detailDisplayLocation === \"textBottom\"\n ? {\n left: textPosition.left,\n top: textPosition.top,\n transform: `translate(${showData.isLeftOffset ? -showData.width : 0}px, ${showData.isTopOffset ? -50 : -40}px)`,\n }\n : {\n transform: \"translate(-50%, 0%)\",\n top: \"50%\",\n left: \"50%\",\n }),\n ...detailContentStyle,\n }}\n >\n <slot name=\"detail\" ref={slotRef}></slot>\n </div>\n )}\n </div>\n );\n}\n","import { useEffect, useState } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * 根据容器尺寸进行缩放\n */\nexport function useContainerScale({\n width: baseWidth,\n height: baseHeight,\n root,\n maxScale,\n disabled,\n}: {\n width: number;\n height: number;\n root: HTMLElement;\n /** 最大缩放比例，默认为 1 */\n maxScale?: number;\n disabled?: boolean;\n}): number | null {\n const [scale, setScale] = useState<number | null>(null);\n\n useEffect(() => {\n if (disabled) {\n setScale(null);\n return;\n }\n // 当容器宽高低于预设值时，图形会自动缩小\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.target === root) {\n const { width, height } = entry.contentRect;\n setScale(\n Math.min(maxScale ?? 1, width / baseWidth, height / baseHeight)\n );\n }\n }\n });\n observer.observe(root);\n return () => observer.disconnect();\n }, [baseHeight, baseWidth, disabled, maxScale, root]);\n\n return scale;\n}\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"./assets/label.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:inline-block}:host([fill-container]){display:block;height:100%;position:relative;overflow:hidden}:host([hidden]){display:none}.text{position:absolute;z-index:6;height:22px;line-height:22px;font-size:12px;background:url(${___CSS_LOADER_URL_REPLACEMENT_0___}) no-repeat center left;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transform:translate(20px,-150%)!important;color:rgba(255,255,255,1);text-indent:10px}.iconImg{position:absolute;z-index:5;src:\"./assets/default.png\";-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.detailContent{position:absolute;opacity:0.8;z-index:20}:host(:not([fill-container])) .map{position:absolute;top:0;left:0;right:0;bottom:0}:host([fill-container]) .map{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.leftText{margin-left:-20px;transform:translate(-100%,-150%)!important}.topText{margin-top:-10px}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["defineElement","property","event","createDecorators","BASE_WIDTH","BASE_HEIGHT","_ChinaMapChart","_A","WeakMap","_B","_C","_D","_E","_ChinaMapChart_brand","WeakSet","_handleOpenChange","ChinaMapChart","ReactNextElement","constructor","arguments","_classPrivateMethodInitSpec","_classPrivateFieldInitSpec","_init_province","_init_extra_province","_init_dataSource","_init_extra_dataSource","_init_detailContentStyle","_init_extra_detailContentStyle","_init_fillContainer","_init_extra_fillContainer","_init_openChangeEvent","_init_extra_openChangeEvent","open","data","_classPrivateGetter","this","_get_openChangeEvent","emit","province","_classPrivateFieldGet","v","_classPrivateFieldSet","dataSource","detailContentStyle","fillContainer","render","React","ChinaMapChartComponent","root","onDetailOpenChange","props","mapRef","useRef","slotRef","showData","setShowData","useState","showDataRef","textPosition","setTextPosition","scale","useContainerScale","width","height","maxScale","disabled","useEffect","scene","Scene","id","current","logoVisible","map","Map","pitch","zoom","setMapStatus","doubleClickZoom","zoomEnable","defaultImg","Image","src","defaultSvg","selectedImg","selectedSvg","addImage","texturePng","chinaPng","on","async","southSeaData","matchedProvince","AreaList","CitiesImport","AreaListImport","Promise","all","Cities","default","find","a","level","name","includes","Error","type","features","filter","f","properties","province_adcode","adcode","CHINA","slice","length","seventhPolygonLayer","PolygonLayer","autoFit","source","labelDivideLng","raisingHeightBase","top","Infinity","left","bottom","right","flatMap","geometry","coordinates","flat","forEach","_ref","lng","lat","Math","min","max","lngRange","latRange","shape","color","style","heightfixed","pickLight","opacity","raisingHeight","secondPolygonLayer","firstPolygonLayer","chinaImgLayer","ImageLayer","zIndex","parser","extent","fourthLineLayer","LineLayer","size","thirdLineLayer","secondLineLayer","firstLineLayer","addLayer","southSeaPolygonLayer","southSeaLineLayer","i","el","document","createElement","coord","classNameText","textContent","text","area","parent","city","isLeftOffset","center","isTopOffset","className","onclick","e","getBoundingClientRect","textClick","stopPropagation","isEqual","toNumber","target","replace","imgEl","marker","Marker","element","setLnglat","imgMarker","addMarker","setTimeout","bounds","getBounds","panTo","setZoom","getZoom","provinceImgLayer","maskLayers","destroy","_document","handleClick","composedPath","addEventListener","_document2","removeEventListener","cloneDeep","isEmpty","transform","ref","onClick","detailDisplayLocation","_ChinaMapChart2","_set_openChangeEvent","c","_initClass","_applyDecs","styleTexts","styleText","attribute","Boolean","o","_","has","_checkInRHS","baseWidth","baseHeight","setScale","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","___CSS_LOADER_URL_IMPORT_0___","URL","___CSS_LOADER_EXPORT___","___CSS_LOADER_URL_REPLACEMENT_0___","push","module","toString"],"sourceRoot":""}
|
package/dist/examples.json
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"doc": "构件 `data-view.progress-bar-list`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: data-view.progress-bar-list\nproperties:\n dataSource:\n - title: 资源1\n count: 123\n - title: 资源2\n count: 39\n - title: 资源3\n count: 23\n - title: 资源4\n count: 13\n - title: 资源5\n count: 49\n barBackground: linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\n loopBackground: rgb(255, 222, 104)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.progress-bar-list id=\"brick-1\"></data-view.progress-bar-list>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# title: \"资源1\",\n# count: 123,\n# },\n# {\n# title: \"资源2\",\n# count: 39,\n# },\n# {\n# title: \"资源3\",\n# count: 23,\n# },\n# {\n# title: \"资源4\",\n# count: 13,\n# },\n# {\n# title: \"资源5\",\n# count: 49,\n# barBackground:\n# \"linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\",\n# loopBackground: \"rgb(255, 222, 104)\",\n# },\n# ];\n# </script>\n# \n```\n"
|
|
121
121
|
},
|
|
122
122
|
"data-view.china-map-chart": {
|
|
123
|
-
"doc": "中国地图图表构件，可以显示省级指标数据\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n dataSource:\n - text: \"西藏 12311\"\n city: 西藏\n - text: \"四川 89781169\"\n city: 四川\n - text: \"台湾 234181\"\n city: 台湾\n - text: \"江西 21348\"\n city: 江西\n# Currently this brick only looks well within dark theme\nlifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\"></data-view.china-map-chart>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# city: \"江西\",\n# },\n# ];\n# </script>\n# \n```\n\n### Fill container\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n style:\n height: calc(100vh - 4em)\n position: relative\nchildren:\n - brick: data-view.china-map-chart\n properties:\n fillContainer: true\n dataSource:\n - text: \"西藏 12311\"\n city: 西藏\n - text: \"四川 89781169\"\n city: 四川\n - text: \"台湾 234181\"\n city: 台湾\n - text: \"江西 21348\"\n city: 江西\n # Currently this brick only looks well within dark theme\n lifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n# <data-view.china-map-chart\n# fill-container\n# id=\"brick-1\"\n# ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# city: \"江西\",\n# },\n# ];\n# </script>\n# \n```\n\n### Province map\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n style:\n height: calc(100vh - 4em)\n position: relative\nchildren:\n - brick: data-view.china-map-chart\n properties:\n fillContainer: true\n province: 广东\n dataSource:\n - text: \"广州 12311\"\n city: 广州\n - text: \"深圳 89781169\"\n city: 深圳\n - text: \"湛江 234181\"\n city: 湛江\n # Currently this brick only looks well within dark theme\n lifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n# <data-view.china-map-chart\n# fill-container\n# province=\"广东\"\n# id=\"brick-1\"\n# ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"广州 12311\",\n# city: \"广州\",\n# },\n# {\n# text: \"深圳 89781169\",\n# city: \"深圳\",\n# },\n# {\n# text: \"湛江 234181\",\n# city: \"湛江\",\n# },\n# ];\n# </script>\n# \n```\n\n### With detail\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n detailContentStyle:\n background: \"yellow\"\n dataSource:\n - text: \"西藏 12311\"\n detailDisplayLocation: \"textBottom\"\n city: 西藏\n - text: \"四川 89781169\"\n detailDisplayLocation: \"textBottom\"\n city: 四川\n - text: \"台湾 234181\"\n detailDisplayLocation: \"pageCenter\"\n city: 台湾\n - text: \"江西 21348\"\n detailDisplayLocation: \"pageCenter\"\n city: 江西\nevents:\n detail.open.change:\n - action: console.log\nslots:\n detail:\n bricks:\n - brick: div\n properties:\n textContent: 内容区\n# Currently this brick only looks well within dark theme\nlifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\">\n# <div slot=\"detail\">内容区</div>\n# </data-view.china-map-chart>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.detailContentStyle = {\n# background: \"yellow\",\n# };\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# detailDisplayLocation: \"textBottom\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# detailDisplayLocation: \"textBottom\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# detailDisplayLocation: \"pageCenter\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# detailDisplayLocation: \"pageCenter\",\n# city: \"江西\",\n# },\n# ];\n# brick_1.addEventListener(\"detail.open.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
123
|
+
"doc": "中国地图图表构件，可以显示省级指标数据\n\n已废弃，请使用 [`data-view.china-map`](./china-map)。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n dataSource:\n - text: \"西藏 12311\"\n city: 西藏\n - text: \"四川 89781169\"\n city: 四川\n - text: \"台湾 234181\"\n city: 台湾\n - text: \"江西 21348\"\n city: 江西\n# Currently this brick only looks well within dark theme\nlifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\"></data-view.china-map-chart>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# city: \"江西\",\n# },\n# ];\n# </script>\n# \n```\n\n### Fill container\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n style:\n height: calc(100vh - 4em)\n position: relative\nchildren:\n - brick: data-view.china-map-chart\n properties:\n fillContainer: true\n dataSource:\n - text: \"西藏 12311\"\n city: 西藏\n - text: \"四川 89781169\"\n city: 四川\n - text: \"台湾 234181\"\n city: 台湾\n - text: \"江西 21348\"\n city: 江西\n # Currently this brick only looks well within dark theme\n lifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n# <data-view.china-map-chart\n# fill-container\n# id=\"brick-1\"\n# ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# city: \"江西\",\n# },\n# ];\n# </script>\n# \n```\n\n### Province map\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n style:\n height: calc(100vh - 4em)\n position: relative\nchildren:\n - brick: data-view.china-map-chart\n properties:\n fillContainer: true\n province: 广东\n dataSource:\n - text: \"广州 12311\"\n city: 广州\n - text: \"深圳 89781169\"\n city: 深圳\n - text: \"湛江 234181\"\n city: 湛江\n # Currently this brick only looks well within dark theme\n lifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n# <data-view.china-map-chart\n# fill-container\n# province=\"广东\"\n# id=\"brick-1\"\n# ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# text: \"广州 12311\",\n# city: \"广州\",\n# },\n# {\n# text: \"深圳 89781169\",\n# city: \"深圳\",\n# },\n# {\n# text: \"湛江 234181\",\n# city: \"湛江\",\n# },\n# ];\n# </script>\n# \n```\n\n### With detail\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n detailContentStyle:\n background: \"yellow\"\n dataSource:\n - text: \"西藏 12311\"\n detailDisplayLocation: \"textBottom\"\n city: 西藏\n - text: \"四川 89781169\"\n detailDisplayLocation: \"textBottom\"\n city: 四川\n - text: \"台湾 234181\"\n detailDisplayLocation: \"pageCenter\"\n city: 台湾\n - text: \"江西 21348\"\n detailDisplayLocation: \"pageCenter\"\n city: 江西\nevents:\n detail.open.change:\n - action: console.log\nslots:\n detail:\n bricks:\n - brick: div\n properties:\n textContent: 内容区\n# Currently this brick only looks well within dark theme\nlifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\">\n# <div slot=\"detail\">内容区</div>\n# </data-view.china-map-chart>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.detailContentStyle = {\n# background: \"yellow\",\n# };\n# brick_1.dataSource = [\n# {\n# text: \"西藏 12311\",\n# detailDisplayLocation: \"textBottom\",\n# city: \"西藏\",\n# },\n# {\n# text: \"四川 89781169\",\n# detailDisplayLocation: \"textBottom\",\n# city: \"四川\",\n# },\n# {\n# text: \"台湾 234181\",\n# detailDisplayLocation: \"pageCenter\",\n# city: \"台湾\",\n# },\n# {\n# text: \"江西 21348\",\n# detailDisplayLocation: \"pageCenter\",\n# city: \"江西\",\n# },\n# ];\n# brick_1.addEventListener(\"detail.open.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
|
|
124
124
|
},
|
|
125
125
|
"data-view.crystal-ball-indicator": {
|
|
126
126
|
"doc": "中间是水晶球动画的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n style:\n height: calc(100vh - 2em)\nchildren:\n - brick: data-view.crystal-ball-indicator\n properties:\n centerDataSource:\n label: 资产总数\n value: 30123\n dataSource:\n - label: 低值易耗品\n value: 3889\n - label: 摊销资产\n value: 2087\n - label: 固定资产\n value: 12088\n - label: 无形资产\n value: 1082\n - label: 在建工程\n value: 10997\n cornerDataSource:\n - label: 资产增长\n value: 43\n color: red\n - label: 资产减少\n value: 21\n color: green\n # Currently this brick only works within dark theme\n lifeCycle:\n onPageLoad:\n action: theme.setTheme\n args:\n - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n# <data-view.crystal-ball-indicator\n# id=\"brick-1\"\n# ></data-view.crystal-ball-indicator>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.centerDataSource = {\n# label: \"资产总数\",\n# value: 30123,\n# };\n# brick_1.dataSource = [\n# {\n# label: \"低值易耗品\",\n# value: 3889,\n# },\n# {\n# label: \"摊销资产\",\n# value: 2087,\n# },\n# {\n# label: \"固定资产\",\n# value: 12088,\n# },\n# {\n# label: \"无形资产\",\n# value: 1082,\n# },\n# {\n# label: \"在建工程\",\n# value: 10997,\n# },\n# ];\n# brick_1.cornerDataSource = [\n# {\n# label: \"资产增长\",\n# value: 43,\n# color: \"red\",\n# },\n# {\n# label: \"资产减少\",\n# value: 21,\n# color: \"green\",\n# },\n# ];\n# </script>\n# \n```\n"
|
package/dist/manifest.json
CHANGED
|
@@ -1628,7 +1628,8 @@
|
|
|
1628
1628
|
"slots": [],
|
|
1629
1629
|
"methods": [],
|
|
1630
1630
|
"parts": [],
|
|
1631
|
-
"description": "中国地图图表构件，可以显示省级指标数据"
|
|
1631
|
+
"description": "中国地图图表构件，可以显示省级指标数据",
|
|
1632
|
+
"deprecated": "已废弃，请使用 `data-view.china-map`"
|
|
1632
1633
|
},
|
|
1633
1634
|
{
|
|
1634
1635
|
"name": "data-view.crystal-ball-indicator",
|
package/docs/china-map-chart.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@next-bricks/data-view",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/data-view",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@next-bricks/basic": "*",
|
|
43
43
|
"@next-bricks/icons": "*"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "1fca9ec946923e000bfdd1512d24fafa7204e94f"
|
|
46
46
|
}
|