当前位置：首页 > news >正文

echarts生成3D立体地图react组件

news 来源：原创 2025/8/26 6:03:51

地图+散点图效果：

react项目中安装echarts、echarts-gl依赖：

npm install echarts echarts-gl

文件目录结构：

地图组件map目录下文件代码，点击散点图圆点触发事件handleCityClick：

index.jsx：

import { useRef, useEffect, useState, useCallback } from "react";
import * as echarts from "echarts";
import 'echarts-gl';
import customSettings from "@config/customSettings";
import styles from "./style.less";const { PROVINCE_NAME, MAP_NAME, MAP_JSON } = customSettings;const ProvinceMap = ({option,onCityClick,width = "100%",height = "100%",
}) => {const [selectedCity, setSelectedCity] = useState('');const chartRef = useRef(null);const mapInstanceRef = useRef(null); // 使用ref保存实例const handleCityClick = useCallback((name) => {console.log('点击参数:', name);if (name === selectedCity) {setSelectedCity(PROVINCE_NAME);onCityClick(PROVINCE_NAME);} else {setSelectedCity(name);onCityClick(name);}}, [selectedCity, onCityClick, PROVINCE_NAME]);useEffect(() => {if (!chartRef.current) return;// 初始化图表mapInstanceRef.current = echarts.init(chartRef.current);echarts.registerMap(MAP_NAME, MAP_JSON);// 设置选项mapInstanceRef.current.setOption(option);// 添加点击事件 - 3D地图需要特殊处理const handleClick = (params) => {console.log('完整点击参数:', params);// 3D地图点击参数可能的结构const cityName = params.name ||(params.data && params.data.name) ||(params.seriesName === 'map' && params.name);if (cityName) {handleCityClick(cityName);}};mapInstanceRef.current.on('click', handleClick);// 响应式调整const resizeObserver = new ResizeObserver(() => {mapInstanceRef.current?.resize();});resizeObserver.observe(chartRef.current.parentElement);// 清理函数return () => {mapInstanceRef.current?.off('click', handleClick);mapInstanceRef.current?.dispose();resizeObserver.disconnect();};}, [option, MAP_NAME, MAP_JSON, handleCityClick]);// 单独监听selectedCity变化时不重新渲染整个地图useEffect(() => {if (!mapInstanceRef.current) return;// 更新选中状态而不重新初始化mapInstanceRef.current.setOption({series: [{selectedMode: 'single',select: {itemStyle: {color: '#FF4500' // 选中颜色}}}]}, true);}, [selectedCity]);return (<divref={chartRef}className={styles.mapClass}style={{ width, height }}/>);
};export default ProvinceMap;

如果想要点击地图区域触发点击事件可以将series的内容替换成下面的代码：

series: [{type: 'map3D',map: customSettings.MAP_NAME,regionHeight: 3, // 区域高度itemStyle: {color: '#1E90FF',borderWidth: 1},emphasis: {itemStyle: {color: '#FFA500'}}}]

mapOption.js：

import customSettings from '@config/customSettings';const backgroundColor = '#FFFFFF';
const borderColor = '#cbd1dc';export const MAP_OPTION = {tooltip: {show: false,backgroundColor,borderColor, // 修改边框颜色triggerOn: "mousemove", // 鼠标移动时触发axisPointer: {type: "none",},position: (point, params, dom, rect, size) => {// 解决tooltip在最右侧时部分被遮挡let obj = {};if (point[0] > size.viewSize[0] / 2) {// 鼠标位置位于echarts容器的一半位置右侧时，提示框显示在左侧obj["left"] = point[0] - size.contentSize[0] - 20;} else {obj["right"] = size.viewSize[0] - size.contentSize[0] * 2;}if (point[1] > size.viewSize[1] / 2) {// 鼠标位置位于echarts容器的一半位置下侧时，提示框显示在上侧obj["top"] = point[1] - size.contentSize[1] - 20;} else {obj["bottom"] = size.viewSize[1] - size.contentSize[1] * 1;}return obj;},backgroundColor: "rgba(255,255,255,0.90)", // 提示标签背景颜色textStyle: { color: "#fff" }, // 提示标签字体颜色},visualMap: {show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在type: "continuous", // 类型为连续型视觉映射calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）inRange: {// 定义在选中范围中的视觉元素color: ["#ffd289", "#ff9c45"],},},// 地理坐标系组件geo3D: {map: customSettings.MAP_NAME, // 地图名称，要和echarts注册的地图名称一致// 添加交互roam: false, // 设置为false，禁用地图的漫游功能// 添加立体效果boxHeight: 10, // 地图的高度，默认为0，即不显示立体效果regionHeight: 3, // 地图上每个区域的立体高度，默认为0，即不显示立体效果itemStyle: { // 地图区域的样式设置color: '#1E90FF20',opacity: 0.8,borderWidth: 0.5,borderColor: '#00FFFF'},emphasis: { // 鼠标悬停在地图区域上的样式设置itemStyle: {color: 'rgba(0, 153, 255, 0.3)'},label: { // 鼠标悬停在地图区域上显示的标签样式设置show: true,textStyle: {color: '#fff',fontSize: 12,backgroundColor: 'rgba(0, 0, 0, 0.7)',borderRadius: 3,padding: [4, 8]}}},light: { // 光照设置，用于增强立体效果main: { // 主光源设置intensity: 1.2, // 光源强度，默认为1.2shadow: true, // 是否显示阴影，默认为trueshadowQuality: 'high', // 阴影质量，默认为'high'alpha: 30, // 固定俯仰角度(上下)beta: 40 // 固定方位角度(左右)},ambient: { // 环境光设置intensity: 0.3 // 环境光强度，默认为0.3}},viewControl: { // 视角控制设置，用于调整地图的旋转和缩放等操作distance: 120, // 视角距离地图的距离，默认为120alpha: 40, // 固定俯仰角度(上下)beta: 0,  // 固定方位角度(左右)autoRotate: false, // 设置为falserotateSensitivity: 0, // 禁用旋转zoomSensitivity: 0, // 0:禁用缩放}},series: [{type: 'scatter3D',coordinateSystem: 'geo3D',symbolSize: 12,encode: {tooltip: 2 // 第三个值(value[2])显示在tooltip中},itemStyle: {color: '#FF4500',opacity: 0.8},emphasis: {itemStyle: {color: '#00FFFF',borderWidth: 2,borderColor: '#FFF'},label: {show: true,formatter: '{b}',color: '#FFF',backgroundColor: 'rgba(0,0,0,0.7)',padding: [4, 8]}},data: [// 格式: { name: '地市', value: [经度, 纬度, 值] }{ name: '郑州', value: [113.62, 34.75, 90] },      // 省会{ name: '洛阳', value: [112.45, 34.62, 80] },      // 古都{ name: '南阳', value: [112.53, 33.01, 75] },      // 豫西南{ name: '新乡', value: [113.88, 35.30, 70] },      // 豫北{ name: '商丘', value: [115.65, 34.45, 65] },      // 豫东{ name: '安阳', value: [114.38, 36.10, 60] },      // 豫北{ name: '开封', value: [114.31, 34.80, 55] },      // 古都{ name: '焦作', value: [113.24, 35.22, 50] },      // 豫西北{ name: '平顶山', value: [113.19, 33.77, 45] },    // 豫中{ name: '信阳', value: [114.07, 32.13, 40] },      // 豫南{ name: '周口', value: [114.65, 33.62, 35] },      // 豫东南{ name: '驻马店', value: [114.02, 32.98, 30] },    // 豫南{ name: '许昌', value: [113.81, 34.02, 25] },      // 豫中{ name: '漯河', value: [114.02, 33.58, 20] },      // 豫中{ name: '三门峡', value: [111.20, 34.78, 15] },    // 豫西{ name: '鹤壁', value: [114.30, 35.75, 10] },      // 豫北{ name: '濮阳', value: [115.03, 35.77, 8] },       // 豫东北{ name: '济源', value: [112.60, 35.08, 5] }        // 省直辖]}]
};

style.less：

.mapClass {:global {.custom-tooltip-box {width: 306px;overflow: auto;color: #868686; // li文字颜色font-size: 13px;line-height: 22px;font-weight: 400;.title-text {font-family: PingFangSC-Semibold;font-size: 15px;color: #262626;text-align: center;font-weight: 600;padding-bottom: 3px;border-bottom: 1px dashed #d9d9d9;}ul {margin-top: 7px;padding-left: 5px;padding-right: 10px;li {list-style: none;line-height: 1.5;position: relative;.value-box {position: absolute;display: inline-block;right: 0;.num {color: #262626;font-family: PingFangSC-Semibold;font-size: 13px;font-weight: 600;}}}}}}
}

引用地图组件的父组件index.jsx：

import React, { useState, useEffect } from 'react';
import { Progress, Table, Select, Drawer, Radio, DatePicker, Button, message, } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import styles from './style.less';
import ProvinceMap from './map/index';
import { MAP_OPTION } from './map/mapOption';
import { } from './service';
import customSettings from '@config/customSettings';const { PROVINCE_NAME, CAPITAL_AREA_NAME } = customSettings;export default function index() {const [mapIndexsObj, setMapIndexsObj] = useState([]); // 省地市指标值const [mapOption, setMapOption] = useState({}); // 地图optionconst [areaName, setAreaName] = useState(CAPITAL_AREA_NAME); // 地市名称// 获取地图optionuseEffect(() => {let option = { ...MAP_OPTION };// 鼠标移到图里面的浮动提示框option.tooltip.formatter = (params) => {const { name } = params;let shortName = '';if (PROVINCE_NAME.includes('内蒙')) {shortName = name.slice(0, name.length - 1);} else {shortName = name;}let tooltipHtml = `<div class="custom-tooltip-box"><div class="title-text">${shortName}</div><ul>`;// 使用 map 函数遍历数据并构建 HTML 字符串tooltipHtml += mapIndexsObj[shortName]?.map((item, index) => `<li><span>${item.label}</span><div class="value-box"><span class="num">${(item.value != undefined && item.value != null) ? item.value : '--'}</span><span class="unit" style="display: ${(item.value != undefined && item.value != null) ? 'inline' : 'none'}">${item.unit}</span></div></li>`).join('') || ''; // .join('')去除map返回结果中的逗号tooltipHtml += `</ul></div>`return tooltipHtml;};setMapOption(option);}, [mapIndexsObj]);// 点击地图获取地市名称const handleCityClick = (cityName) => {setAreaName(cityName);};return (<div className={styles.container}><ProvinceMap option={mapOption} onCityClick={handleCityClick} /></div>)
}

配置项文件customSettings：

// 用于设置地图、查询条件中“地市”下拉菜单的初始值
import henanMap from "@/assets/map/henan.json";export default {PROVINCE_ID: 37, // 与接口返回的类型保持一致PROVINCE_NAME: '河南省',CAPITAL_AREA_ID: 371, // 与接口返回的类型保持一致CAPITAL_AREA_NAME: '郑州市',MAP_JSON: henanMap,MAP_NAME: 'henan',
};

echarts生成3D立体地图react组件

地图散点图效果： react项目中安装echarts、echarts-gl依赖： npm install echarts echarts-gl 文件目录结构： 地图组件map目录下文件代码，点击散点图圆点触发事件handleCityClick： index.jsx： import { …...

编程日记 2025/8/26 6:03:51

Node.js 中处理 Excel 文件的最佳实践

在现代应用开发中，Excel 文件仍然是数据交换和存储的重要格式之一。在 Node.js 环境中，处理 Excel 文件的需求日益增加。本文将介绍如何在 Node.js 中高效地处理 Excel 文件，涵盖工具选择、基本操作和最佳实践。 1. 选择合适的库在 Node.js…...

编程日记 2025/8/25 9:19:34

解决Ubuntu系统鼠标不流畅的问题

电脑是联想的台式组装机，安装ubuntu系统（不管是16、18、20、22）后，鼠标都不流畅。最近几天想解决这个问题，于是怀疑到了显卡驱动上。怀疑之前一直用的是集成显卡，而不是独立显卡，毕竟2060的显卡…...

编程日记 2025/8/23 1:16:34

【Linux】虚拟机设置静态IP

主播我今天下午学了几节微服务课，上课的时候，直接把手机拿走了去上课（电脑连的我手机的热点），虚拟机没关，晚上主播我回来继续学，电脑连上热点之后，发现虚拟机连接不上了，…...

编程日记 2025/8/21 19:32:32

Web API：AbortController

Web API：AbortController 主要用途基本工作原理基本用法示例高级用例1. 实现请求超时2. 取消多个请求3. 与其他异步 API 一起使用浏览器支持总结主要用途 AbortController 是一个 Web API，主要用于取消一个或多个 Web 请求（如 fetch 请求&…...

编程日记 2025/8/22 20:10:44

服务器配置虚拟IP

服务器配置虚拟IP的核心步骤取决于具体场景，主要包括本地单机多IP配置和高可用集群下的虚拟IP管理两种模式。‌ 一、本地虚拟IP配置（单服务器多IP） ‌基于Linux系统‌： ‌确认网络接口‌：使用 ip addr 或 ifconfig 查…...

编程日记 2025/8/26 6:03:50

《AI大模型应知应会100篇》第5篇：大模型发展简史：从BERT到ChatGPT的演进

第5篇：大模型发展简史：从BERT到ChatGPT的演进摘要近年来，人工智能领域最引人注目的进步之一是大模型（Large Language Models, LLMs）的发展。这些模型不仅推动了自然语言处理（NLP）技术的飞跃&…...

编程日记 2025/8/26 6:03:49

小球反弹(蓝桥杯C语言)

有一长方形，长为 343720343720 单位长度，宽为 233333233333 单位长度。在其内部左上角顶点有一小球 (无视其体积)，其初速度如图所示且保持运动速率不变，分解到长宽两个方向上的速率之比为 dx:dy15:17dx:dy15:17。小球碰到长方形的…...

编程日记 2025/8/24 10:25:30

Java面试39-Zookeeper中的Watch机制的原理

Zookeeper是一个分布式协调组件，为分布式架构下的多个应用组件提供了顺序访问控制能力。它的数据存储采用了类似于文件系统的树形结构，以节点的方式来管理存储在Zookeeper上的数据。 Zookeeper提供了一个Watch机制，可以让客户端感知到Zooke…...

编程日记 2025/8/22 15:23:09

3️⃣ Coze工作流基础教学（2025年全新版本）

目录一、什么是工作流二、为什么用工作流三、工作流使用场景四、怎么学习工作流五、工作流功能概述六、制作工作流基础流程 6.1 创建工作流 6.2 配置工作流 6.3 调试工作流 6.4 发布工作流 6.5 使用工作流 6.6 复制工作流 6.7 删除工作流 6.8 设置工作流异…...

编程日记 2025/8/23 7:51:48

备战蓝桥杯——走迷宫问题（BFS解决）

这是一个经典的BFS算法 1. BFS算法保证最短路径核心机制：广度优先搜索按层遍历所有可能的路径，首次到达终点的路径长度即为最短步数。这是BFS的核心优势。队列的作用：通过队列按先进先出的顺序处理节点，确保每一步探索的都是当…...

编程日记 2025/8/25 19:23:29

usbip学习记录

USB/IP: USB device sharing over IP make menuconfig配置： Device Drivers -> Staging drivers -> USB/IP support Device Drivers -> Staging drivers -> USB/IP support -> Host driver 如果还有作为客户端的需要，继续做以下配置&a…...

编程日记 2025/8/26 6:01:55

示例01 -gen-dialect-decls toy_dia.1.toy include "mlir/IR/OpBase.td" //include "mlir/IR/FunctionInterfaces.td" //include "mlir/IR/SymbolInterfaces.td" //include "mlir/Interfaces/SideEffectInterfaces.td"def Toy_Diale…...

编程日记 2025/8/24 14:52:42

AI大模型与未来社会结构的重构：从工具到共生体

一、引言：从蒸汽机到ChatGPT，文明的每一次跃迁都始于“工具的自我进化” 历史长河中，每一次技术革命，都伴随着人类社会组织、认知方式乃至价值体系的巨变。从18世纪的蒸汽机到20世纪的信息技术，再到21世纪的人工智能&…...

编程日记 2025/8/17 23:25:10

2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/23 17:44:52

免费Deepseek-v3接口实现Browser-Use Web UI：浏览器自动化本地模拟抓取数据实录

源码 https://github.com/browser-use/web-ui 我们按照官方教程，修订几个环节，更快地部署步骤 1：克隆存储库 git clone https://github.com/browser-use/web-ui.git cd web-ui Step 2: Set Up Python Environment 第 2 步：设置…...

编程日记 2025/8/25 20:22:37

Bash判断命令是否存在

在 Bash 脚本里，你可以通过多种方法判断某个命令是否存在。下面为你详细介绍几种常见的判断方式。 1. 使用command -v command -v命令能够返回指定命令的可执行文件路径，如果该命令不存在则不会有输出。借助这一特性，我们可以结合条件判断语…...

编程日记 2025/8/22 7:39:55

双指针(滑动窗口)

用于在数组或字符串的进行快速排序匹配排序或移动操作。双指针不是真的指针，只是用两个变量来表示下标(在后面都用指针来表示) 双指针往往和单调性排序联系在一起，暴力往往是O(n方)双指针利用单调性可以优化到o(n) 有对撞指针快慢指针美丽区间…...

编程日记 2025/8/22 7:44:26

在PPT中同时自动播放多个视频的方法

在PPT中同时自动播放多个视频的方法文章目录在PPT中同时自动播放多个视频的方法1 准备视频2 设置动画为“出现”3 设置所有视频为“自动播放”4 最终效果与其他设置在PPT制作的过程中，我们经常遇到需要同时自动播放多个视频的情况。本文将详细介绍实现这种效果的…...

编程日记 2025/8/21 14:44:24

使用 Vue 快速集成 FullCalendar 日历组件教程

FullCalendar 是一款功能强大的 JavaScript 日历组件，支持 React/Vue 等主流框架，提供丰富的日历视图和交互功能。本文将手把手教你在 Vue 项目中快速集成，并演示核心功能实现。 📦 主要特性亮点 ✅ 月/周/日多视图切换 ✅…...

编程日记 2025/8/22 7:39:55

xv6-labs-2024 lab2

lab-2 0. 前置课程记录操作系统的隔离性，举例说明就是，当我们的shell，或者qq挂掉了，我们不希望因为他，去影响其他的进程，所以在不同的应用程序之间，需要有隔离性，并且&#xff0…...

编程日记 2025/8/21 13:42:32

redis导入成功，缺不显示数据

SpringBootTest class SecurityApplicationTests {AutowiredStringRedisTemplate template; //添加这句代码，自动装载，即可解决文章三处代码报错Testvoid contextLoads() {String compact Jwts.builder().signWith(Jwts.SIG.HS512.key().build()).subj…...

编程日记 2025/8/22 1:20:26

Flink对比Spark streaming、Storm

对比Spark streaming、Storm 产品模型语义容错机制状态管理延时吞吐量 Storm native at-least-once ack 无 low low Spark streaming micro-batch exactly-once RDD checkpoint 有 medium high Flink native exactly-once checkpoint 有 low …...

编程日记 2025/8/22 7:42:26

力扣316去除重复字母-单调栈

题目来源: 给你一个字符串 s ，请你去除字符串中重复的字母，使得每个字母只出现一次。需保证返回结果的字典序最小（要求不能打乱其他字符的相对位置）。示例 1： 输入：s "bcabc" 输出&#xff…...

编程日记 2025/8/22 7:40:22

第421场周赛：数组的最大因子得分、

Q1、数组的最大因子得分 1、题目描述给你一个整数数组 nums。因子得分定义为数组所有元素的最小公倍数（LCM）与最大公约数（GCD）的乘积。在最多移除一个元素的情况下，返回 nums 的最大因子得分。注意&…...

编程日记 2025/8/23 17:03:33

COMSOL 与人工智能融合的多物理场应用：28个案例的思路、方法与工具概述

应用案例概述基于 COMSOL 与人工智能（AI）结合的应用案例涵盖了 28 个多领域场景，包括工程（如热传导优化、结构力学预测）、能源（如电池热管理、燃料电池性能）、生物医学（如药物传递…...

编程日记 2025/8/21 20:15:02

【算法】插入排序

算法系列五：插入排序一、直接插入排序 1.原理 2.实现 3.性质 3.1时间复杂度 3.2空间复杂度 3.3稳定性二、希尔排序 1.原理 1.1优化方向 1.2优化原理 2.设计 2.1比较无序时 2.2比较有序时 3.实现 4.性质 4.1时间复杂度 4.2空间复杂度 4.3稳定性…...

编程日记 2025/8/24 5:08:25

企业展示型网站模板HTML5网站模板下载指南

在当今数字化浪潮中，企业网站已成为企业展示形象、推广产品和服务的重要窗口。一个设计精美、功能完善的企业展示型网站，不仅能提升企业的品牌形象，还能吸引潜在客户，促进业务增长。而HTML5网站模板，凭借其跨平台兼容性…...

编程日记 2025/8/22 7:40:22

C盘清理——快速处理

C盘清理 | 快速处理软件：小番茄C盘清理 https://ccleancdn.xkbrowser.com/cleanmaster/FanQieClean_13054_st.exe 前言：为什么需要专业的C盘清理工具？ 作为一位长期与Windows系统打交道的技术博主，我深知C盘空间不足带来的痛苦…...

编程日记 2025/8/22 7:42:28

什么是模型驱动开发MDD?有哪些应用场景？

模型驱动开发（Model-Driven Development，MDD）是一种以模型为核心的软件开发方法，其核心思想是通过创建高层次的抽象模型来描述系统的结构和行为，而非直接编写代码。这些模型经过自动化工具的转换或生成，最终…...

编程日记 2025/8/22 7:28:05

uniapp小程序生成海报/图片并保存分享

调研结果： 方法一：canvasuni.canvasToTempFilePath耗时太长，现在卡在canvas的绘制有问题，canvas绘制的部分东西不生效但是找不到原因方法二：使用wxml-to-canvas其实也差不多是用canvas手动绘制，可能会卡在…...

编程日记 2025/8/21 17:18:45

从IoT到AIoT：智能边界的拓展与AI未来趋势预测

文章目录引言：从连接万物到感知万物1. AIoT的本质：将智能嵌入万物2. AIoT的推动力量与挑战2.1 推动力量2.2 关键挑战 3. 五大AIoT未来趋势预测趋势一：边缘智能将成为主流架构趋势二：AI模型将向自适应与多任务演进趋势三&#xff…...

编程日记 2025/8/24 14:05:45

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/24 6:44:02

2140 星期计算

2140 星期计算 ⭐️难度：中等 🌟考点：2022、思维、省赛 📖 📚 1️⃣法一： 同余定理， import java.util.Scanner;public class Main2 {public static void main(String[] args) {Scanner sc …...

编程日记 2025/8/22 7:39:53

NVIDIA Jetson 环境安装指导 PyTorch | Conda | cudnn | docker

本文适用于Jetson Nano、TX1/TX2、Xavier 和 Orin系列的设备，供大家参考。 1、PyTorch不同版本安装这里适用于Jetson Nano、TX1/TX2、Xavier 和 Orin ，需要JetPack 4.2以上。下载地址：PyTorch for Jetson - Jetson & Embedded System…...

编程日记 2025/8/22 7:36:13

理解 Rust 中的 String 分配机制

在 Rust 中，哪怕是一行再普通不过的代码，也可能暗藏玄机。这次我们就来剖析这样一句看似简单的代码： let s "hello world".to_string();这行代码触发了只读数据段（.rodata）、堆（heap&#xff0…...

编程日记 2025/8/22 7:40:25

园区网拓扑练习

1.拓扑图要求 1.按照图示的VLAN及IP地址需求，完成相关配需 2、要求SW1为VLAN 2/3的主根及主网关，SW2为vlan 20/30的主根及主网关，SW1和SW2互为备份 3.上层通过静态路由协议完成数据通信过程 4.AR1为企业出口路由器 5.要求全网可达 2.需求分…...

编程日记 2025/8/22 7:40:55

CentralCache

目录一、Span和Spanlist 二、CentralCache 一、Span和Spanlist CentralCache其实也是哈希桶结构，只不过他是一个个的Span（Span是管理一定数量的页的结构），而且Span会管理一个freelist，用来挂起一个个的小内存块给Th…...

编程日记 2025/8/22 7:39:54

STM32 基础1

什么是GPIO的上拉和下拉电阻下拉电阻：把一个不确定的信号通过电阳连接到地，其实就是初始化为低电平。上拉电阻：把一个不确定的信号通过电连接到高电平，其实就是初始化为高电平。本质：上拉地注入电流，下…...

编程日记 2025/8/22 7:42:55

Python爬虫第5节-urllib的异常处理、链接解析及 Robots 协议分析

目录一、处理异常 1.1 URLError 1.2 HTTPError 二、解析链接 2.1 urlparse() 2.2 urlunparse() 2.3 urlsplit() 2.4 urlunsplit() 2.5 urljoin() 2.6 urlencode() 2.7 parse_qs() 2.8 parse_qsl() 2.9 quote() 2.10 unquote() 三、分析网站Robots协议 3.1 R…...

编程日记 2025/8/22 7:39:54

STM32——DAC转换

DAC简介 DAC，全称：Digital-to-Analog Converter，扑指数字/模拟转换器 ADC和DAC是模拟电路与数字电路之间的桥梁 DAC的特性参数 1.分辨率： 表示模拟电压的最小增量，常用二进制位数表示，比如&#xff1a…...

编程日记 2025/8/22 7:37:55

因果推断【Causal Inference】（一）

文章目录 1. 什么是因果推断？2. 为什么要提出因果推断？Motivation：辛普森悖论Scenario 1Scenario 2 3. 【Note】相关性≠因果3.1 混淆(Confounding)——共同原因3.2 样本选择偏差(Selection Bias)——共同结果 4. 潜在结果(Potential Outcome…...

编程日记 2025/8/22 7:42:27

人工智能通识速览（Part5. 大语言模型）

五、大语言模型 1.NLP 自然语言处理（Natural Language Processing, NLP）是人工智能领域的一个重要分支，专注于研究计算机如何理解、生成和处理人类语言。它的目标是让机器能够像人类一样“读懂”文本或语音，并执行翻译、问答、摘…...

编程日记 2025/8/22 7:43:42

优化 Django 数据库查询

优化 Django 数据库查询推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录优化 Django 数据库查询**理解 N+1 查询问题****`select_related`：外键的急加载**示例何时使用 `select_re…...

编程日记 2025/8/22 7:44:59

MCP AI：下一代智能微服务控制平台 (.NET Core)

平台概述 MCP AI (Microservice Control Platform AI) 是基于.NET Core构建的下一代智能微服务控制平台，旨在为企业级微服务架构提供智能化、自动化的管理和控制能力。核心特性智能服务编排 AI驱动的动态服务路由自适应负载均衡算法预测性扩展与收缩统一…...

编程日记 2025/8/22 7:40:55

计算机网络基础：系列教程汇总

计算机网络基础：系列教程汇总一、前言二、计算机网络基础概要三、计算机网络基础3.1 计算机网络基础：揭开网络世界的神秘面纱3.2 计算机网络基础：剖析网络的构成要素3.3 计算机网络基础：认识网络拓扑结构3.4 计算机网络基础：解析网络协议3.5 计算机网络基础：了解网络类型…...

编程日记 2025/8/22 7:36:14

互联网三高-高性能之JVM调优

1 运行时数据区 JVM运行时数据区是Java虚拟机管理的内存核心模块，主要分为线程共享和线程私有两部分。 （1）线程私有 ① 程序计数器：存储当前线程执行字节码指令的地址，用于分支、循环、异常处理等流程控制‌ ② 虚拟机…...

编程日记 2025/8/22 7:38:29

学习比较JVM篇（六）：解读GC日志

一、前言在之前的文章中，我们对JVM的结构、垃圾回收算法、垃圾回收器做了一些列的讲解，同时也使用了JVM自带的命令行工具进行了实际操作。今天我们继续讲解JVM。我们学习JVM的目的是为了了解JVM，然后优化对应的参数。那么如何了解JVM运行…...

编程日记 2025/8/22 7:38:29

说说你对python的理解，有什么特性？

Python是一种高级、解释型、通用的编程语言，由Guido van Rossum于1991年首次发布。经过30多年的发展，Python已成为最受欢迎的编程语言之一，在Web开发、数据分析、人工智能、自动化运维等多个领域都有广泛应用。 Python的核心特性 1. 简洁优…...

编程日记 2025/8/22 7:37:56

【C语言】编译和链接

一、编译环境和运行环境在ANSI C的任何一种实现中，存在着两个不同的环境： 1、翻译环境：在翻译环境中，其会通过编译和链接两个大的步骤，其中编译又分为了预处理（这个我们后面还会详细讲解&#x…...

编程日记 2025/8/24 15:03:33

相关文章：