点击国家特定图层时链接到网址的世界地图

我正在尝试制作使用Mapbox的世界地图，每个国家都有不同的图层。我想用它来点击一个国家的图层时，它会链接到我国网站上的特定网址。我知道我需要使用（'点击'）来做到这一点，但不知道如何。在这张地图中，我有智利的一个图层（这是一个矢量图块），所以我希望点击图层'chile'来链接到一个关于智利的外部网页。我已经玩了几天，什么也没有。我很抱歉，我有很少的代码体验，但感谢任何帮助！这是我从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>

来源

2017-03-21 Taylordemon

从概念上讲，你需要做的是监听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>

来源

2017-03-21 18:40:24

点击国家特定图层时链接到网址的世界地图

回答

相关问题