mapbox开发小技巧
自定义图标
// 1、单个图标
const url = './static/assets/symbols/code24x24/VIDEO.png' // 图标路径
map.loadImage(url ,(error, image) => {if (error) throw errormap.addImage('video-icon', image)
})// 2、雪碧图利用canvas
// json和png图片
function getStyleImage(fileName: any) {return new URL('/json/style/' + fileName + '.png', import.meta.url).href;
}fetch(new URL('/json/style/' + fileName + '.json', import.meta.url).href).then(response => response.json()).then(spriteJson => {var img = new Image()img.crossOrigin = 'anonymous'img.src = getStyleImage(spriteName)img.onload = function () {Object.keys(spriteJson).forEach((key: any) => {let spriteItem = spriteJson[key]let { X, Y, Width, Height } = spriteItemlet canvas = createCavans(Width, Height)let context: any = canvas.getContext('2d') || ''context.drawImage(img, X, Y, Width, Height, 0, 0, Width, Height)// 单位雪碧图项,转base64字符串map.addImage(key, canvas.toDataURL('image/png'))})console.log(spriteName, '完成加载...')}
});
vue2.0中自定义弹窗(核心代码)
样式文件
// 地图弹窗
.mapbox-msgBox {position: relative;border: 0;font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', '微软雅黑', Arial, sans-serif;// 弹窗内容.mapboxgl-popup-content {padding: 0 !important;}// 弹窗标题h2 {width: 100%;height: 40px !important;line-height: 40px !important;font-size: 18px !important;color: #fff;background: #0057a7;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 15px;border-top-left-radius: 4px;border-top-right-radius: 4px;}// 关闭按钮.mapboxgl-popup-close-button {height: 40px;font-size: 3em;padding: 0 5px;color: white;cursor: pointer;&:hover {color: #aaaaaa;}}
}
vue文件
<template><div><h2>{{ title }}</h2></div>
</template>
<script>export default {name: 'popTemplate',components: {},props: ['attrs', 'title'],data() {return {}},mounted() {console.log('props:', this.attrs)},methods: {callback(attrs) {this.$emit('callback', attrs)}
}
</script>
实现代码
const location = [110,30]
// 初始化弹窗
const mapboxPopup = new mapboxgl.Popup({closeButton: true,closeOnClick: false,className: 'mapbox-msgBox',maxWidth: '450px',offset: [0, 0]})
// popTemplate为引用的vue文件
const popDetail = Vue.extend(popTemplate)
const vm = new popDetail({propsData: {title,attrs},methods: {callback(config) {console.log('🚀 ~ callback ~ config:', config)}}})vm.$mount() // 挂载mapboxPopupLayer.setLngLat(location).setDOMContent(vm.$el).addTo(map)
创建自定义标签(核心代码)
定义样式为扩散圆
/* 标签选择器之属性匹配选择 */
.mapbox-marker span[class^='pulse'] {/* 保证小盒子水平垂直居中 */position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;box-shadow: 0 0 5px #ff0000;border-radius: 50%;animation: pulse 3s linear infinite;
}.mapbox-marker .pulse1 {animation-delay: 0s !important;
}.mapbox-marker .pulse2 {animation-delay: 1s !important;
}.mapbox-marker .pulse3 {animation-delay: 2s !important;
}@keyframes pulse {0% {width: 8px;height: 8px;}40% {width: 40px;height: 40px;opamapbox-marker: 1;}100% {width: 70px;height: 70px;opamapbox-marker: 0;}
}
实现代码
// 创建一个新的标记并添加到地图上const location = [110,30]const el = document.createElement('div')el.className = 'mapbox-marker'const el1 = document.createElement('span')el1.className = 'pulse1'el.appendChild(el1)const el2 = document.createElement('span')el2.className = 'pulse2'el1.appendChild(el2)const el3 = document.createElement('span')el3.className = 'pulse3'el1.appendChild(el3)const currentMarker = new mapboxgl.Marker(el).setLngLat(location).addTo(map)map.setCenter(location)// 实现扩散效果(例如放大到特定区域)map.flyTo({center: location,zoom: 18,speed: 1, // 动画速度curve: 1, // 动画曲线类型easing: function (t) {return t} // 动画缓动函数})// 5s之后移除setTimeout(() => {// 如果已存在标记,则移除它if (currentMarker) {currentMarker.remove()}}, 5000)
聚合图层
// 添加数据源
map.addSource('videoLayer', {type: 'geojson',data: {type: 'FeatureCollection',features: videoListFeatures},cluster: true,clusterMaxZoom: 14, // 最大缩放级别,超过该级别不再聚合clusterRadius: 50 // 聚合半径,单位为像素
})// 添加聚合图层
map.addLayer({id: 'videoLayer-cluster',type: 'circle',source: 'videoLayer',filter: ['has', 'point_count'],paint: {'circle-color': ['step',['get', 'point_count'],'#51bbd6',100,'#f1f075',750,'#f28cb1'],'circle-radius': ['step',['get', 'point_count'],20,100,30,750,40]}
})// 添加聚合点计数图层
map.addLayer({id: 'videoLayer-cluster-count',type: 'symbol',source: 'videoLayer',filter: ['has', 'point_count'],layout: {'text-field': ['get', 'point_count_abbreviated'],'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],'text-size': 12}
})// 添加非聚合点图层
map.addLayer({id: 'videoLayer-unclustered-point',source: 'videoLayer',filter: ['!', ['has', 'point_count']],type: 'symbol',layout: {'icon-image': 'video-icon','icon-size': 1}
})
分类渲染降雨等值面事例
map.addLayer({id: 'grid_line',type: 'fill',source: {type: 'geojson',data: { type: 'FeatureCollection', features }},paint: {'fill-opacity': 1,'fill-outline-color': 'rgba(255, 255, 255, 0)','fill-color': ['step',['get', 'rain'],'rgba(255, 255, 255, 0)', // 无降雨0.000001,'rgb(165, 243, 141)', // 短时小雨0.25,'rgb(61, 185, 63)', // 短时中雨0.5,'rgb(99, 184, 249)', // 短时大雨1,'rgb(0, 0, 254)', // 短时暴雨2.5,'rgb(243, 5, 238)', // 短时大暴雨7.5,'rgb(129, 0, 64)' // 短时特大暴雨]}
})
相关文章:
mapbox开发小技巧
自定义图标 // 1、单个图标 const url ./static/assets/symbols/code24x24/VIDEO.png // 图标路径 map.loadImage(url ,(error, image) > {if (error) throw errormap.addImage(video-icon, image) })// 2、雪碧图利用canvas // json和png图片 function getStyleImage(fil…...

DeepSeek×博云AIOS:突破算力桎梏,开启AI普惠新纪元
背景 在全球人工智能技术高速迭代的背景下,算力成本高企、异构资源适配复杂、模型部署效率低下等问题,始终是制约企业AI规模化应用的关键。 DeepSeek以创新技术直击产业痛点,而博云先进算力管理平台AIOS的全面适配,则为这一技术…...

Java高频面试之集合-07
hello啊,各位观众姥爷们!!!本baby今天来报道了!哈哈哈哈哈嗝🐶 面试官:ArrayList 和 Vector 的区别是什么? ArrayList 与 Vector 的区别详解 ArrayList 和 Vector 都是 Java 中基于…...
Redis- 切片集群
切片集群 切片集群什么是Redis Cluster吗?为什么需要切片集群?Redis Cluster的数据分片机制是怎样的?哈希槽的算法是什么基本算法流程 待填坑 切片集群 什么是Redis Cluster吗?为什么需要切片集群? Redis Cluster是R…...

【项目日记(十)】瓶颈分析与使用基数树优化
前言 上一期我们对整个项目进行了细节部分的优化,并在最后测试了多线程环境下和malloc的性能对比测试,发现malloc有时候还是更胜一筹的,基于此我们进行对我们的内存池进行瓶颈分析与优化。 目录 前言 一、项目瓶颈分析 VS编译器下性能分…...
后台管理系统比较全面的分析对比
以下是主流的 后台管理系统模板 分类与技术选型指南,涵盖开源、商业及全栈解决方案,可根据项目需求灵活选择: 一、开源免费模板 1. React 技术栈 Ant Design Pro 官网:pro.ant.design特点:阿里出品,内置 R…...

HCIA复习拓扑实验
一.拓扑图 二.需求 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到百度网络中HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分,PC1可以正常访问3.3.3.0/24网段,但是PC2不允许 3.学校内部路由使用静态路由,R1和R2之间两…...

TI毫米波雷达开发 —— 串口输出数据解析
TI毫米波雷达开发 —— 串口输出解析 TLV协议协议概述HeaderBodyPadding TI 毫米波雷达芯片计算的结果数据都会从UART发出供上位机进行解析并展示。解析和展示是两个不同的概念,解析指提取有效数据并转换成常见的度量值。展示指数据的可视化。 由于雷达这个领域的特…...

Docker Desktop 4.38 安装与配置全流程指南(Windows平台)
一、软件定位与特性 Docker Desktop 是容器化应用开发与部署的一体化工具,支持在本地环境创建、管理和运行Docker容器。4.38版本新增GPU加速支持、WSL 2性能优化和Kubernetes 1.28集群管理功能,适用于微服务开发、CI/CD流水线搭建等场景。 二、安装环境…...

【AD】5-16 泪滴的添加
1.工具—滴泪(快捷键TE)...

聊天服务器分布式改造
目前的聊天室是单节点的,无论是http接口还是socket接口都在同一个进程,无法承受太多人同时在线,容灾性也非常差。因此,一个成熟的IM产品一定是做成分布式的,根据功能分模块,每个模块也使用多个节点并行部署…...
el-table(elementui)表格合计行使用以及滚动条默认样式修改
一、el-table新增合计行以及el-table展示数据出现的问题 1. 使用合计行 el-table的属性show-summary设为true,即可在表格尾部展示合计行。默认情况下,第一列不展示数据,而显示合计二字,可以通过sum-text自己配置,其余…...

Web前端开发——HTML基础下
HTML语法 一表格1.基本格式2.美化表格合并居中属性 二表单1.input2.select3.textarea4.button5.date6.color7.checkbox8.radio9.range10.number 一表格 1.基本格式 HTML表格由<table>标签定义 其中行由<tr>标签定义,单元格由<td>定义。我们先来…...
Python使用入门(一)
初识数据类型 整型(int) print(666) print(2 10) print(2 * 12)字符串(str) 单行字符串 #单行字符串 print("我是小红aaa") print(我是小红aaa)print("中国上海") print(中国上海)# 输出带引号的字符串 print(我是"小红aaa) print("我是\&qu…...

基于multisim的花样彩灯循环控制电路设计与仿真
1 课程设计的任务与要求 (一)、设计内容: 设计一个8路移存型彩灯控制器,基本要求: 1. 8路彩灯能演示至少三种花型(花型自拟); 2. 彩灯用发光二极管LED模拟; 3. 选做…...

求最大公约数【C/C++】
大家好啊,欢迎来到本博客( •̀ ω •́ )✧,我将带领大家详细的了解最大公约数的思想与解法。 一、什么是公约数 公约数,也称为公因数,是指两个或多个整数共有的因数。具体来说,如果一个整数能被两个或多个整数整除&…...
leetcode day27 455+376
455 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j,都有…...
go的grpc
GRPC介绍 目录 单体架构微服务架构问题原始的grpc 服务端客户端原生rpc的问题 grpc的hello world 服务端客户端 proto文件proto语法 数据类型 基本数据类型其他数据类型 编写风格多服务 单体架构 只能对整体扩容一荣俱荣,一损俱损代码耦合,项目的开…...

算法每日一练 (9)
💢欢迎来到张胤尘的技术站 💥技术如江河,汇聚众志成。代码似星辰,照亮行征程。开源精神长,传承永不忘。携手共前行,未来更辉煌💥 文章目录 算法每日一练 (9)最小路径和题目描述解题思路解题代码…...
软考高级信息系统项目管理师笔记-第10章项目进度管理
第10章项目进度管理 10.1 管理基础 10.1.1 项目进度计划的定义和总要求 1、项目进度计划是 一种用于沟通和管理干系人期望的工具,为绩效报告提供依据。 2、项目管理团队编制进度计划的一般步骤为: 首先选择进度计划方法,例如关键路径法; 然后将项目特定数据,如活动、计…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...

华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...

Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...

关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...