Question

我正在尝试使用Mapbox创建一个世界地图，每个国家/地区都有不同的图层。我想将它用于点击国家/地区图层的位置，它会链接到我的网站上该国家/地区的特定网址。我知道我需要使用（＆＃39;点击＆＃39;）来做到这一点，但无法弄清楚如何。到目前为止，在这张地图中，我有一个智利的图层（这是一个矢量图块），所以我希望点击图层上的智利＆＃39;链接到关于智利的外部网页的网址。我已经玩了好几天没什么了。我很抱歉，我的代码经验很少，但感谢任何帮助！这是我从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>

Answer 1

从概念上讲，您需要做的是听取click event，使用Map#queryRenderedFeatures找出用户点击的国家/地区，然后打开与该国家/地区相关联的网页。

我汇总了一个快速演示，它可以调整＆＃34;创建一个悬停效果＆＃34;也响应点击事件。我希望这对你有所帮助！

＆＃13;

<!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>

＆＃13;

单击国家/地区特定图层时链接到URL的世界地图

1 个答案: