mapbox 获取鼠标悬浮位置矢量图层要素

最新推荐文章于 2024-04-26 10:15:50 发布

炉火纯青-旺

最新推荐文章于 2024-04-26 10:15:50 发布

阅读量526

点赞数 3

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_34870529/article/details/136037428

版权

本文介绍如何在HTML页面中利用MapboxGLJS库，通过监听鼠标移动事件，获取并展示鼠标位置下的地图要素详细信息。代码展示了事件注册、要素查询、属性选择和DOM更新的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get features under the mouse pointer</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>
<style>
    #features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }
    #map canvas {
        cursor: crosshair;
    }
</style>
<div id="map

最低0.47元/天解锁文章