Mapbox添加图片层

一、前言

上篇文章简单的介绍并使用了mapbox地图组件。这次我们在地图上添加图片。
效果图：

二、添加图片api

addimage将图像添加到样式。

三、添加图片层

完整HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mapbox添加图片层</title><script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' /><style>#mapDiv {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 1920px;height: 1080px;background: rgba(0, 0, 0, 0.5);z-index: -1;}</style>
</head><body onLoad='onLoad()'><div id='mapDiv'></div>
</body>
<script>var map;var zoom = 8;var layBottom, layTop;var infoWin;let description = null;//综合办机构var markerCode = true;function onLoad() {//影像地图mapboxgl.accessToken = '官网登录后得到的Token...';map = new mapboxgl.Map({container: 'mapDiv',style: 'mapbox://styles/mapbox/streets-v11',center: [122.05, 46.08], //地图中心点zoom: 9 });addQianLiLayer(res)}function addQianLiLayer(e) {map.on('load', function () {map.loadImage('https://iconfont.alicdn.com/t/a73e6cd3-6ed0-4066-b2a2-4143493d22cd.png',//添加图片的地址function (error, image) {if (error) throw error;map.addImage('build', image);map.addSource('point', {'type': 'geojson','data': {'type': 'FeatureCollection','features': {'type': 'Feature','geometry': {'type': 'Point','coordinates': [122.09316, 46.07282],//添加图片的经纬度},}}});map.addLayer({'id': 'points','type': 'symbol','source': 'point','layout': {'icon-image': 'build','icon-size': 0.25}});});});}
</script>

下一篇文章将实现点击图片弹出对话框功能。
点击跳转到下一篇文章。

Mapbox添加图片层相关推荐

mapbox 添加geoserver发布的wms服务及wms服务属性查询
<!DOCTYPE html> <html><head><meta charset='utf-8' /><title>mapbox 添加 g ...
Word中添加图片时自动添加图片名
Word中添加图片时自动添加图片名 1.打开Word中"查看宏" 2.新建宏 3.运行宏当Word中需要添加大量图片时,并要显示图片名称时可以采用以下编辑宏进行快速插入,下边讲述 ...
mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>m ...
【MAPBOX基础功能】18、mapbox添加pbf矢量切片图层
前言官网指引,生成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 添加argis rest 动态地图服务
<!DOCTYPE html> <html> <head><meta charset='utf-8' /><title>mapbox 添加a ...
mapbox 聚合图
话不多说先看效果图要实现的功能就是按照根据省份展示出各省上传的数据量首先我们可以查看 mapboxgl官网有一个例子地址如下: https://docs.mapbox.com/mapbox-gl- ...
mapBox添加本地图片
说在前面相比较于leaflet,mapbox现在已经日益强大,他提供了很多应用的例子给我们,但是总会有些不能照顾到所有人的实际需求,所以今天来介绍一些mapbox加载本地图片的例子. 开门见山 &l ...
matlab 加节点,添加图节点名称、边权重和其他属性
创建图创建一个有向图.s 和 t 中的对应元素用于定义图中每条边的源节点和目标节点. s = [1 1 2 2 3]; t = [2 4 3 4 4]; G = digraph(s,t) G = d ...
MATLAB：添加图标题、轴标签、图例、更改字体大小
文章目录 1 添加标题 2 添加轴标签 3 添加图例 4 更改标题.标签.图例的字体大小 1 添加标题 title:向图中添加标题示例: clc; clear;% 绘制 x = linspace(0 ...

Mapbox添加图片层

一、前言

二、添加图片api

三、添加图片层

Mapbox添加图片层相关推荐

最新文章

热门文章