mapbox进阶技巧

1、filter过滤，使用过滤，可以根据不同条件展示我们想要展示的数据

代码示例：核心代码，根据点的size是否满足条件进行展示

filter: ['<=', 'size', 30]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})let data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20,name: '武汉'},geometry: {type: 'Point',coordinates: [114.30122, 30.598213]}},{type: 'Feature',properties: {size: 30,name: '苏州'},geometry: {type: 'Point',coordinates: [114.526261, 30.544391]}},{type: 'Feature',properties: {size: 40},geometry: {type: 'Point',coordinates: [114.335601, 30.436657]}}]}async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': ['get', 'size'],'circle-color': '#ff0000'},filter: ['<=', 'size', 30]})}renderLayer()</script></body>
</html>

has的使用，有，加！表示取反

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})let data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20,name: '武汉'},geometry: {type: 'Point',coordinates: [114.30122, 30.598213]}},{type: 'Feature',properties: {size: 30,name: '苏州'},geometry: {type: 'Point',coordinates: [114.526261, 30.544391]}},{type: 'Feature',properties: {size: 40},geometry: {type: 'Point',coordinates: [114.335601, 30.436657]}}]}async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': ['get', 'size'],'circle-color': '#ff0000'},// filter: ['has', 'name']filter: ['!', ['has', 'name']]})}renderLayer()</script></body>
</html>

2、$type的使用，当点线面数据在一起的时候，可以根据不同的类型加载不同的数据

核心代码：

// 选择type为LineString的要素filter: ['==', '$type', 'LineString']// 选择type为Polygon的要素filter: ['==', '$type', 'Polygon']
// 选择type为Point的要素// filter: ['==', '$type', 'Point']filter: ['in', '$type', 'Point']

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})let data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.3289, 30.527034]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.328232, 30.523147]}},{type: 'Feature',properties: {},geometry: {type: 'LineString',coordinates: [[114.317704, 30.519836],[114.335584, 30.517821],[114.33525, 30.514366]]}},{type: 'Feature',properties: {},geometry: {type: 'Polygon',coordinates: [[[114.302497, 30.513502],[114.302497, 30.521564],[114.311186, 30.521564],[114.311186, 30.513502],[114.302497, 30.513502]]]}}]}async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': ['get', 'size'],'circle-color': '#ff0000'},// 选择type为Point的要素// filter: ['==', '$type', 'Point']filter: ['in', '$type', 'Point']})map.addLayer({id: 'layer2',type: 'fill',source: 'source',paint: {'fill-color': '#00ff00'},// 选择type为Polygon的要素filter: ['==', '$type', 'Polygon']})map.addLayer({id: 'layer3',type: 'line',source: 'source',paint: {'line-color': '#0000ff'},// 选择type为LineString的要素filter: ['==', '$type', 'LineString']})}renderLayer()</script></body>
</html>

3、动态属性stops的使用

核心代码：

 paint: {'circle-radius': 20,'circle-color': {property: 'size',stops: [/* <5  green */[5, 'green'],/* 5~10  green-yellow之间渐变 */[10, 'yellow'],/* 10~20  yellow-red渐变 */[20, 'red']/* >20  就是red */]}}

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})var data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20},geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }},{type: 'Feature',properties: {size: 8},geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }},{type: 'Feature',properties: {size: 1},geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }}]}// 根据size属性设置不同的颜色async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': 20,'circle-color': {property: 'size',stops: [/* <5  green */[5, 'green'],/* 5~10  green-yellow之间渐变 */[10, 'yellow'],/* 10~20  yellow-red渐变 */[20, 'red']/* >20  就是red */]}}})}renderLayer()</script></body>
</html>

动态属性step的使用，作用与stops一致

核心代码：

        paint: {'circle-radius': 20,'circle-color': ['step', ['get', 'size'], '#ff0000', 1, '#00ff00',8, '#0000ff',20, '#ff00ff']}

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})var data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20},geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }},{type: 'Feature',properties: {size: 7},geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }},{type: 'Feature',properties: {size: 10},geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }}]}// 根据size属性设置不同的颜色async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': 20,'circle-color': ['step', ['get', 'size'], '#ff0000', 1, '#00ff00', 8, '#0000ff', 20, '#ff00ff']}})}renderLayer()</script></body>
</html>

动态属性linear的使用，作用与上面两个类似

核心代码：

 'circle-color': ['interpolate', ['linear'], ['get', 'size'], 7, 'blue', 10, 'red', 20, 'green']

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})var data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20},geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }},{type: 'Feature',properties: {size: 7},geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }},{type: 'Feature',properties: {size: 10},geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }}]}// 根据size属性设置不同的颜色async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': 20,'circle-color': ['interpolate', ['linear'], ['get', 'size'], 7, 'blue', 10, 'red', 20, 'green']}})}renderLayer()</script></body>
</html>

或者根据地图zoom的变化设置样式

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})var data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {size: 20},geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }},{type: 'Feature',properties: {size: 7},geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }},{type: 'Feature',properties: {size: 10},geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }}]}// 根据size属性设置不同的颜色async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data})map.addLayer({id: 'layer',source: 'source',type: 'circle',paint: {'circle-radius': 20,'circle-color': ['interpolate', ['linear'], ['zoom'], 4, 'green', 8, 'yellow']}})}renderLayer()</script></body>
</html>

4、点聚合

核心代码：

 map.addSource('source', {type: 'geojson',data: data,// 开启点聚合cluster: true})
 paint: {'circle-radius': {property: 'point_count',stops: [[5, 10],[10, 20],[15, 30],[20, 40]]},'circle-color': {property: 'point_count',stops: [[5, '#652e80'],[10, 'green'],[15, 'yellow'],[20, 'red']]}},filter: ['has', 'point_count']

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><title>Document</title><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>mapboxgl.accessToken = '你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: gaode,center: [114.3, 30.5],zoom: 10})let data = {type: 'FeatureCollection',features: [{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.281363, 30.607571]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.128573, 30.552409]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.371722, 30.463235]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.130216, 30.324358]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.194289, 30.466067]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.038213, 30.467483]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.062893, 30.210399]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [114.96016, 30.12398]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.035127, 30.114373]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.135084, 30.075937]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.585099, 29.705042]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.496249, 29.594042]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.632301, 29.589214]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.743364, 29.733978]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.626748, 29.81351]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.490696, 29.741211]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.506245, 29.690499]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.674118, 29.736458]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.56646, 29.780812]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.701488, 29.809315]}},{type: 'Feature',properties: {},geometry: {type: 'Point',coordinates: [115.901488, 29.809315]}}]}// 根据size属性设置不同的颜色async function renderLayer() {await map.once('style.load')map.addSource('source', {type: 'geojson',data: data,// 开启点聚合cluster: true})map.addLayer({id: 'layer',source: 'source',type: 'circle',paint: {'circle-radius': {property: 'point_count',stops: [[5, 10],[10, 20],[15, 30],[20, 40]]},'circle-color': {property: 'point_count',stops: [[5, '#652e80'],[10, 'green'],[15, 'yellow'],[20, 'red']]}},filter: ['has', 'point_count']})map.addLayer({id: 'un_cluster_layer',type: 'circle',source: 'source',paint: {'circle-radius': 4,'circle-color': '#4164fb','circle-stroke-width': 1,'circle-stroke-color': '#fff'},filter: ['!', ['has', 'point_count']]})}renderLayer()</script></body>
</html>

5、热力图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><!-- 导入依赖 --><!-- openlayer  mapbox cesium js+css --><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>//tokenmapboxgl.accessToken = 你的token'const gaode = {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map', // container IDstyle: gaode, // style URLcenter: [114.3, 30.5], // starting position [lng, lat]zoom: 1 // starting zoom})let data = 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'map.on('style.load', () => {/* 使用热力图图层加载点数据 --数据非常多 */map.addSource('source', {type: 'geojson',data})map.addLayer({id: 'heat_layer',source: 'source',type: 'heatmap',/* zoom大于9的情况热力图就不会显示了 */maxzoom: 9,paint: {'heatmap-radius': ['interpolate',['linear'],['zoom'],2, //zoom5,6, //zoom10]}})map.on('click', 'heat_layer', (evt) => {console.log(evt.features[0])})})/* line-progress */</script></body>
</html>

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

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

相关文章

计算机网络 （2）计算机网络的类别

计算机网络 （2）计算机网络的类别

计算机网络的类别繁多&#xff0c;根据不同的分类原则&#xff0c;可以得到各种不同类型的计算机网络。 一、按覆盖范围分类 局域网&#xff08;LAN&#xff09;&#xff1a; 定义&#xff1a;局域网是一种在小区域内使用的&#xff0c;由多台计算机组成的网络。覆盖范围&#…
阅读更多...
实战OpenCV之文字识别

实战OpenCV之文字识别

基础入门 文字识别技术，也称为光学字符识别（Optical Character Recognition，OCR），是一种让计算机能够“读取”图像中的文字，并将其转化为可编辑文本的技术。这项技术在许多领域都有广泛的应用，包括但不限于：图片文字识别、文档管理、自动化数据输入、历史文献数字化。 …
阅读更多...
【Qt】Qt在窗口中加载Web界面的方法汇总

【Qt】Qt在窗口中加载Web界面的方法汇总

1、Qt WebEngine 1）Qt版本：Qt5.4以上； 2）平台要求（https://doc.qt.io/archives/qt-5.9/qtwebengine-platform-notes.html）： 例如：Windows下只能使用 MSVC 编译器，不支持MinGW编译器，会报错（: error: Unknown module(s) in QT: webenginewidgets） 并且不能用在Qt编…
阅读更多...
modbus协议 Mthings模拟器使用

modbus协议 Mthings模拟器使用

进制转换 HEX 16进制 (0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F表示0-15) dec 10进制 n(16进制) -> 10 abcd.efg(n) d*n^0 c*n^1 b*n^2 a*n^3 e*n^-1 f*n^-2 g*n^-3&#xff08;10&#xff09; 10 -> n(16进制) Modbus基础概念 高位为NUM_H&…
阅读更多...
飞腾平台Arm NN软件栈安装使用指南

飞腾平台Arm NN软件栈安装使用指南

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力&#xff0c;聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域&#xff0c;包含了应用使能套件、软件仓库、软件支持、软件适…
阅读更多...
基于JavaSpringboot个人博客

基于JavaSpringboot个人博客

一、作品包含 源码数据库设计文档万字全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA 数据库&#xf…
阅读更多...
鸿蒙next ui安全区域适配（刘海屏、摄像头挖空等）

鸿蒙next ui安全区域适配（刘海屏、摄像头挖空等）

目录 相关api 团结引擎对于鸿蒙的适配已经做了安全区域的适配，也考虑到了刘海屏和摄像机挖孔的情况，在团结引擎内可以直接使用Screen.safeArea 相关api
阅读更多...
吴恩达Prompt Engineering(2/9): Guidelines for Prompting

吴恩达Prompt Engineering(2/9): Guidelines for Prompting

目录 Principals of Prompting Principle 1 Tactic 1: Tactic 2: Ask for structured output Tactic 3: Check whether conditions are satisfied / Check assumptions required to do the task Tactic 4: Few-Shot prompting, Give successful examples of completing tas…
阅读更多...
【GPTs】Gif-PT：DALL·E制作创意动图与精灵动画

【GPTs】Gif-PT：DALL·E制作创意动图与精灵动画

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Gif-PT主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; 使用Dalle生成用户请求的精灵图动画&#…
阅读更多...
JMeter初体验：从入门到入门的性能测试之旅

JMeter初体验：从入门到入门的性能测试之旅

一、关于性能测试 1、性能测试概述 性能测试是一种非功能测试&#xff0c;旨在评估系统在不同负载条件下的性能表现。它包括负载测试、压力测试、稳定性测试和基准测试等。性能测试的目的是确保系统在预期的负载下能够正常运行&#xff0c;并满足用户对响应时间、吞吐量和其他…
阅读更多...
MongoDB新版本安装配置教程（7.0.15版本-zip下载）

MongoDB新版本安装配置教程（7.0.15版本-zip下载）

找了半天MongoDB新版本怎么解决没有mongo命令,都没有很好的解决方法 现在分享一下: 首先下载: 然后手动创建 data 和 log 两个文件夹 然后再系统变量配置环境变量 在data的目录下&#xff0c;创建一个db文件 然后:在bin目录下cmd执行: mongod --dbpath D:\MongoDB\data\db …
阅读更多...
探索 HTTP 请求方法：GET、POST、PUT、DELETE 等的用法详解

探索 HTTP 请求方法：GET、POST、PUT、DELETE 等的用法详解

文章目录 前言一、GET 方法&#xff1a;用于获取资源二、POST 方法&#xff1a;用于提交数据三、PUT 方法&#xff1a;用于更新资源四、DELETE 方法&#xff1a;用于删除资源五、PATCH 方法&#xff1a;用于部分更新资源六、HEAD 方法&#xff1a;用于请求响应头七、OPTIONS 方…
阅读更多...
解决虚拟机未被自动分配ip

解决虚拟机未被自动分配ip

文章目录 1. 背景2. 解决步骤 1. 背景 从vulnhub下载的靶场文件&#xff0c;网络适配器模式设置为nat模式之后&#xff0c;启动虚拟机之后发现没有成功分配动态ip。推测是虚拟机分配的网卡名称和原先靶机作者设置网络配置文件 网络接口名称不一致导致。 2. 解决步骤 解决办法就…
阅读更多...
路径规划——RRT-Connect算法

路径规划——RRT-Connect算法

路径规划——RRT-Connect算法 算法原理 RRT-Connect算法是在RRT算法的基础上进行的扩展&#xff0c;引入了双树生长&#xff0c;分别以起点和目标点为树的根节点同时扩展随机树从而实现对状态空间的快速搜索。在此算法中以两棵随机树建立连接为路径规划成功的条件。并且&…
阅读更多...
2024游戏陪玩app源码的功能介绍/线上陪玩交友上线即可运营软件平台源码搭建流程

2024游戏陪玩app源码的功能介绍/线上陪玩交友上线即可运营软件平台源码搭建流程

一个完整的陪玩交友系统从概念到实现再到维护的全过程得以清晰展现。每一步都需要团队的紧密协作与细致规划&#xff0c;以确保系统既满足用户需求&#xff0c;又具备良好的稳定性和可扩展性。 基础框架 移动端开发框架&#xff1a;如uniapp&#xff0c;它支持多平台开发&…
阅读更多...
缓冲式线程池C++简易实现

缓冲式线程池C++简易实现

前言 : 代码也比较短&#xff0c;简单说一下代码结构&#xff0c;是这样的&#xff1a; SyncQueue.hpp封装了一个大小为MaxTaskCount的同步队列&#xff0c;这是一个模板类&#xff0c;它在线程池中承担了存放任务等待线程组中的线程来执行的角色。最底层是std::list<T>…
阅读更多...
Unity资源打包Addressable AA包

Unity资源打包Addressable AA包

从零到一 很多资料都是通过一步步设置讲解的&#xff0c;有时很想先快速实现&#xff0c;再了解细节。 下面就是远程加载Cube.prefab然后实例化简单的代码。 代码中可以不需要远程的网址&#xff0c;不需要资源下载的位置&#xff0c;不需要判断是否已经下载到本地。 那是如…
阅读更多...
国家网络安全法律法规

国家网络安全法律法规

国家网络安全法律法规是维护网络空间安全、保障国家利益和公民权益的重要基石。以下是一些主要的国家网络安全法律法规&#xff1a; 一、《中华人民共和国网络安全法》发布时间与生效日期&#xff1a;2016年11月7日由第十二届全国人民代表大会常务委员会第二十四次会议通过&…
阅读更多...
MySQL之索引(2)（B树、B+树、索引分类、聚集索引、二级索引、回表查询）

MySQL之索引(2)（B树、B+树、索引分类、聚集索引、二级索引、回表查询）

目录 一、B树结构索引&#xff08;B-树&#xff09; &#xff08;1&#xff09;特点。 &#xff08;2&#xff09;问题&#xff1a;范围查询效率&#xff1f;&#xff1f; &#xff08;3&#xff09;缺点。 1、查询的不稳定性。 2、各叶子节点无联系。 3、IO资源的消耗较多。 二…
阅读更多...
翼鸥教育：从OceanBase V3.1.4 到 V4.2.1，8套核心集群升级实践

翼鸥教育：从OceanBase V3.1.4 到 V4.2.1，8套核心集群升级实践

引言&#xff1a;自2021年起&#xff0c;翼鸥教育便开始应用OceanBase社区版&#xff0c;两年间&#xff0c;先后部署了总计12套生产集群&#xff0c;其中核心集群占比超过四分之三&#xff0c;所承载的数据量已突破30TB。自2022年10月&#xff0c;OceanBase 社区发布了4.2.x 版…
阅读更多...
最新文章

Copyright @ 2022~2023