尧图网站建设 
deck.gl React 快速上手基于 Vite 构建交互式地理数据可视化应用【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.glexamples/get-started/react/basic是 deck.gl 官方仓库中最基础的 React 示例它演示了如何用DeckGLReact 组件、GeoJsonLayer与ArcLayer在几十行代码内渲染一幅全球航线交互地图并使用 Vite 完成开发热更新与生产打包。读完本文你将掌握 deck.gl React 的最小可用工程结构、JSX 声明式图层机制、图层事件交互与 Widget 使用方式可直接迁移到自己的 React 可视化项目中。示例工程结构一览示例位于 examples/get-started/react/basic包含四个文件文件作用app.jsx应用入口与全部渲染逻辑声明式组合图层与交互index.htmlVite 的 HTML 入口模板通过script typemodule挂载 app.jsxpackage.json依赖与 npm 脚本定义README.md官方的安装与运行说明入口 index.html 中声明了body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}确保画布铺满视口且无滚动条这与 deck.gl 全屏渲染的典型场景一致随后script typemodule srcapp.jsx/script直接加载 JSX 模块——Vite 原生支持 JSX 编译无需额外配置 Babel 或 webpack。依赖安装与 npm 脚本关联文档指出本示例使用 Vite 完成依赖打包与服务。安装依赖有两种等价方式npm install # 或 yarn实际依赖声明见 package.json运行时依赖deck.gl^9.0.0聚合了核心、图层与 React 绑定、react^18.0.0、react-dom^18.0.0开发依赖vite^7.3.3承担开发服务器、热更新与生产构建。工程定义的三个脚本分别是脚本对应命令用途npm startvite --open开发模式启动 Vite 开发服务器并在浏览器中自动打开页面支持热更新npm run start-localvite --config ../../../vite.config.local.mjs开发模式仓库内本地调试加载仓库根目录的 vite.config.local.mjs通常用于将 deck.gl 源码模块以本地引用方式接入便于在修改框架源码时即时生效npm run buildvite build生产构建打包最终产物并写入磁盘默认输出到dist/即关联文档中提到的两个核心命令npm start # 开发本地服务 热更新 npm run build # 生产输出最终打包产物代码解析从数据到交互地图app.jsx 是示例的核心。它先通过createRoot(container).render(Root /)React 18 的新式挂载 API将应用渲染到动态创建的 DOM 容器中再在Root /内部完成全部 deck.gl 声明。数据与初始视图数据取自 Natural Earth 公开地理数据集代码注释标注了数据来源const COUNTRIES https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson; const AIR_PORTS https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson; const INITIAL_VIEW_STATE { latitude: 51.47, longitude: 0.45, zoom: 4, bearing: 0, pitch: 30 };INITIAL_VIEW_STATE将初始视角定位在伦敦附近zoom: 4为国家尺度pitch: 30让地图呈俯视 3D 效果为后续弧线提供立体视觉。deck.gl 会异步加载远程 GeoJSON 数据并自动重绘无需手动管理加载状态。DeckGL 容器与 controllerDeckGL controller{true} initialViewState{INITIAL_VIEW_STATE} {/* 图层 */} CompassWidget / /DeckGLDeckGL是 modules/react 中提供的 React 容器组件其实现位于 deckgl.ts它在内部创建deck.gl/core的Deck实例createDeckInstance通过_customRender回调将 deck.gl 的重绘信号同步回 React 生命周期controller{true}会为默认MapView启用地图控制器支持缩放、旋转、平移等手势。JSX 声明式图层extractJSXLayers 机制示例的亮点是把图层直接写进 JSX 子树。其底层原理在 extract-jsx-layers.ts 中实现React 的children会被递归遍历凡是继承自 deck.glLayer或View的组件都会被抽取出来jsxLayers/jsxViews注入到底层Deck实例的图层数组与视图配置中其余真正的 React 元素才保留给 DOM 渲染。这意味着图层声明与普通 React 组件在 JSX 中可以共存父组件setState引起的 props 变化会自动同步到 deck.gl 图层这正是声明式 UI 与命令式渲染引擎的桥接点。GeoJsonLayer国家边界与机场点示例连续声明了两个GeoJsonLayer实例展示了同类型图层叠加使用的场景GeoJsonLayer idbase-map data{COUNTRIES} stroked{true} filled{true} lineWidthMinPixels{2} opacity{0.4} getLineColor{[60, 60, 60]} getFillColor{[200, 200, 200]} /id是图层唯一标识叠加多个同类型图层时必须不同lineWidthMinPixels指定线宽下限像素防止缩小视图时国界线过细opacity: 0.4让底图半透明突出上层机场点与航线getLineColor/getFillColor使用固定色数组渲染描边与填充。第二个GeoJsonLayer渲染机场点并开启交互GeoJsonLayer idairports data{AIR_PORTS} filled{true} pointRadiusMinPixels{2} pointRadiusScale{2000} getPointRadius{f 11 - f.properties.scalerank} getFillColor{[200, 0, 80, 180]} pickable{true} autoHighlight{true} onClick{onClick} /getPointRadius是访问器accessor每个机场点按scalerank属性动态计算半径重要机场更大配合pointRadiusScale与pointRadiusMinPixels控制缩放表现pickable{true}开启拾取使鼠标事件可以命中要素autoHighlight{true}让悬停要素自动高亮onClick接收拾取结果info示例通过info.object.properties弹出机场名称提示框const onClick info { if (info.object) { alert(${info.object.properties.name} (${info.object.properties.abbrev})); } };ArcLayer机场出发航线ArcLayer idarcs data{AIR_PORTS} dataTransform{d d.features.filter(f f.properties.scalerank 4)} getSourcePosition{f [-0.4531566, 51.4709959]} getTargetPosition{f f.geometry.coordinates} getSourceColor{[0, 128, 200]} getTargetColor{[200, 0, 80]} getWidth{1} /dataTransform在渲染前对加载的数据做预处理此处仅保留scalerank 4的机场避免航线过于密集getSourcePosition固定为伦敦坐标所有航线同源getTargetPosition取各机场的geometry.coordinates从而绘制出伦敦放射状航线效果起点蓝色getSourceColor、终点品红getTargetColor配合pitch: 30形成立体弧线视觉。CompassWidget开箱即用的方位控件CompassWidget /这是示例中引入的 UI 组件从deck.gl/react导入并配套加载了控件样式import {CompassWidget} from deck.gl/react; import deck.gl/widgets/stylesheet.css;CompassWidget提供罗盘/方位指示与视角复位能力其实现位于 compass-widget.tsx。它是 deck.gl 9.x 的 Widget 体系完整组件集合见 modules/react/src含 Zoom、Reset、Fullscreen、Geocoder 等十余种在 React 端的绑定让开发者无需手写 DOM 交互即可获得地图常用控件。注意deck.gl/widgets/stylesheet.css的导入是控件正常渲染的必要步骤。生产构建输出npm run build使用 Vite 对应用做生产构建JSX/ES 模块会被 tree-shaking 与压缩deck.gl 按需打包进产物最终输出静态资源目录默认dist/。部署时将该目录托管到任意静态服务器即可无需后端。若在 deck.gl 仓库内联调框架源码可改用npm run start-local借助根目录的 vite.config.local.mjs 将各modules/*作为本地源码引入便于实时调试图层实现。小结与扩展路径从本示例可以提炼出 deck.gl React 应用的通用范式用DeckGL容器 initialViewStatecontroller搭建可交互视口用 JSX 子元素声明Layerextract-jsx-layers.ts 负责抽取通过data、访问器与样式 props 控制渲染通过pickableonClick等实现要素拾取交互通过 Widget如CompassWidget快速补齐地图控件。若想进一步扩展仓库中提供了同目录下的其他入门模板React 版本examples/get-started/react含多个变体纯 JS 版本见 examples/get-started/pure-js脚本化无构建版本见 examples/get-started/scripting可对照选择最适合自己工程形态的起点。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 deck.gl React 快速上手：基于 Vite 构建交互式地理数据可视化应用
deck.gl React 快速上手基于 Vite 构建交互式地理数据可视化应用【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.glexamples/get-started/react/basic是 deck.gl 官方仓库中最基础的 React 示例它演示了如何用DeckGLReact 组件、GeoJsonLayer与ArcLayer在几十行代码内渲染一幅全球航线交互地图并使用 Vite 完成开发热更新与生产打包。读完本文你将掌握 deck.gl React 的最小可用工程结构、JSX 声明式图层机制、图层事件交互与 Widget 使用方式可直接迁移到自己的 React 可视化项目中。示例工程结构一览示例位于 examples/get-started/react/basic包含四个文件文件作用app.jsx应用入口与全部渲染逻辑声明式组合图层与交互index.htmlVite 的 HTML 入口模板通过script typemodule挂载 app.jsxpackage.json依赖与 npm 脚本定义README.md官方的安装与运行说明入口 index.html 中声明了body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}确保画布铺满视口且无滚动条这与 deck.gl 全屏渲染的典型场景一致随后script typemodule srcapp.jsx/script直接加载 JSX 模块——Vite 原生支持 JSX 编译无需额外配置 Babel 或 webpack。依赖安装与 npm 脚本关联文档指出本示例使用 Vite 完成依赖打包与服务。安装依赖有两种等价方式npm install # 或 yarn实际依赖声明见 package.json运行时依赖deck.gl^9.0.0聚合了核心、图层与 React 绑定、react^18.0.0、react-dom^18.0.0开发依赖vite^7.3.3承担开发服务器、热更新与生产构建。工程定义的三个脚本分别是脚本对应命令用途npm startvite --open开发模式启动 Vite 开发服务器并在浏览器中自动打开页面支持热更新npm run start-localvite --config ../../../vite.config.local.mjs开发模式仓库内本地调试加载仓库根目录的 vite.config.local.mjs通常用于将 deck.gl 源码模块以本地引用方式接入便于在修改框架源码时即时生效npm run buildvite build生产构建打包最终产物并写入磁盘默认输出到dist/即关联文档中提到的两个核心命令npm start # 开发本地服务 热更新 npm run build # 生产输出最终打包产物代码解析从数据到交互地图app.jsx 是示例的核心。它先通过createRoot(container).render(Root /)React 18 的新式挂载 API将应用渲染到动态创建的 DOM 容器中再在Root /内部完成全部 deck.gl 声明。数据与初始视图数据取自 Natural Earth 公开地理数据集代码注释标注了数据来源const COUNTRIES https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson; const AIR_PORTS https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson; const INITIAL_VIEW_STATE { latitude: 51.47, longitude: 0.45, zoom: 4, bearing: 0, pitch: 30 };INITIAL_VIEW_STATE将初始视角定位在伦敦附近zoom: 4为国家尺度pitch: 30让地图呈俯视 3D 效果为后续弧线提供立体视觉。deck.gl 会异步加载远程 GeoJSON 数据并自动重绘无需手动管理加载状态。DeckGL 容器与 controllerDeckGL controller{true} initialViewState{INITIAL_VIEW_STATE} {/* 图层 */} CompassWidget / /DeckGLDeckGL是 modules/react 中提供的 React 容器组件其实现位于 deckgl.ts它在内部创建deck.gl/core的Deck实例createDeckInstance通过_customRender回调将 deck.gl 的重绘信号同步回 React 生命周期controller{true}会为默认MapView启用地图控制器支持缩放、旋转、平移等手势。JSX 声明式图层extractJSXLayers 机制示例的亮点是把图层直接写进 JSX 子树。其底层原理在 extract-jsx-layers.ts 中实现React 的children会被递归遍历凡是继承自 deck.glLayer或View的组件都会被抽取出来jsxLayers/jsxViews注入到底层Deck实例的图层数组与视图配置中其余真正的 React 元素才保留给 DOM 渲染。这意味着图层声明与普通 React 组件在 JSX 中可以共存父组件setState引起的 props 变化会自动同步到 deck.gl 图层这正是声明式 UI 与命令式渲染引擎的桥接点。GeoJsonLayer国家边界与机场点示例连续声明了两个GeoJsonLayer实例展示了同类型图层叠加使用的场景GeoJsonLayer idbase-map data{COUNTRIES} stroked{true} filled{true} lineWidthMinPixels{2} opacity{0.4} getLineColor{[60, 60, 60]} getFillColor{[200, 200, 200]} /id是图层唯一标识叠加多个同类型图层时必须不同lineWidthMinPixels指定线宽下限像素防止缩小视图时国界线过细opacity: 0.4让底图半透明突出上层机场点与航线getLineColor/getFillColor使用固定色数组渲染描边与填充。第二个GeoJsonLayer渲染机场点并开启交互GeoJsonLayer idairports data{AIR_PORTS} filled{true} pointRadiusMinPixels{2} pointRadiusScale{2000} getPointRadius{f 11 - f.properties.scalerank} getFillColor{[200, 0, 80, 180]} pickable{true} autoHighlight{true} onClick{onClick} /getPointRadius是访问器accessor每个机场点按scalerank属性动态计算半径重要机场更大配合pointRadiusScale与pointRadiusMinPixels控制缩放表现pickable{true}开启拾取使鼠标事件可以命中要素autoHighlight{true}让悬停要素自动高亮onClick接收拾取结果info示例通过info.object.properties弹出机场名称提示框const onClick info { if (info.object) { alert(${info.object.properties.name} (${info.object.properties.abbrev})); } };ArcLayer机场出发航线ArcLayer idarcs data{AIR_PORTS} dataTransform{d d.features.filter(f f.properties.scalerank 4)} getSourcePosition{f [-0.4531566, 51.4709959]} getTargetPosition{f f.geometry.coordinates} getSourceColor{[0, 128, 200]} getTargetColor{[200, 0, 80]} getWidth{1} /dataTransform在渲染前对加载的数据做预处理此处仅保留scalerank 4的机场避免航线过于密集getSourcePosition固定为伦敦坐标所有航线同源getTargetPosition取各机场的geometry.coordinates从而绘制出伦敦放射状航线效果起点蓝色getSourceColor、终点品红getTargetColor配合pitch: 30形成立体弧线视觉。CompassWidget开箱即用的方位控件CompassWidget /这是示例中引入的 UI 组件从deck.gl/react导入并配套加载了控件样式import {CompassWidget} from deck.gl/react; import deck.gl/widgets/stylesheet.css;CompassWidget提供罗盘/方位指示与视角复位能力其实现位于 compass-widget.tsx。它是 deck.gl 9.x 的 Widget 体系完整组件集合见 modules/react/src含 Zoom、Reset、Fullscreen、Geocoder 等十余种在 React 端的绑定让开发者无需手写 DOM 交互即可获得地图常用控件。注意deck.gl/widgets/stylesheet.css的导入是控件正常渲染的必要步骤。生产构建输出npm run build使用 Vite 对应用做生产构建JSX/ES 模块会被 tree-shaking 与压缩deck.gl 按需打包进产物最终输出静态资源目录默认dist/。部署时将该目录托管到任意静态服务器即可无需后端。若在 deck.gl 仓库内联调框架源码可改用npm run start-local借助根目录的 vite.config.local.mjs 将各modules/*作为本地源码引入便于实时调试图层实现。小结与扩展路径从本示例可以提炼出 deck.gl React 应用的通用范式用DeckGL容器 initialViewStatecontroller搭建可交互视口用 JSX 子元素声明Layerextract-jsx-layers.ts 负责抽取通过data、访问器与样式 props 控制渲染通过pickableonClick等实现要素拾取交互通过 Widget如CompassWidget快速补齐地图控件。若想进一步扩展仓库中提供了同目录下的其他入门模板React 版本examples/get-started/react含多个变体纯 JS 版本见 examples/get-started/pure-js脚本化无构建版本见 examples/get-started/scripting可对照选择最适合自己工程形态的起点。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考