mapbox gl 3D建筑物高亮显示

最新推荐文章于 2024-07-12 11:33:31 发布
最新推荐文章于 2024-07-12 11:33:31 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： mapbox 文章标签： js
原文链接：https://tieba.baidu.com/p/5493029421?red_tag=1007636426
版权

实现如上图效果，代码如下，同时可以获取要素属性

map.on('mousemove',function(e){
    var features=map.queryRenderedFeatures(e.point,{layers:['park-boundary']})
    if(features.length>0){
        map.setPaintProperty('park-boundary','fill-extrusion-color','#faafee')
    }else{
        map.setPaintProperty('park-boundary',"fill-extrusion-color" ,'#FFA54F')
    }
})

 

sunj92
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
072：mapboxGL 点击某图层feature，高亮这部分
大剑师兰特的GIS世界
01-18 405
本示例是介绍如何在vue+mapbox中点击某图层feature，高亮这部分。思路是通过点击，获取点击部分的feature信息，生成一个新的source和layer，如果这个图层不为空，则清除之，相当于点击了别的地方，原有的高亮会删除掉，在别的地方高亮。
mapboxgl绘制3D线教程
2301_82242204的博客
05-01 607
机会是留给有准备的人，大家在求职之前应该要明确自己的态度，熟悉求职流程，做好充分的准备，把一些可预见的事情做好。对于应届毕业生来说，校招更适合你们，因为绝大部分都不会有工作经验，企业也不会有工作经验的需求。同时，你也不需要伪造高大上的实战经验，以此让自己的简历能够脱颖而出，反倒会让面试官有所怀疑。你在大学时期应该明确自己的发展方向，如果你在大一就确定你以后想成为Java工程师，那就不要花太多的时间去学习其他的技术语言，高数之类的，不如好好想着如何夯实Java基础。请转发本文支持一下。
mapbox加载建筑物真型osm building
吴道简的博客
04-04 1146
效果如下，按住ctrl键和鼠标左键，可以倾斜旋转地图。 一、代码 代码如下，把mapboxgl.accessToken替换成自己的key： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mapbox buildings</title> <meta name="viewport" content="initial-scale=1.
mapbox实现3d建筑物分层效果（类似单体化）
qq_37731856的博客
08-12 2107
mapbox建筑物实现单体化分层效果
Three.js、Cesium 和 Mapbox 各自特点及使用场景分析
最新发布
qq_21952519的博客
07-12 1415
Three.js、Cesium 和 Mapbox 的区别、使用场景分析，以及响应的一些网站和资源
map-box地图点击图标高亮事件
zx960103的博客
10-05 1130
【代码】map-box地图点击图标高亮事件。
mapboxGL中楼层的的展示与单体化(二)
LZUGIS
07-24 346
本文实现点击楼层时弹出楼层。
arcgis for android 学习 - (6) 属性查询。检索图层上某个要素，并高亮显示它。
weixin_33725722的博客
06-06 533
"NAME like '%" + keyQuery + "%'" 既然是 “地图”，“gis”，那么 查询（ＱＵＥＲＹ）是必须的了。我们看看如何查询。   动机： 我想要查找地图上的某个点（要素，或者说某个位置 ），然后将检索的结果　显示出来（高亮）显示。    执行查询： // 查询的关键字 String keyQuery = t...
mapboxgl2.4.1加载3D建筑物
06-14
mapboxgl2.4.1加载3D建筑物 建筑物用的矢量瓦片，用的是geoserver本地发布的数据
MapboxGL本地化部署方法
01-12
### MapboxGL本地化部署方法详解 #### 一、引言 Mapbox GL JS 是一款高性能的开源地图库，能够实现交互式矢量地图的渲染。对于那些希望将地图服务部署在内网环境中的用户来说，进行Mapbox GL JS的本地化部署就显得...
Mapboxgl实现点animate动画效果
03-24
Mapbox GL JS 是一个强大的地图渲染库，它允许开发者创建交互式、自定义的地图体验。在GIS领域，Mapbox GL JS 提供了丰富的API和工具，使得开发者可以轻松地实现各种地图上的动画效果，比如“点animate动画效果”。...
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
热门推荐
别人笑我太疯癫 我笑他人看不穿 流水落花春去也 游戏人间
09-30 1万+
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
mapboxgl点击高亮显示的实现
qq_33460928的博客
09-05 4600
mapboxgl点击高亮显示的实现，采用过滤的方式实现。 //geojson点数据 var geojsonPoints = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { ...
Echarts地图高亮循环数据展示
A_Brave的博客
09-22 1794
js项目使用Echarts进行地图的绘制与数据高亮循环展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
【WebGIS实例】（3）MapboxGL实现矢量要素点击高亮
ReBeX
11-23 1339
mapbox gl js 实现矢量要素点击高亮
mapabc
qq414690007的专栏
10-29 689
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                                                                     <br /> <html xmlns="http://www.w3.org/1999
Mapbox 实现画圆并高亮圆内要素
hequhecong10857的博客
10-02 1808
文章目录需求实现思路预览效果实现代码相关链接 需求 Mapbox官方示例只实现了点选和框选的空间查询方式，而在实际开发中也需要实现画圆并高亮圆内的要素。 实现思路 使用Canvas实现动态画圆 根据圆心和鼠标所在位置，计算出半径，在map上创建circle图层 通过turf工具函数，查询与圆相交或在圆内的要素 预览效果 与圆相交的要素： 圆内要素： 实现代码 <!DOCTYPE html> <html> <head> <meta charset="ut
mapbox构建3D建筑展示
weixin_30800807的博客
02-12 1982
3D建筑展示，使用挤压显示建筑物的三维高度。 mapbox通过高度差拉伸构建3D对象。 <!DOCTYPE html>//<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；　　　　　　　　　//它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编...
3d建筑物，mapbox大屏酷炫效果
viva302的博客
03-14 285
3d建筑物，地图，大屏
mapboxgl加载gif图片高亮动画
07-16
要在MapboxGL中加载并添加高亮动画效果的GIF图片，可以使用以下步骤： 1. 首先，确保已经引入了MapboxGL库和相关的依赖文件。 2. 创建一个HTML元素（例如div），用于容纳地图和动画效果。 ```html <div id="map"></div> ``` 3. 在JavaScript中，使用MapboxGL创建地图实例，并将其添加到指定的HTML元素中。 ```javascript mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: zoomLevel }); ``` 确保将YOUR_MAPBOX_ACCESS_TOKEN替换为您自己的Mapbox访问令牌，并将lng、lat和zoomLevel替换为地图的初始中心点和缩放级别。 4. 创建一个图层，并向地图添加一个GIF图片作为标记。 ```javascript var marker = new mapboxgl.Marker({ element: createMarkerElement() }) .setLngLat([lng, lat]) .addTo(map); ``` 在createMarkerElement函数中，您可以创建一个包含GIF图片的HTML元素，并为其添加所需的样式。 5. 创建一个CSS动画效果，用于高亮标记。您可以使用@keyframes规则来定义动画。 ```css @keyframes highlight { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } ``` 6. 使用JavaScript，为标记元素添加动画类。 ```javascript marker.getElement().classList.add('highlight-animation'); ``` 请确保将'highlight-animation'替换为您在CSS中定义的动画类名称。 这样，您就可以在MapboxGL中加载并添加高亮动画效果的GIF图片了。记得根据您的需求，调整地图的样式、标记的位置和动画效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值