我正在尝试使用 Mapbox 制作一张世界地图，每个国家/地区都有不同的图层。我想用它来点击一个国家的图层，它会链接到我网站上那个国家的特定网址。我知道我需要使用 on('click') 来执行此操作，但不知道如何操作。到目前为止，在这张 map 中，我有一个智利图层(这会是一个矢量图 block 吗)，所以我希望单击图层“智利”以链接到有关智利的外部网页的 url。我已经玩了好几天了，一无所获。抱歉，我的代码经验很少，但感谢您的帮助!这是我从 Mapbox 获得的基础:
<html>
<head>
<meta charset='utf-8' />
<title>Points on a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user- scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHJla3dpdGh0YXlsb3IiLCJhIjoiY2owZTB0OWkyMDE2bDMycWw1N3J2OHZpZyJ9.jDMCcXBCjsbQ-Vh973LQZA'; // replace this with your access token
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/trekwithtaylor/cj0h4jjwe003w2sultexx0ds4'
});
</script>
</body>
</html>
最佳答案
从概念上讲，您需要做的是监听 click event , 使用 Map#queryRenderedFeatures找出用户点击的是哪个国家，然后打开与该国家相关联的网页。
我整理了一个快速演示，该演示调整了“创建悬停效果”以响应点击事件。希望对您有所帮助!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVjYXN3b2oiLCJhIjoiY2l5Nmg4cWU1MDA0ejMzcDJtNHJmZzJkcyJ9.WhcEdTYQH6sSw2pm0RSP9Q';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-100.486052, 37.830348],
zoom: 2
});
map.on('load', function () {
map.addSource("states", {
"type": "geojson",
"data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"
});
map.addLayer({
"id": "state-fills",
"type": "fill",
"source": "states",
"layout": {},
"paint": {
"fill-color": "#627BC1",
"fill-opacity": 0.5
}
});
map.addLayer({
"id": "state-borders",
"type": "line",
"source": "states",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2
}
});
map.addLayer({
"id": "state-fills-hover",
"type": "fill",
"source": "states",
"layout": {},
"paint": {
"fill-color": "#627BC1",
"fill-opacity": 1
},
"filter": ["==", "name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the state-fills-hover
// layer to only show that state, thus making a hover effect.
map.on("mousemove", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["state-fills"] });
if (features.length) {
map.getCanvas().style.cursor = 'pointer';
map.setFilter("state-fills-hover", ["==", "name", features[0].properties.name]);
} else {
map.setFilter("state-fills-hover", ["==", "name", ""]);
map.getCanvas().style.cursor = '';
}
});
// Reset the state-fills-hover layer's filter when the mouse leaves the map
map.on("mouseout", function() {
map.getCanvas().style.cursor = 'auto';
map.setFilter("state-fills-hover", ["==", "name", ""]);
});
map.on("click", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["state-fills"] });
if (features.length) {
window.location = 'https://en.wikipedia.org/wiki/' + features[0].properties.name
}
});
});
</script>
</body>
</html>关于javascript - 单击国家/地区特定图层时链接到 url 的世界地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42919381/