【MAPBOX基础功能】16、mapbox叠加图片图层到地图上

前言

官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
mapbox叠加图片图层到地图上

前置图片

效果

代码实现

<!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" /><title>16、添加图片图层到地图</title><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"rel="stylesheet"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script><style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}html,body {width: 100%;height: 100%;}#map {width: 100%;height: 100%;}.btn-list {position: fixed;top: 100px;left: 100px;}</style></head><body><div id="map"></div><ul class="btn-list"><li><button onclick="add()">添加</button></li><li><button onclick="hide()">隐藏</button></li><li><button onclick="show()">显示</button></li><li><button onclick="editOpacity()">修改透明度</button></li><li><button onclick="deleteLayer()">删除</button></li></ul><script>mapboxgl.accessToken ='pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'const map = new mapboxgl.Map({container: 'map', // 容器 idstyle: 'mapbox://styles/mapbox/streets-v11', // mapbox底图center: [108, 35], // 初始化中心点zoom: 2, // 初始化层级})// 添加function add() {if (map.getSource('image')) {map.removeLayer('image')map.removeSource('image')}map.addSource('image', {type: 'image',url: './img/temperature.png',coordinates: [// 图片覆盖地图的四至点[73.47656249999999, 53.592504809039376], // 左上[135.1112921875038, 53.592504809039376], // 右上[135.1112921875038, 18.312810846425442], // 右下[73.47656249999999, 18.312810846425442], // 左下],})map.addLayer({id: 'image',type: 'raster',source: 'image',paint: {'raster-opacity': 1,},})}// 隐藏function hide() {if (!map.getSource('image')) {return alert('请先添加')}map.setLayoutProperty('image', 'visibility', 'none')}// 显示function show() {if (!map.getSource('image')) {return alert('请先添加')}map.setLayoutProperty('image', 'visibility', 'visible')}// 修改透明度function editOpacity() {if (!map.getSource('image')) {return alert('请先添加')}map.setPaintProperty('image', 'raster-opacity', 0.5)}// 删除图层function deleteLayer() {if (map.getSource('image')) {map.removeLayer('image')map.removeSource('image')}}</script></body>
</html>

【MAPBOX基础功能】16、mapbox叠加图片图层到地图上相关推荐

vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
【MAPBOX基础功能】19、mapbox修改鼠标在地图上的样式
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】07、mapbox添加跟随地图的自定义面板到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】18、mapbox添加pbf矢量切片图层
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】17、mapbox修改已上图图层间的显示层级
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】14、mapbox点击面图层高亮指定的面
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】13、mapbox点击线图层高亮指定的线段
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】20、mapbox获取当前已上图的所有的图层
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】09、mapbox绘制线图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...

【MAPBOX基础功能】16、mapbox叠加图片图层到地图上

前言

前置图片

效果

代码实现

【MAPBOX基础功能】16、mapbox叠加图片图层到地图上相关推荐

最新文章

热门文章