mapbox点击图片弹出对话框
程序员文章站
2022-05-31 11:46:31
...
一、前言
在上篇文章中介绍了如何在mapbox上添加图片层。(感兴趣的同学可以点击前面的链接查看原文)
主要任务：我们在上篇文章的基础上，实现点击图片弹出对话框功能。
效果图:
二、弹出窗口api
popup一个弹出组件。
三、对话框功能
完整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;
}
.btns {
float: left;
/* width: 100px; */
height: 32px;
z-index: 555;
background-image: url('../img/btn_bg.png');
background-size: 100% 100%;
border-radius: 10px;
text-align: center;
cursor: pointer;
margin-top: 100px;
margin-left: 490px;
line-height: 32px;
color: #fff;
padding: 0 20px;
font-size: 15px;
}
.btns.active {
background-image: url('../img/btn_hover_bg.png');
}
.tdt-infowindow-content-wrapper {
background-color: #091223 !important;
min-width: 280px !important;
}
.tdt-infowindow-content-wrapper {
padding: 0 !important;
}
.tdt-infowindow-content {
margin: 0 !important;
}
.tdt-container a.tdt-infowindow-close-button {
top: 8px !important;
right: 5px !important;
}
.tdt-infowindow-tip {
background-color: #091223 !important;
}
.mapboxgl-popup-content {
padding: 0
}
.mapboxgl-popup-close-button {
position: absolute;
right: 0;
top: 0;
color: #fff;
width: 40px;
font-size: 22px;
height: 40px;
border: 0;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: transparent;
}
.makerTop {
background-image: url("../img/markerTopBg.png");
background-size: 100% 100%;
display: flex;
border: solid 1px #052f66;
align-items: center;
border-bottom: none;
}
.markerHear {
width: 80%;
font-size: 15px;
line-height: 37px;
padding-left: 12px;
color: #fff;
height: 37px;
overflow: hidden;
margin: 0;
}
.markerBody {
background-color: #091324;
padding: 8px 12px;
border: solid 1px #052f66;
border-top: none;
}
.markerBody p {
font-size: 14px;
margin: 0 !important;
line-height: 30px;
color: #fff;
}
</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
}
});
//添加点击方法
map.on('click', 'points', function (e) {
let showInfo = null;
var coordinates = e.features[0].geometry.coordinates;//图片的经纬度
showInfo = '<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' +
'<div class="markerBody" ><p>设在单位：兴安盟乌兰浩特市市*</p>' +
'<p>详细地址：兴安盟乌兰浩特市</p>' +
'<p>负 责 人：杨子林</p>' +
'<p>军  电：0311-2564558'</p></div>'
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(showInfo)
.addTo(map);
});
map.on('mouseenter', 'points', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'points', function () {
map.getCanvas().style.cursor = '';
});
}
);
});
}
</script>
四、最后
这些代码都是自己手敲的，本来代码中的地图点以及弹出框中的内容都是通过接口返回的。但是考虑到你们并没有对应的接口数据，所以我就将地图点以及弹出框中的内容全都写死了。这样你们可以copy代码，直接运行调试。