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

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普惠新纪元

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

Java高频面试之集合-07

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;ArrayList 和 Vector 的区别是什么&#xff1f; ArrayList 与 Vector 的区别详解 ArrayList 和 Vector 都是 Java 中基于…...

Redis- 切片集群

切片集群 切片集群什么是Redis Cluster吗&#xff1f;为什么需要切片集群&#xff1f;Redis Cluster的数据分片机制是怎样的&#xff1f;哈希槽的算法是什么基本算法流程 待填坑 切片集群 什么是Redis Cluster吗&#xff1f;为什么需要切片集群&#xff1f; Redis Cluster是R…...

【项目日记(十)】瓶颈分析与使用基数树优化

前言 上一期我们对整个项目进行了细节部分的优化&#xff0c;并在最后测试了多线程环境下和malloc的性能对比测试&#xff0c;发现malloc有时候还是更胜一筹的&#xff0c;基于此我们进行对我们的内存池进行瓶颈分析与优化。 目录 前言 一、项目瓶颈分析 VS编译器下性能分…...

后台管理系统比较全面的分析对比

以下是主流的 后台管理系统模板 分类与技术选型指南&#xff0c;涵盖开源、商业及全栈解决方案&#xff0c;可根据项目需求灵活选择&#xff1a; 一、开源免费模板 1. React 技术栈 Ant Design Pro 官网&#xff1a;pro.ant.design特点&#xff1a;阿里出品&#xff0c;内置 R…...

HCIA复习拓扑实验

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

TI毫米波雷达开发 —— 串口输出数据解析

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

Docker Desktop 4.38 安装与配置全流程指南(Windows平台)

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

【AD】5-16 泪滴的添加

1.工具—滴泪&#xff08;快捷键TE&#xff09;...

聊天服务器分布式改造

目前的聊天室是单节点的&#xff0c;无论是http接口还是socket接口都在同一个进程&#xff0c;无法承受太多人同时在线&#xff0c;容灾性也非常差。因此&#xff0c;一个成熟的IM产品一定是做成分布式的&#xff0c;根据功能分模块&#xff0c;每个模块也使用多个节点并行部署…...

el-table(elementui)表格合计行使用以及滚动条默认样式修改

一、el-table新增合计行以及el-table展示数据出现的问题 1. 使用合计行 el-table的属性show-summary设为true&#xff0c;即可在表格尾部展示合计行。默认情况下&#xff0c;第一列不展示数据&#xff0c;而显示合计二字&#xff0c;可以通过sum-text自己配置&#xff0c;其余…...

Web前端开发——HTML基础下

HTML语法 一表格1.基本格式2.美化表格合并居中属性 二表单1.input2.select3.textarea4.button5.date6.color7.checkbox8.radio9.range10.number 一表格 1.基本格式 HTML表格由<table>标签定义 其中行由<tr>标签定义&#xff0c;单元格由<td>定义。我们先来…...

Python使用入门(一)

初识数据类型 整型(int) print(666) print(2 10) print(2 * 12)字符串(str) 单行字符串 #单行字符串 print("我是小红aaa") print(我是小红aaa)print("中国上海") print(中国上海)# 输出带引号的字符串 print(我是"小红aaa) print("我是\&qu…...

基于multisim的花样彩灯循环控制电路设计与仿真

1 课程设计的任务与要求 &#xff08;一&#xff09;、设计内容&#xff1a; 设计一个8路移存型彩灯控制器&#xff0c;基本要求&#xff1a; 1. 8路彩灯能演示至少三种花型&#xff08;花型自拟&#xff09;&#xff1b; 2. 彩灯用发光二极管LED模拟&#xff1b; 3. 选做…...

求最大公约数【C/C++】

大家好啊&#xff0c;欢迎来到本博客( •̀ ω •́ )✧&#xff0c;我将带领大家详细的了解最大公约数的思想与解法。 一、什么是公约数 公约数&#xff0c;也称为公因数&#xff0c;是指两个或多个整数共有的因数。具体来说&#xff0c;如果一个整数能被两个或多个整数整除&…...

leetcode day27 455+376

455 分发饼干 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有…...

go的grpc

GRPC介绍 目录 单体架构微服务架构问题原始的grpc 服务端客户端原生rpc的问题 grpc的hello world 服务端客户端 proto文件proto语法 数据类型 基本数据类型其他数据类型 编写风格多服务 单体架构 只能对整体扩容一荣俱荣&#xff0c;一损俱损代码耦合&#xff0c;项目的开…...

算法每日一练 (9)

&#x1f4a2;欢迎来到张胤尘的技术站 &#x1f4a5;技术如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 算法每日一练 (9)最小路径和题目描述解题思路解题代码…...

软考高级信息系统项目管理师笔记-第10章项目进度管理

第10章项目进度管理 10.1 管理基础 10.1.1 项目进度计划的定义和总要求 1、项目进度计划是 一种用于沟通和管理干系人期望的工具,为绩效报告提供依据。 2、项目管理团队编制进度计划的一般步骤为: 首先选择进度计划方法,例如关键路径法; 然后将项目特定数据,如活动、计…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...