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

mapbox加载geojson，鼠标移入改变颜色，设置样式以及vue中的使用

news 2025/7/13 22:01:43

全国地图json数据下载地址

html加载全部代码

方式一：使用html方式加载geojson

1. 初始化地图

2. 加载geojson数据

设置geojson图层样式，设置type加载数据类型

设置线条

鼠标移入改变颜色，设置图层属性，此处是fill-extrusion类型

使用mapbox地图加载geojson数据

html加载全部代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Create a hover effect</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body>
<div id="map"></div>
<script>let dataJson = {}mapboxgl.accessToken = '你的密钥';fetch(url).then((response)=>{ return response.json();}).then((data)=>{dataJson = datadataJson.features.map((item, index) => {item['id'] = indexitem.properties['color'] = '#9b46e1'item.properties['height'] = Math.floor(Math.random() * (10000 - 9500 + 1)) + 9500})}).catch((error)=>{})const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v12',center: [107.164659,33.95191],zoom: 7.5,pitch:45});let hoveredPolygonId = null;map.on('load', () => {map.addSource('states', {'type': 'geojson','data': dataJson});map.addLayer({'id': 'state-fills','type': 'fill-extrusion', 'source': 'states','layout': {},'paint': {'fill-extrusion-color': ['case',['boolean', ['feature-state', 'hover'], false],'rgba(255,228,96,0.80)',// 鼠标移入颜色'rgba(25,172,230,0.75)' // 默认颜色],"fill-extrusion-opacity":0.85,//    从source 'height'属性获取填充-挤出-高度。'fill-extrusion-height': ['get', 'height'],}});map.addLayer({'id': 'state-borders','type': 'line','source': 'states','layout': {},'paint': {'line-color': '#627BC1','line-width': 0.8}});map.on('mousemove', 'state-fills', (e) => {if (e.features.length > 0) {if (hoveredPolygonId !== null) {map.setFeatureState({ source: 'states', id: hoveredPolygonId },{ hover: false });}hoveredPolygonId = e.features[0].id;map.setFeatureState({ source: 'states', id: hoveredPolygonId },{ hover: true });}});map.on('mouseleave', 'state-fills', () => {if (hoveredPolygonId !== null) {map.setFeatureState({ source: 'states', id: hoveredPolygonId },{ hover: false });}hoveredPolygonId = null;});});
</script></body>
</html>

方式一：使用html方式加载geojson

1. 初始化地图

<div id="map"></div>

<style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>

mapboxgl.accessToken = '你的密钥'; 
const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v12',center: [107.164659,33.95191],zoom: 7.5,pitch:45});

2. 加载geojson数据

当地图初始化成功好后，在对地图做操作处理map.on('load',()=>{})，将geojson数据加载至地图上

     fetch(url).then((response)=>{ return response.json();}).then((data)=>{dataJson = datadataJson.features.map((item, index) => {// 添加id、color、height下面做渐变展示效果item['id'] = indexitem.properties['color'] = '#9b46e1'item.properties['height'] = Math.floor(Math.random() * (10000 - 9500 + 1)) + 9500})}).catch((error)=>{})

map.addSource('states', {'type': 'geojson','data': dataJson
});

设置geojson图层样式，设置type加载数据类型

type类型：（根据官网使用百度翻译，如有不准确，请多指教）

fill 填充多边形
line 线
symbol 图标或文本标签
circle 圆
heatmap 热力图
fill-extrusion 3d立体多边形
raster 贴图纹理，如：卫星图像
raster-particle 贴图纹理的驱动的粒子动画
hillshade 基于DEM数据的客户端山坡可视化。目前，该实现仅支持Mapbox Terrain RGB和 Mapzen Terrarium图块
model 3D模型
background 地图的背景颜色或图案
sky 地图周围的球形圆顶，始终在所有其他层后面渲染
slot 标记插槽的位置
clip Layer that removes 3D content from map

        map.addLayer({'id': 'state-fills','type': 'fill-extrusion','source': 'states','layout': {},'paint': {'fill-extrusion-color': {//根据数值中加载相对应颜色property: "height", stops: [[9500, "#29D2F1"],[9600, "#27C2EC"],[9700, "#18AFE7"],[9800, "#0E83DA"],[9900, "#0D80D9"],[10000, "#0B64D1"]]},"fill-extrusion-opacity":0.85,//    从source 'height'属性获取填充-挤出-高度。'fill-extrusion-height': ['get', 'height'],}});

设置线条

       map.addLayer({'id': 'state-borders','type': 'line','source': 'states','layout': {},'paint': {'line-color': '#627BC1','line-width': 0.8}});

鼠标移入改变颜色，设置图层属性，此处是fill-extrusion类型

        map.addLayer({'id': 'state-fills','type': 'fill-extrusion','source': 'states','layout': {},'paint': {// 设置颜色表达式'fill-extrusion-color': ['case',['boolean', ['feature-state', 'hover'], false],'rgba(255,228,96,0.80)',// 鼠标移入颜色'rgba(25,172,230,0.75)' // 默认颜色],"fill-extrusion-opacity":0.85,//    从source 'height'属性获取填充-挤出-高度。'fill-extrusion-height': ['get', 'height'],}});

效果图：

方式二：使用vue加载geojson

<template><div class="mapContainer"><div id='map' style='width: 100%; height: 800px;'></div></div>
</template><script>
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
mapboxgl.accessToken = '你的密钥';
import { nextTick, onMounted } from 'vue'export default {setup(){onMounted(()=>{const map = new mapboxgl.Map({container: 'map', style: 'mapbox://styles/mapbox/streets-v12', center: [-74.5, 40], zoom: 9,});})}}
</script>

mapbox加载geojson，鼠标移入改变颜色，设置样式以及vue中的使用

全国地图json数据下载地址目录 html加载全部代码方式一：使用html方式加载geojson 1. 初始化地图 2. 加载geojson数据设置geojson图层样式，设置type加载数据类型设置线条鼠标移入改变颜色，设置图层属性，此处是fill-extru…...

编程日记 2025/1/25 22:47:24

考研机试题：打印日期

描述给出年分m和一年中的第n天，算出第n天是几月几号。输入描述: 输入包括两个整数y(1<y<3000)，n(1<n<366)。输出描述: 可能有多组测试数据，对于每组数据， 按 yyyy-mm-dd的格式将输入中对应的日期打印出来。 …...

编程日记 2025/1/25 22:46:23

OpenHarmonyOS 3.2 编译生成的hap和app文件的名称如何配置追加版本号？

找了一圈发现官方的文档都是最新的，3.2很多API都不支持，比如获取OhosAppContext，通过OhosAppContext来获取应用版本号，最终是通过读取app.json5的文件内容来读取版本号，最终修改entry下的hvigorfile.ts如下&#xff0c…...

编程日记 2025/1/25 22:45:21

【openwrt】openwrt odhcpd配置介绍

odhcpd odhcpd是一个嵌入式DHCP/DHCPv6/RA服务器和NDP中继的进程，odhcpd是一个守护进程，用于服务和中继IP管理协议，以配置客户端和下游路由器。它试图遵循IPv6家用路由器的RFC 6204要求。odhcpd为DHCP、RA、无状态SLAAC和有状态DHCPv6、前缀委派提供服务器服务，并可用于在没…...

编程日记 2025/1/25 22:44:20

基于神经网络的视频编码NNVC（1）：帧内预测

在H.266/VVC发布后，基于传统编码框架提升压缩率越来越难，随着深度学习的发展，研究人员开始尝试将神经网络引入编码器。为此，JVET工作组在2020年成立AHG11小组来专门进行基于神经网络的视频编码的研究。为了方便研究，工…...

编程日记 2025/1/25 22:43:18

Android开发，待办事项提醒App的设计与实现

文章目录 1. 研究目的2. 主要内容3. 运行效果图4. 涉及到的技术点5. 开发环境6. 关于作者其它项目视频教程介绍 1. 研究目的当今,随着时代的发展和计算机的普及,人们开始利用网络来记录并管理日常的事务,时下这方面的软件数不胜数。各种日程管理软件就是将每天的工作和事务安…...

编程日记 2025/1/25 22:40:16

豆瓣Top250电影的数据采集与可视化分析（scrapy+mysql+matplotlib）

文章目录豆瓣Top250电影的数据采集与可视化分析（scrapy+mysql+matplotlib）写在前面数据采集（Visual Studio Code+Navicat）1.观察网页信息2.编写Scrapy代码（Visual Studio Code）2.1 创建Scrapy项目`doubanProject`2.2 创建爬虫脚本`douban.py`2.3 修改`douban.py`的代码2…...

编程日记 2025/1/25 22:27:02

MySQL索引——让查询飞起来

文章目录索引是什么？？硬件理解MySQL与存储 MySQL 与磁盘交互基本单位索引的理解B vs B聚簇索引 VS 非聚簇索引索引操作创建主键索引唯一索引的创建普通索引的创建全文索引的创建查询索引删除索引在现代数据库应用中，查询性能是决定系统响应…...

编程日记 2025/1/25 22:23:58

Springboot集成Elasticsearch8.0（ES）版本，采用JAVA Client方式进行连接和实现CRUD操作

本文章介绍了 springboot t集成Elasticsearch8.0（ES）版本，如何通过 AVA Client方式进行连接和实现CRUD操作在ES7.15版本之后，ES官方将高级客户端 RestHighLevelClient标记为弃用状态。同时推出了全新的 Java API客户端 Elasticsearch Java API Client，该客户端也将在 Ela…...

编程日记 2025/1/25 22:22:57

【Linux】APT 密钥管理迁移指南：有效解决 apt-key 弃用警告

引言随着 Debian 11 和 Ubuntu 22.04 版本的推出，APT 的密钥管理方式发生了重大的变化。apt-key 命令被正式弃用，新的密钥管理机制要求使用 /etc/apt/keyrings/ 或 /etc/apt/trusted.gpg.d/ 来存储和管理密钥。这一变化对管理员和普通用户来说至关重要…...

编程日记 2025/1/25 22:21:56

洛谷P1143 进制转换

题目链接：P1143 进制转换 - 洛谷 | 计算机科学教育新生态题目难度：普及— 解题思路：本题先将输入的数转为10进制，然后取模，最后倒着输出就好了，最后直接上代码 #include<bits/stdc.h> using namespa…...

编程日记 2025/1/25 22:17:51

99.12 金融难点通俗解释：毛利率

目录 0. 承前1. 简述2. 比喻：冰淇淋店赚钱2.1 第一步：准备材料2.2 第二步：卖冰淇淋2.3 第三步：计算毛利率 3. 生活中的例子3.1 好的毛利率3.2 一般的毛利率3.3 差的毛利率 4. 小朋友要注意4.1 毛利率高不一定好4.2 毛利率低不一定…...

编程日记 2025/1/25 22:10:44

HUMANITY’S LAST EXAM (HLE) 综述：人工智能领域的“最终考试”

论文地址：Humanity’s Last Exam 1. 背景与动机随着大型语言模型（LLMs）能力的飞速发展，其在数学、编程、生物等领域的任务表现已超越人类。为了系统地衡量这些能力，LLMs 需要接受基准测试（Benchmarks&…...

编程日记 2025/1/25 22:03:35

C++从入门到实战（二）C++命名空间

C从入门到实战（二）C命名空间前言一、C的第一个程序二、命名空间（一）为什么需要命名空间（二）定义命名空间（三）使用命名空间1.通过命名空间限定符：2.使用 using 声明&…...

编程日记 2025/1/25 22:02:34

C# OpenCV机器视觉:实现农作物病害检测

在酷热难耐的夏日，阳光似火舌般舔舐大地。阿强惬意地躺在老家院子摇椅上，哼着小曲，手边放着一碗冰镇西瓜，头顶大槐树宛如巨大遮阳伞，洒下斑驳阴凉。他本想趁假期回老家放松，远离城市喧嚣与代码 “纠缠”。 …...

编程日记 2025/1/25 22:00:32

开源软件协议介绍

一、可以闭源使用/不具传染性的协议允许商业使用和分发 1、BSD：详细介绍 2、LGPL许可证：详细介绍 3、MPL2.0：详细介绍二、具有传染性/使用后需要开源自身软件的协议不建议商业使用 1、GPL许可证：详细介绍...

编程日记 2025/1/25 21:57:28

CLion开发Qt桌面

IDE：CLion Qt Qt版本：5.12 学习正点原子的嵌入式Linux开发板时，使用Qt Creator写代码不是很方便，遂尝试使用CLion搭建Qt开发环境。一、CLion的Qt环境搭建 1，配置工具链找到Qt的安装目录，此处为E:\Tools\…...

编程日记 2025/1/25 21:53:24

09_异步加载_单例模式_常量类配置_不可销毁

1.首先在资源加载服务层ResSvc.cs中添加自定义异步加载函数 using UnityEngine; using UnityEngine.SceneManagement; //异步加载命名空间 //功能 : 资源加载服务 public class ResSvc : MonoBehaviour{public void InitSvc(){Debug.Log("Init ResSvc...");}//自定…...

编程日记 2025/1/25 21:52:24

士的宁（strychnine）的生物合成-文献精读104

Biosynthesis of strychnine 士的宁（strychnine） 又名番木鳖碱的生物合成摘要士的宁（番木鳖碱）是一种天然产物，通过分离、结构阐明和合成努力，塑造了有机化学领域。目前，士的宁因其强大的…...

编程日记 2025/1/25 21:50:19

【开源免费】基于Vue和SpringBoot的常规应急物资管理系统（附论文）

本文项目编号 T 159 ，文末自助获取源码 \color{red}{T159，文末自助获取源码} T159，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/1/25 21:49:18

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/6/27 2:57:24

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/7/13 4:35:27

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/12 23:50:30

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/7/11 12:42:00

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/7/13 8:25:20

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/7/13 2:11:18

ip子接口配置及删除

配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/5 14:15:20