自建网站需要什么手续2021安全员证报名入口

自建网站需要什么手续,2021安全员证报名入口,全国做网站的大公司有哪些,图片展示类的wordpress主题在 WebGIS 开发中#xff0c;空间分析与数据可视化是密不可分的 ——Turf.js 能高效完成面积计算、长度统计、空间分布等核心分析#xff0c;但分析结果需要直观的图表展示才能发挥价值。ECharts 作为国内最主流的数据可视化库#xff0c;支持柱状图、热力图、折线图等多种图…在 WebGIS 开发中空间分析与数据可视化是密不可分的 ——Turf.js 能高效完成面积计算、长度统计、空间分布等核心分析但分析结果需要直观的图表展示才能发挥价值。ECharts 作为国内最主流的数据可视化库支持柱状图、热力图、折线图等多种图表类型可完美承接 Turf.js 的分析结果。本文将通过空间数据可视化实战案例带你掌握 Turf.js 与 ECharts 的结合使用方法实现 “空间分析计算 图表化展示” 的完整流程覆盖区域面积对比、路线长度统计、空间分布热力图三大核心场景。一、技术栈说明框架Vue3Composition API script setup空间分析Turf.jsturf/turf v7核心 APIpolygon、lineString、area、length数据可视化ECharts v5核心图表柱状图、热力图UI 组件库Element Plus卡片、栅格、分割线样式原生 CSS响应式布局核心功能区域面积计算与柱状图展示、路线长度计算与柱状图展示、空间点分布热力图展示、响应式图表适配、数据源实时更新联动二、环境搭建复用前序环境若已完成前序文章的 Vue3 环境搭建仅需新增 ECharts 依赖若未搭建执行以下命令# 1. 初始化Vue3项目如需新建 npm create vitelatest turf-echarts-demo -- --template vue cd turf-echarts-demo npm install # 2. 安装核心依赖 npm install turf/turf element-plus element-plus/icons-vue echarts --save三、核心功能实现空间分析结果可视化组件1. 组件完整代码可直接复用template div classcharts-container el-card !-- 标题区域 -- div classheader h2空间数据可视化面积/长度/热力/h2 /div !-- 图表展示区域三列布局 -- div classgrid3 div classpanel div classsubtitle区域面积对比图表/div div refareaChartEl classchart/div /div div classpanel div classsubtitle路线长度统计柱状图/div div reflengthChartEl classchart/div /div div classpanel div classsubtitle空间分布热力图结合/div div refheatmapChartEl classchart/div /div /div el-divider / !-- 数据源展示区域 -- div classinputs div classsubtitle数据源GeoJSON 简化示例/div el-row :gutter12 el-col :span8 el-card shadownever div classmini-title区域集合 (Polygon)/div pre classcode{{ JSON.stringify(polygons, null, 2) }}/pre /el-card /el-col el-col :span8 el-card shadownever div classmini-title路线集合 (LineString)/div pre classcode{{ JSON.stringify(routes, null, 2) }}/pre /el-card /el-col el-col :span8 el-card shadownever div classmini-title点集合 (Heatmap)/div pre classcode {{ JSON.stringify( points.slice(0, 12), null, 2 ) }}{{ points.length 12 ? \n... ( points.length 总数) : }}/pre /el-card /el-col /el-row /div /el-card /div /template script setup import { ref, onMounted, onBeforeUnmount, watch } from vue; import * as echarts from echarts; import { polygon as turfPolygon, lineString as turfLineString, area as turfArea, length as turfLength, } from turf/turf; // --- 1. DOM引用与图表实例管理 --- const areaChartEl ref(null); // 面积图表容器 const lengthChartEl ref(null); // 长度图表容器 const heatmapChartEl ref(null); // 热力图容器 let areaChart null; // 面积图表实例 let lengthChart null; // 长度图表实例 let heatmapChart null; // 热力图实例 // --- 2. 数据源定义 --- // 区域集合Polygon北京天安门周边三个区域 const polygons ref([ turfPolygon( [ [ [116.38, 39.9], [116.42, 39.9], [116.42, 39.92], [116.38, 39.92], [116.38, 39.9], ], ], { name: 区域A } ), turfPolygon( [ [ [116.35, 39.88], [116.41, 39.88], [116.41, 39.895], [116.35, 39.895], [116.35, 39.88], ], ], { name: 区域B } ), turfPolygon( [ [ [116.43, 39.91], [116.45, 39.91], [116.45, 39.935], [116.43, 39.935], [116.43, 39.91], ], ], { name: 区域C } ), ]); // 路线集合LineString三条示例路线 const routes ref([ turfLineString( [ [116.37, 39.91], [116.4, 39.91], [116.43, 39.91], ], { name: 路线一 } ), turfLineString( [ [116.38, 39.9], [116.4, 39.92], [116.42, 39.94], ], { name: 路线二 } ), turfLineString( [ [116.39, 39.89], [116.41, 39.9], [116.43, 39.89], [116.45, 39.9], ], { name: 路线三 } ), ]); // 随机生成空间点集合用于热力图 const points ref(generatePoints([116.35, 39.88, 116.46, 39.95], 300)); /** * 生成指定范围内的随机点集合 * param {Array} bbox - 边界框 [minX, minY, maxX, maxY] * param {number} count - 点数量 * returns {Array} 点集合 [[lng, lat, value], ...] */ function generatePoints(bbox, count) { const [minX, minY, maxX, maxY] bbox; const arr []; for (let i 0; i count; i) { // 随机经度保留6位小数 const x (minX Math.random() * (maxX - minX)).toFixed(6); // 随机纬度保留6位小数 const y (minY Math.random() * (maxY - minY)).toFixed(6); // 随机值10~100 const v Math.round(10 Math.random() * 90); arr.push([x, y, v]); } return arr; } // --- 3. 图表配置构建函数 --- /** * 构建面积对比图表配置 * returns {Object} ECharts配置项 */ function buildAreaOption() { // 提取区域名称 const names polygons.value.map( (p, i) p.properties?.name ?? 区域${i 1} ); // Turf.js计算面积单位平方米 const values polygons.value.map((p) turfArea(p)); return { grid: { left: 40, right: 20, top: 40, bottom: 40 }, // 图表网格 tooltip: { trigger: axis }, // 提示框坐标轴触发 xAxis: { type: category, data: names }, // X轴区域名称 yAxis: { type: value, name: 面积(㎡) }, // Y轴面积值 series: [ { type: bar, // 柱状图 data: values, itemStyle: { color: #5470C6 } // 柱子颜色 }, ], }; } /** * 构建路线长度统计图表配置 * returns {Object} ECharts配置项 */ function buildLengthOption() { // 提取路线名称 const names routes.value.map( (r, i) r.properties?.name ?? 路线${i 1} ); // Turf.js计算长度单位公里 const values routes.value.map((r) turfLength(r, { units: kilometers }) ); return { grid: { left: 40, right: 20, top: 40, bottom: 40 }, tooltip: { trigger: axis }, xAxis: { type: category, data: names }, yAxis: { type: value, name: 长度(km) }, series: [ { type: bar, data: values, itemStyle: { color: #91CC75 } }, ], }; } /** * 构建空间分布热力图配置 * returns {Object} ECharts配置项 */ function buildHeatmapOption() { // 热力图边界范围 const xMin 116.35; const xMax 116.46; const yMin 39.88; const yMax 39.95; // 热力图网格数量24x24 const bins 24; const xStep (xMax - xMin) / bins; // 经度步长 const yStep (yMax - yMin) / bins; // 纬度步长 // 生成X/Y轴分类数据 const xCats Array.from( { length: bins }, (_, i) (xMin i * xStep).toFixed(3) ); const yCats Array.from( { length: bins }, (_, i) (yMin i * yStep).toFixed(3) ); // 初始化网格数据全0 const grid Array.from({ length: bins }, () Array.from({ length: bins }, () 0) ); // 填充网格数据统计每个网格内的点值总和 for (const [x, y, v] of points.value) { // 计算点所在的网格索引 const xi Math.max( 0, Math.min(bins - 1, Math.floor((x - xMin) / xStep)) ); const yi Math.max( 0, Math.min(bins - 1, Math.floor((y - yMin) / yStep)) ); grid[yi][xi] v; // 累加值 } // 转换为ECharts热力图数据格式 [xi, yi, value] const data []; for (let yi 0; yi bins; yi) { for (let xi 0; xi bins; xi) { data.push([xi, yi, grid[yi][xi]]); } } return { grid: { left: 40, right: 20, top: 40, bottom: 60 }, tooltip: { position: top, // 自定义提示框内容显示经纬度值 formatter: (p) (${xCats[p.data[0]]}, ${yCats[p.data[1]]}) - ${p.data[2]}, }, xAxis: { type: category, data: xCats, name: 经度 }, yAxis: { type: category, data: yCats, name: 纬度 }, // 视觉映射组件颜色渐变 visualMap: { min: 0, max: Math.max(...data.map((d) d[2])), // 最大值自适应 calculable: true, // 可拖动调整范围 orient: horizontal, // 水平布局 left: center, bottom: 0, }, series: [ { type: heatmap, // 热力图类型 data, progressive: 200, // 渐进式渲染优化性能 }, ], }; } // --- 4. 图表初始化与销毁 --- /** * 初始化所有图表 */ function initCharts() { // 创建图表实例避免重复创建 if (areaChartEl.value !areaChart) { areaChart echarts.init(areaChartEl.value); } if (lengthChartEl.value !lengthChart) { lengthChart echarts.init(lengthChartEl.value); } if (heatmapChartEl.value !heatmapChart) { heatmapChart echarts.init(heatmapChartEl.value); } // 设置图表配置项 if (areaChart) areaChart.setOption(buildAreaOption()); if (lengthChart) lengthChart.setOption(buildLengthOption()); if (heatmapChart) heatmapChart.setOption(buildHeatmapOption()); // 关联面积/长度图表实现联动缩放/高亮 if (areaChart lengthChart) { areaChart.group analysis-group; lengthChart.group analysis-group; echarts.connect(analysis-group); } } /** * 销毁所有图表实例防止内存泄漏 */ function disposeCharts() { if (areaChart) { areaChart.dispose(); areaChart null; } if (lengthChart) { lengthChart.dispose(); lengthChart null; } if (heatmapChart) { heatmapChart.dispose(); heatmapChart null; } } /** * 处理窗口大小变化图表自适应 */ function handleResize() { areaChart?.resize(); lengthChart?.resize(); heatmapChart?.resize(); } // --- 5. 生命周期钩子 --- onMounted(() { initCharts(); // 初始化图表 window.addEventListener(resize, handleResize); // 监听窗口大小变化 }); onBeforeUnmount(() { window.removeEventListener(resize, handleResize); // 移除监听 disposeCharts(); // 销毁图表 }); // --- 6. 数据源监听实时更新图表 --- watch( [polygons, routes, points], () { // 重新设置配置项true表示重置所有配置 if (areaChart) areaChart.setOption(buildAreaOption(), true); if (lengthChart) lengthChart.setOption(buildLengthOption(), true); if (heatmapChart) heatmapChart.setOption(buildHeatmapOption(), true); }, { deep: true } // 深度监听对象/数组内部变化 ); /script style scoped .charts-container { margin-top: 24px; text-align: left; padding: 0 16px; } .header { margin-bottom: 12px; } .desc { color: #666; font-size: 13px; } /* 三列网格布局 */ .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .panel { display: flex; flex-direction: column; } .subtitle { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #303133; } .mini-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #606266; } /* 图表容器样式 */ .chart { width: 100%; height: 320px; border-radius: 8px; background-color: #f8f9fa; } /* 代码展示样式 */ .inputs .code { max-height: 260px; overflow: auto; background: #fafafa; padding: 8px; border-radius: 6px; font-size: 12px; line-height: 1.4; color: #333; } /* 响应式适配 */ media (max-width: 1200px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } media (max-width: 768px) { .grid3 { grid-template-columns: 1fr; } .chart { height: 240px; } } /style2. 核心代码深度解析1Turf.js 与 ECharts 的核心衔接逻辑// 1. Turf.js计算空间数据指标 const areaValues polygons.value.map(p turfArea(p)); // 计算面积 const lengthValues routes.value.map(r turfLength(r, { units: km })); // 计算长度 // 2. 转换为ECharts可识别的数据格式 const areaOption { xAxis: { data: [区域A, 区域B, 区域C] }, yAxis: { name: 面积(㎡) }, series: [{ type: bar, data: areaValues }] }; // 3. ECharts渲染图表 areaChart.setOption(areaOption);Turf.js 职责专注于空间数据计算面积、长度输出数值型结果ECharts 职责将数值结果转换为可视化图表提供交互能力核心转换将 Turf.js 计算的数值数组映射为 ECharts 的series.data属性。2Turf.js 核心 API 详解API作用关键参数说明turfPolygon(coords, properties)创建面要素-coords面坐标数组-properties自定义属性如名称turfLineString(coords, properties)创建线要素-coords线坐标数组-properties自定义属性turfArea(polygon)计算面面积- 返回值平方米地球曲面面积非平面turfLength(line, options)计算线长度-options.units单位kilometers/meters/miles 等- 返回值指定单位的长度3热力图核心实现逻辑热力图是空间分布可视化的核心实现步骤网格划分将经纬度范围划分为 24x24 的网格bins 24点归属计算判断每个点属于哪个网格并累加点值数据转换将网格数据转换为 ECharts 热力图格式[xi, yi, value]视觉映射通过visualMap组件实现值到颜色的渐变映射。核心代码片段// 填充网格数据 for (const [x, y, v] of points.value) { const xi Math.floor((x - xMin) / xStep); // 经度网格索引 const yi Math.floor((y - yMin) / yStep); // 纬度网格索引 grid[yi][xi] v; // 累加值 } // 转换为ECharts数据格式 const data []; for (let yi 0; yi bins; yi) { for (let xi 0; xi bins; xi) { data.push([xi, yi, grid[yi][xi]]); } }4关键优化点图表实例管理避免重复创建通过!areaChart判断是否已创建实例销毁实例组件卸载时调用dispose()释放内存自适应调整监听resize事件调用resize()适配窗口大小。数据源监听深度监听通过{ deep: true }监听数组 / 对象内部变化实时更新数据源变化时重新构建配置项更新图表。图表联动通过echarts.connect()关联面积 / 长度图表实现联动缩放、高亮提升用户体验操作一个图表时另一个图表同步响应。性能优化热力图渐进式渲染progressive: 200分批渲染数据点集合截断展示只显示前 12 个点避免 DOM 渲染压力响应式布局适配不同屏幕尺寸保证移动端体验。四、功能效果演示1. 基础效果启动项目后页面显示三个核心图表区域面积对比图表柱状图展示三个区域的面积平方米路线长度统计柱状图柱状图展示三条路线的长度公里空间分布热力图展示 300 个随机点的空间分布密度颜色越深值越高。下方展示原始数据源GeoJSON 格式便于对照分析结果支持窗口大小自适应图表会自动调整尺寸面积 / 长度图表支持联动缩放 / 高亮同步。2. 交互效果操作效果鼠标悬停柱状图显示具体数值面积 / 长度鼠标悬停热力图显示网格经纬度和累加值拖动热力图视觉映射滑块调整热力图颜色渐变范围缩放 / 平移面积图表长度图表同步缩放 / 平移联动效果修改数据源如新增区域图表实时更新需手动修改代码测试3. 关键数据示例区域面积区域 A约 4.4 平方公里4,400,000 平方米区域 B约 2.1 平方公里2,100,000 平方米区域 C约 0.8 平方公里800,000 平方米。路线长度路线一约 6 公里路线二约 4.5 公里路线三约 7.2 公里。五、代码仓库地址完整代码已上传至 Gitee可直接克隆运行https://gitee.com/tang-yunyan-syp/turfjs-vue3-demo.git六、专栏地址本文已同步至 CSDN 专栏可查看更多 Turf.js 实战内容https://blog.csdn.net/m0_72065108/article/details/155226062?spm1001.2014.3001.5501七、实战拓展方向更多图表类型折线图展示路线长度随时间的变化饼图展示各区域面积占比散点图结合经纬度展示点的分布与属性地图结合ECharts 地图组件 Turf.js 分析结果如在地图上标注面积 / 长度。交互能力扩展数据筛选添加筛选条件动态过滤数据源图表切换支持柱状图 / 折线图 / 饼图切换展示数据导出支持导出图表数据为 Excel/CSV自定义样式支持调整图表颜色、字体、大小。高级空间分析缓冲区面积统计计算不同半径缓冲区的面积生成折线图空间密度分析结合 Turf.js 的hex-grid生成六边形网格统计每个网格的点密度路径对比多条路径的长度、耗时对比生成组合图表动态数据接入实时数据接口实现图表实时刷新。性能优化大数据量处理使用 ECharts 的dataset组件优化大数据渲染Web Worker将 Turf.js 计算逻辑放入 Web Worker避免阻塞主线程懒加载图表区域进入视口时再初始化提升页面加载速度缓存计算结果缓存 Turf.js 计算结果避免重复计算。八、常见问题排查图表不显示原因容器未设置宽高或初始化时机过早解决方案确保chart类设置了width: 100%; height: 320px在onMounted中初始化图表。热力图数据异常原因网格索引越界或点坐标超出范围解决方案使用Math.max(0, Math.min(bins-1, index))限制索引范围。Turf.js 计算结果异常原因坐标顺序错误Turf.js 为[lng, lat]解决方案确保坐标数组为[经度, 纬度]顺序。图表联动失效原因未设置group或echarts.connect()调用时机错误解决方案确保图表实例创建后再设置group并调用connect()。内存泄漏原因未销毁图表实例或移除事件监听解决方案在onBeforeUnmount中调用dispose()和removeEventListener()。总结本文通过 Turf.js ECharts 的结合实现了 “空间分析 数据可视化” 的完整闭环掌握了 Turf.js 核心空间计算 API面积、长度的使用方法实现了 Turf.js 分析结果到 ECharts 图表的转换与渲染完成了三大核心可视化场景面积对比、长度统计、空间分布热力图梳理了图表实例管理、响应式适配、数据联动等关键优化点。