【GeoJSON点、线、面在SF地图中的应用教程】

GeoJSON点、线、面在地图中的应用教程

SFMap

一、引言

GeoJSON是一种对各种地理数据结构进行编码的格式，常用于在地图上展示不同的地理要素，如点、线、面。本教程将详细介绍如何使用GeoJSON来表示点、线、面的单个与多个数组形式，并结合代码示例展示它们在地图上的呈现效果。我们将以顺丰地图API为例进行讲解，确保你能快速上手并应用到实际项目中。

二、准备工作

  1. 首先，你需要在顺丰地图平台申请一个开发者账号，获取对应的ak值，用于在代码中加载地图。
  2. 了解基本的HTML、JavaScript和CSS知识，因为我们的示例代码基于这些技术构建。

三、点的应用

（一）单个点

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>GeoJSON-单个点</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 9});map.on('load', function() {map.addSource('point', {'type': 'geojson','data': {'type': 'Feature','geometry': {'type': 'Point','coordinates': [113.907826,22.643389]},'properties': {'title': 'Marker-1','icon': '2'}}});map.addLayer({'id': 'point','type': 'symbol','source': 'point','layout': {'icon-image': ['concat', 'icon_', ['get', 'icon']],'text-field': ['get', 'title'],'text-offset': [0, 0.6],'text-anchor': 'top'}});});</script>
</body>
</html>
  1. 代码解释
    • 引入地图API并初始化地图容器、设置地图的初始中心坐标和缩放级别。
    • 使用map.addSource添加一个GeoJSON数据源，类型为Feature，几何类型是Point，指定了一个点的坐标[113.907826,22.643389]，同时设置了一些属性如title和icon，用于标识和美化该点标记。
    • 通过map.addLayer添加一个图层，设置图层的id、type（这里是symbol，用于显示符号化的点）、source（关联之前定义的数据源），并在layout中配置图标和文本显示方式，比如根据icon属性获取图标，根据title属性显示文本。

（二）点的数组（多个点）

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>GeoJSON-点的数组</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 9});map.on('load', function() {map.addSource('points', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Point','coordinates': [113.907826,22.643389]},'properties': {'title': 'Marker-1','icon': '2'}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [114.196217,22.650993]},'properties': {'title': 'Marker-2','icon': '3'}}]}});map.addLayer({'id': 'points','type': 'symbol','source': 'points','layout': {'icon-image': ['concat', 'icon_', ['get', 'icon']],'text-field': ['get', 'title'],'text-offset': [0, 0.6],'text-anchor': 'top'}});});</script>
</body>
</html>
  1. 代码解释
    • 整体结构与单个点类似，但数据源部分有所不同。这里使用FeatureCollection作为data的类型，表示一个要素集合。
    • features数组中包含多个Feature对象，每个对象都代表一个点，有各自的坐标、title和icon属性。这样就可以在地图上一次性添加多个点标记，并且每个点可以有不同的样式。

四、线的应用

（一）单条线

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>GeoJSON-单条线</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 12});map.on('load', function() {map.addSource('route', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'LineString','coordinates': [[113.993571,22.590078],[113.963702,22.581271],[113.967478,22.550201],[114.005072,22.541957],[114.01829,22.5573305],[114.027045,22.582856]]}}});map.addLayer({'id': 'route','type': 'line','source': 'route','layout': {'line-join': 'round','line-cap': 'round'},'paint': {'line-color': '#0000ff','line-width': 8}});});</script>
</body>
</html>
  1. 代码解释
    • 同样先初始化地图。
    • 数据源data中，type为Feature，geometry.type为LineString，表示这是一条线。coordinates数组里的一系列经纬度坐标点依次连接起来形成一条连续的线。
    • 添加的图层type为line，并在layout中设置线的连接方式（line-join）和端点样式（line-cap）为圆形，在paint中设置线的颜色为蓝色（#0000ff），宽度为8px。

（二）线段的数组（多条线）

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>GeoJSON-线段的数组</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 12});map.on('load', function() {map.addSource('routes', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'MultiLineString','coordinates': [[[113.993571, 22.590078],[113.963702, 22.581271]],[[113.967478, 22.550201],[114.005072, 22.541957]],[[114.01829, 22.5573305],[114.027045, 22.582856]]]}}});map.addLayer({'id': 'routes','type': 'line','source': 'routes','layout': {'line-join': 'round','line-cap': 'round'},'paint': {'line-color': '#0000ff','line-width': 8}});});</script>
</body>
</html>
  1. 代码解释
    • 初始化地图，中心坐标和缩放级别按需设置。
    • 数据源部分，geometry.type为MultiLineString，这表示一个多线段的集合。coordinates是一个二维数组的数组，每个子数组代表一条独立的线段，其内部的坐标点连接成一条线段。
    • 图层设置与单条线类似，设置线的样式，使得多条线段都以蓝色、宽度为8px，连接和端点为圆形的样式展示。

（二）线段的数组（多条线2）

  1. 代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>GeoJSON-线段的数组</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head><body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 9});const data = {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'LineString','coordinates': [[113.907826, 22.643389],[114.196217, 22.650993]]},'properties': {id: 'Line-1','name': 'Line-1',clicked: false,'lineColor': '#FF0000'}},{'type': 'Feature','geometry': {'type': 'LineString','coordinates': [[113.95, 22.6],[114.05, 22.62]]},'properties': {id: 'Line-2','name': 'Line-2','lineColor': '#00FF00',clicked: false,}}]}}map.on('load', function () {map.addSource('lines', data);map.addLayer({'id': 'lines','type': 'line','source': 'lines','layout': {'line-join': 'round','line-cap': 'round'},'paint': {'line-color': ['case',['boolean', ['get', 'clicked'], false],'#e55e5e','#3bb2d0'],'line-width': 30}});// 监听点击事件--- 切换线颜色map.on('click', 'lines', function (e) {const feature = e.features[0];console.log(feature, map.getSource('lines'));const featureId = feature.properties.id;const features = data.data.features;// 先将所有点的 clicked 属性设为 falsefeatures.forEach((feature) => {feature.properties.clicked = false;});// 再将被点击点的 clicked 属性设为 truefor (let i = 0; i < features.length; i++) {if (features[i].properties.id === featureId) {features[i].properties.clicked = true;break;}}// 创建一个新的 GeoJSON 数据对象，避免可能的引用问题const newData = {type: 'FeatureCollection',features: features.map(feature => ({type: feature.type,geometry: feature.geometry,properties: { ...feature.properties }}))};map.getSource('lines').setData(newData);});});</script>
</body></html>

  1. 代码解释
    下面是将上述点的数组代码改写成线段的数组，并且使用 FeatureCollection 的代码示例：

  2. 数据源：在 map.addSource 中，data 的类型为 FeatureCollection，其 features 数组包含了多个 Feature 对象，每个 Feature 对象代表一条线段。

  3. 线段几何：每个 Feature 对象中的 geometry 类型为 LineString，coordinates 数组定义了线段的端点坐标。

  4. 线段属性：每个 Feature 对象的 properties 中包含了线段的名称（name）和颜色（lineColor）。

  5. 图层样式：在 map.addLayer 中，paint 属性中的 line-color 使用 ['get', 'lineColor'] 从每个线段的 properties 中获取颜色，line-width 设置线段的宽度为 3。

请将 你的ak值 替换为你实际申请到的 AK 值。

五、面的应用

（一）单个面

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>GeoJSON-单个面</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你的ak值"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container: 'map',center: [113.99709, 22.56859],zoom: 12});map.on('load', function() {map.addSource('area', {'type': 'geojson','data': {'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[113.993571, 22.590078],[113.963702, 22.581271],[113.967478, 22.550201],[114.005072, 22.541957],[114.01829, 22.5573305],[114.027045, 22.582856],[113.993571, 22.590078]]]},'properties': {'name': '区域1','fillColor': '#FF0000'}}});map.addLayer({'id': 'area','type': 'fill','source': 'area','layout': {},'paint': {'fill-color': ['get', 'fillColor'],'fill-opacity': 0.5}});});</script>
</body>
</html>
  1. 代码解释
    • 初始化地图，设置容器、中心和缩放级别。
    • 数据源data中，type为Feature，geometry.type为Polygon，表示一个多边形面。coordinates数组里的经纬度坐标点按顺序连接形成封闭的多边形，注意最后一个坐标点与第一个坐标点相同，确保多边形封闭。
    • 添加的图层type为fill，用于填充多边形面。在paint中，根据fillColor属性设置填充颜色，同时设置填充透明度为0.5，使得面呈现半透明效果。

（二）面的数组（多个面）

  1. 代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>GeoJSON - 面的数组</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你申请的ak值"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head>
<body><div id="map"></div><script>var map = new SFMap.Map({container:'map',center: [113.99709, 22.56859],zoom: 12});map.on('load', function () {map.addSource('areas', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[113.993571, 22.590078],[113.963702, 22.581271],[113.967478, 22.550201],[114.005072, 22.541957],[114.01829, 22.5573305],[114.027045, 22.582856],[113.993571, 22.590078]]]},'properties': {'name': '区域1','fillColor': '#FF0000'}},{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[114.05, 22.6],[114.07, 22.6],[114.07, 22.58],[114.05, 22.58],[114.05, 22.6]]]},'properties': {'name': '区域2','fillColor': '#00FF00'}}]}});map.addLayer({'id': 'areas','type': 'fill','source': 'areas','layout': {},'paint': {'fill-color': ['get', 'fillColor'],'fill-opacity': 0.5}});});</script>
</body>
</html>
  1. 代码解释
    • 数据结构升级：数据源data的类型为FeatureCollection，这是用于容纳多个地理要素的集合类型。features数组中包含多个Feature对象，每个对象代表一个面。每个面都有独立的geometry（Polygon类型）和properties（包含名称和填充颜色等属性）。例如，第一个面描述了一个区域，坐标构成了一个多边形形状，设置填充颜色为红色（#FF0000）；第二个面定义了另一个区域，坐标构成不同的多边形，填充颜色为绿色（#00FF00）。
    • 图层统一展示：添加的fill类型图层，通过['get', 'fillColor']从每个面的properties中获取填充颜色，统一设置填充透明度为0.5。这样，多个面都能以各自的颜色和半透明效果展示在地图上。

（二）面的数组（多个面2）

  1. 代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>GeoJSON-面</title><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><script src="https://webmap.sf-express.com/api/map?v=3.1&ak=你申请的ak值"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><div id="map"></div><script>var styleTemplate = `https://webmap-vs5.sf-express.com/MapVTService/vmapx/mapstyle/{theme}`;var map = new SFMap.Map({container: "map",style: styleTemplate.replace("{theme}", "allvector_enchanting-blue"),center: [116.400692761014, 39.850699628034],zoom: 18,});map.on("load", function () {const data1 = {type: "geojson",data: {type: "FeatureCollection",features: [{type: "Feature",id: 0,geometry: {type: "MultiPolygon",coordinates: [[[[116.400683482718, 39.850699628034],[116.400682519384, 39.8506886992082],[116.400576207334, 39.8506988324359],[116.400564865252, 39.8506999061965],[116.400562496831, 39.8507001289091],[116.400569347375, 39.8507570969861],[116.400687861122, 39.8507455223314],[116.400683482718, 39.850699628034],],],[[[116.400755046613, 39.8506737754861],[116.400721471261, 39.850671031674],[116.400716721685, 39.8507409037637],[116.400748935819, 39.8507434975927],[116.400755046613, 39.8506737754861],],],[[[116.400692761014, 39.8506649365395],[116.400685375175, 39.8505802335779],[116.400631043975, 39.850584741423],[116.400638706392, 39.8506697605966],[116.400692761014, 39.8506649365395],],],],},properties: {x: "116.400645943918",y: "39.850680291962",level: 4,type: 4,value: 0,label: "后村149号",isArea: true,selected: true, // 符合条件},},],},};map.addSource("maine", data1);const highlightFillLayer = {id: "fill_highlight_ea70e077-c2df-4db0-ab27-b56bcef23e4e",type: "fill",source: "maine",filter: ["all", ["has", "selected"], ["==", "selected", true]], //全部满足条件才行 paint: {"fill-color": "red","fill-opacity": 0.38,},};map.addLayer(highlightFillLayer);});</script></body>
</html>

你提供的这两段代码都实现了在地图上展示多个面的功能，但它们在 GeoJSON 数据结构的表示上存在一些区别，具体如下：

（二）面的数组（对比）

  1. GeoJSON 要素类型和结构：
    • 第一段代码（多个面的示例）：使用的是 FeatureCollection 类型来包含多个 Feature 对象，每个 Feature 对象的 geometry 类型为 Polygon，表示单个的多边形面。也就是说，它是将每个面作为独立的 Feature 放在 features 数组中，如下所示：
{'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [// 面1的坐标数组]},'properties': {'name': '区域1','fillColor': '#FF0000'}},{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [// 面2的坐标数组]},'properties': {'name': '区域2','fillColor': '#00FF00'}}]
}

- **第二段代码**：使用的是单个 `Feature` 对象，其 `geometry` 类型为 `MultiPolygon`，`MultiPolygon` 的 `coordinates` 是一个二维数组，每个子数组又包含一个多边形的坐标数组。这种方式是将多个多边形组合在一个 `MultiPolygon` 几何对象中，而不是像第一段代码那样每个多边形对应一个独立的 `Feature`，如下所示：

{'type': 'Feature','id': 0,'geometry': {'type': 'MultiPolygon','coordinates': [[[// 多边形1的坐标数组]],[[// 多边形2的坐标数组]]]},'properties': {'name': '区域2','fillColor': '#00FF00'}
}

  1. 属性关联和管理：

    • 第一段代码：每个面（Feature）都可以有自己独立的属性集。例如，面1有 name 为 区域1 和 fillColor 为 #FF0000，面2有 name 为 区域2 和 fillColor 为 #00FF00。这样在处理和管理每个面的属性时更加灵活，可以根据不同面的特点设置不同的属性。
    • 第二段代码：由于多个多边形都包含在一个 Feature 中，它们共享一套属性。在当前代码中，所有多边形都关联了 name 为 区域2 和 fillColor 为 #00FF00 的属性。如果想要为不同的多边形设置不同的属性，这种结构就不太方便，需要额外的处理逻辑。

  2. 应用场景：

    • 第一段代码：适用于多个面之间相对独立，每个面可能具有不同的地理意义、属性或需要单独进行操作和管理的情况。比如展示不同的行政区域、不同类型的地理区域等。
    • 第二段代码：适用于多个多边形在逻辑上属于同一个整体，具有相同的属性或需要作为一个整体进行处理的情况。例如，一个由多个子区域组成的复杂区域，这些子区域共同构成一个特定的地理对象。

综上所述，两段代码虽然都能展示多个面，但在数据结构和适用场景上存在明显的区别。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/42218.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pytorch构建线性回归模型

pytorch构建线性回归模型

仅仅用于自己记录pytorch学习记录 线性回归模型 &#xff08;1&#xff09;准备数据集 数据&#xff1a;三个数据x[x1,x2,x3] y[y1,y2,y3] import torch #线性回归&#xff0c;我们使用三组数据&#xff0c;分别是&#xff08;1,2&#xff09;&#xff0c;&#xff08;2,4&a…
阅读更多...
Pytorch学习笔记（十二）Learning PyTorch - NLP from Scratch

Pytorch学习笔记（十二）Learning PyTorch - NLP from Scratch

这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 NLP from Scratch 部分。 官网链接&#xff1a;https://pytorch.org/tutorials/intermediate/nlp_from_scratch_index.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwdaa2m 提取码: …
阅读更多...
mysql--socket报错

mysql--socket报错

错误原因分析 MySQL 服务未运行&#xff08;最常见原因&#xff09; 错误中的 (2) 表示 “No such file or directory”&#xff0c;即 /tmp/mysql.sock 不存在这通常意味着 MySQL 服务器根本没有启动 socket 文件路径不匹配 客户端尝试连接 /tmp/mysql.sock但 MySQL 服务器可…
阅读更多...
进军场景智能体，云迹机器人又快了一步

进军场景智能体，云迹机器人又快了一步

&#xff08;图片来源&#xff1a;Pixels&#xff09; 2025年&#xff0c;AI和机器人行业都发生了巨大改变。 数科星球原创 作者丨苑晶 编辑丨大兔 2025年&#xff0c;酒店行业正掀起一股批量采购具备AI功能的软硬一体解决方案的热潮。 在DeepSeek、Manus等国产AI软件的推动…
阅读更多...
WPS宏开发手册——JSA语法练习

WPS宏开发手册——JSA语法练习

目录 系列文章3、JSA语法练习3.1、运算练习3.2、比较练习3.3、if else练习3.4、for 练习3.5、字符串、数组方法练习3.6、语义转编程练习题 系列文章 使用、工程、模块介绍 JSA语法 JSA语法练习题 第四篇EXCEL常用API&#xff0c;持续更新中… 3、JSA语法练习 3.1…
阅读更多...
ENSP学习day11

ENSP学习day11

NAT地址转换&#xff08;二&#xff09;NAPT与easy ip 一&#xff1a;NAPT是Network Address Port Translation的缩写&#xff0c;也称为PAT&#xff08;Port Address Translation&#xff09;。NAPT是一种网络转换技术&#xff0c;用于在私有网络和公共网络之间进行地址转换以…
阅读更多...
当Kafka化身抽水马桶：论组件并发提升与系统可用性的量子纠缠关系

当Kafka化身抽水马桶：论组件并发提升与系统可用性的量子纠缠关系

《当Kafka化身抽水马桶&#xff1a;论组件并发提升与系统可用性的量子纠缠关系》 引言&#xff1a;一场OOM引发的血案 某个月黑风高的夜晚&#xff0c;监控系统突然发出刺耳的警报——我们的数据发现流水线集体扑街。事后复盘发现&#xff1a;Kafka集群、Gateway、Discovery服…
阅读更多...
Web纯前端实现在线打开编辑保存PPT幻灯片

Web纯前端实现在线打开编辑保存PPT幻灯片

很多项目中有时会需要在线打开PPT并编辑保存到服务器。猿大师办公助手可以完美调用本地office在线打开ppt文件&#xff0c;跟本地打开效果一样。还可以在线打开word、excel、pdf等文件&#xff0c;支持本机OFFICE完整嵌入模式&#xff0c;本机OFFICE所有功能基本都可以在网页上…
阅读更多...
java版嘎嘎快充玉阳软件互联互通中电联云快充协议充电桩铁塔协议汽车单车一体充电系统源码uniapp

java版嘎嘎快充玉阳软件互联互通中电联云快充协议充电桩铁塔协议汽车单车一体充电系统源码uniapp

演示&#xff1a; 微信小程序&#xff1a;嘎嘎快充 http://server.s34.cn:1888/ 系统特色&#xff1a; 多商户、汽车单车一体、互联互通、移动管理端&#xff08;开发中&#xff09; 另外有PHP版源码&#xff1a;小程序搜索 河南玉阳软件 成熟线上运营中。可定制代理分销分账…
阅读更多...
【Linux加餐-验证UDP:TCP】-windows作为client访问Linux

【Linux加餐-验证UDP:TCP】-windows作为client访问Linux

一、验证UDP-windows作为client访问Linux UDP client样例代码 #include <iostream> #include <cstdio> #include <thread> #include <string> #include <cstdlib> #include <WinSock2.h> #include <Windows.h>#pragma warning(dis…
阅读更多...
linux input子系统深度剖析

linux input子系统深度剖析

input 就是输入的意思&#xff0c;因此 input 子系统就是管理输入的子系统&#xff0c;和 pinctrl 、 gpio 子系统 一样&#xff0c;都是 Linux 内核针对某一类设备而创建的框架。比如按键输入、键盘、鼠标、触摸屏等 等这些都属于输入设备&#xff0c;不同的输入设备…
阅读更多...
leetcode40-组合总和II

leetcode40-组合总和II

leetcode 40 思路 在做本题之前可以参考之前的文章&#xff1a;组合总和和组合总和III 本题的关键点是&#xff1a;每个元素只能使用一次&#xff0c;另外本题给的数组是无序的&#xff0c;并且元素之间可能存在重复项&#xff0c;举个例子&#xff0c;candidates [1,2,1,1…
阅读更多...
CentOS 7 源码安装libjsoncpp-1.9.5库

CentOS 7 源码安装libjsoncpp-1.9.5库

安装依赖工具 sudo yum install cmake make gcc cmake 需要升级至 3.8.0 以上可参考&#xff1a;CentOS安装CMakegcc 需要升级至9.0 以上可参考&#xff1a;CentOS 7升级gcc版本 下载源码 wget https://github.com/open-source-parsers/jsoncpp/archive/refs/tags/1.9.5.…
阅读更多...
本地部署Stable Diffusion生成爆火的AI图片

本地部署Stable Diffusion生成爆火的AI图片

直接上代码 Mapping("/send") Post public Object send(Body String promptBody) { JSONObject postSend new JSONObject(); System.out.println(promptBody); JSONObject body JSONObject.parseObject(promptBody); List<S…
阅读更多...
知识就是力量——物联网应用技术

知识就是力量——物联网应用技术

基础知识篇 一、常用电子元器件1——USB Type C 接口引脚详解特点接口定义作用主从设备关于6P引脚的简介 2——常用通信芯片CH343P概述特点引脚定义 CH340概述特点封装 3——蜂鸣器概述类型驱动电路原文链接 二、常用封装介绍贴片电阻电容封装介绍封装尺寸与功率关系&#xff1…
阅读更多...
.Net SSO 单点登录方式

.Net SSO 单点登录方式

SSO单点登录目的 之前一般来讲系统简单&#xff0c;登录后 本地 cookie 加服务器 session 存储用户身份信息&#xff0c;以此为依据来判断用户再次登录时免验证 但随着互联网发展&#xff0c;很多应用 部署在不同的服务器上&#xff0c;而用户体系是一套&#xff0c;那么按照原…
阅读更多...
MyBatis-Flex、MyBatis-Plus 与 Fluent-Mybatis 的比较分析

MyBatis-Flex、MyBatis-Plus 与 Fluent-Mybatis 的比较分析

MyBatis-Flex、MyBatis-Plus 与 Fluent-Mybatis 的比较分析 在日常开发中&#xff0c;很多项目会选择 MyBatis 作为 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;而为了减少样板代码和提升开发效率&#xff0c;各种扩展库层出不穷。其中&#xff0c;MyBatis-Flex…
阅读更多...
LVS NAT模式实现三台RS的轮询访问

LVS NAT模式实现三台RS的轮询访问

节点规划: 配置RS&#xff1a; RS1-RS3的网关配置均为 192.168.163.8 配置RS1&#xff1a; [rootlocalhost ~]# hostnamectl hostname rs1 [rootlocalhost ~]# nmcli c modify ens160 ipv4.method manual ipv4.addresses 192.168.163.7/24 ipv4.gateway 192.168.163.8 conne…
阅读更多...
软考中级-软件设计师 23种设计模式(内含详细解析)

软考中级-软件设计师 23种设计模式(内含详细解析)

23种设计模式 &#x1f3af; 创建型设计模式&#x1f4cc; 抽象工厂&#xff08;Abstract Factory&#xff09; 设计模式&#x1f4cc; 工厂方法&#xff08;Factory Method&#xff09;设计模式&#x1f4cc; 单例&#xff08;Singleton&#xff09;设计模式&#x1f4cc; 生成…
阅读更多...
子数组 之 logTrick算法，求解或，与，LCM,GCD

子数组 之 logTrick算法，求解或，与，LCM,GCD

文章目录 gcd的问题最大公约数 求解子数组的&,|,lcm,gcd的最值or计数问题&#xff0c;如果采用暴力的做法&#xff0c;那么时间复杂度会来到o(n^2),其实在求解的过程中&#xff0c;会出现很多的结果不变的情况&#xff0c;所以我们就可以提前结束 存在一定的单调性&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023