Javascript 当点击特定国家图层时链接到url的世界地图_Javascript_Leaflet_Mapbox_Mapbox Gl Js

Javascript 当点击特定国家图层时链接到url的世界地图

javascript leaflet mapbox

Javascript 当点击特定国家图层时链接到url的世界地图,javascript,leaflet,mapbox,mapbox-gl-js,Javascript,Leaflet,Mapbox,Mapbox Gl Js,我正在尝试使用Mapbox制作一张世界地图，每个国家都有一个不同的图层。我想使用它的地方，当一个国家的层被点击，它将链接到一个特定的网址在我的网站上为该国。我知道我需要使用on（'click'）来执行此操作，但我不知道如何执行。到目前为止，在这张地图中，我有一个智利图层（这是一个矢量图块），所以我希望点击图层“Chile”链接到一个关于智利的外部网页的url。我已经玩了好几天了，一无所有。很抱歉，我没有多少代码经验，但非常感谢您的帮助！这是我从Mapbox获得的信息的基础： <html&g

我正在尝试使用Mapbox制作一张世界地图，每个国家都有一个不同的图层。我想使用它的地方，当一个国家的层被点击，它将链接到一个特定的网址在我的网站上为该国。我知道我需要使用on（'click'）来执行此操作，但我不知道如何执行。到目前为止，在这张地图中，我有一个智利图层（这是一个矢量图块），所以我希望点击图层“Chile”链接到一个关于智利的外部网页的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>


地图上的点
身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
mapboxgl.accessToken='pk.eyj1ijoidhjla3dpgh0yxlsb3iilcjhijoi2owztb0owkymde2bdmycww1n3j2ohzpzyj9.jdmcxbcjsbq-Vh973LQZA'；//将此替换为您的访问令牌
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/trekwithtaylor/cj0h4jjwe003w2sultexx0ds4' 
});

从概念上讲，您需要做的是收听，使用以确定用户单击的国家，然后打开与该国家相关的网页

我制作了一个快速演示，它采用了“创建悬停效果”来响应点击事件。我希望这对你有帮助


正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken='pk.eyj1ijoibhvjxn3b2oiljhijoi2l5nmg4cwu1mda0ejmzcdjtnhjmzzjkcyj9.WhcEdTYQH6sSw2pm0RSP9Q'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-100.486052,37.830348]，
缩放：2
});
map.on（'load'，function（）{
map.addSource（“状态”{
“类型”：“geojson”，
“数据”：https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"
});
map.addLayer({
“id”：“状态填充”，
“类型”：“填充”，
“来源”：“国家”，
“布局”：{}，
“油漆”：{
“填充颜色”：“627BC1”，
“填充不透明度”：0.5
}
});
map.addLayer({
“id”：“国家边界”，
“类型”：“行”，
“来源”：“国家”，
“布局”：{}，
“油漆”：{
“线条颜色”：“627BC1”，
“线宽”：2
}
});
map.addLayer({
“id”：“状态填充悬停”，
“类型”：“填充”，
“来源”：“国家”，
“布局”：{}，
“油漆”：{
“填充颜色”：“627BC1”，
“填充不透明度”：1
},
“过滤器”：[“==”，“名称”，“”]
});
//当用户将鼠标移到页面上时，我们会查找功能
//在鼠标位置（即点）和状态层内（状态填充）。
//如果找到一个特性，那么我们将在状态填充悬停中更新过滤器
//图层仅显示该状态，从而产生悬停效果。
map.on（“mousemove”，函数（e）{
var features=map.queryRenderedFeatures（e.point，{layers:[“状态填充”]}）；
if（特征.长度）{
map.getCanvas（）.style.cursor='pointer'；
setFilter（“状态填充悬停”、[“==”、“名称”、功能[0].properties.name]）；
}否则{
setFilter（“状态填充悬停”、[“==”、“名称”、“]”）；
map.getCanvas（）.style.cursor=''；
}
});
//当鼠标离开贴图时，重置状态填充悬停层的过滤器
map.on（“mouseout”，function（））{
map.getCanvas（）.style.cursor='auto'；
setFilter（“状态填充悬停”、[“==”、“名称”、“]”）；
});
地图上（“点击”，功能（e）{
var features=map.queryRenderedFeatures（e.point，{layers:[“状态填充”]}）；
if（特征.长度）{
window.location=https://en.wikipedia.org/wiki/“+功能[0].properties.name
}
});
});