Html Mapbox GL原始添加层应可见
我的单选按钮中有3个选项。代码在初始加载时运行良好，如果我继续单击除原始选项之外的每个选项。问题是，当我选择浴室或平方英尺后选择原始选中层（卧室）时。卧室样式层不可见，图例不正确。这是我的密码：Html Mapbox GL原始添加层应可见,html,css,mapbox-gl-js,Html,Css,Mapbox Gl Js,我的单选按钮中有3个选项。代码在初始加载时运行良好，如果我继续单击除原始选项之外的每个选项。问题是，当我选择浴室或平方英尺后选择原始选中层（卧室）时。卧室样式层不可见，图例不正确。这是我的密码： <!DOCTYPE html> <html> <head> // add mapbox links and style the map <meta charset='utf-8' /> <title>Laughlin H
<!DOCTYPE html>
<html>
<head>
// add mapbox links and style the map
<meta charset='utf-8' />
<title>Laughlin Housing Variance</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.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<style>
/* Proper comment for CSS */
body {
margin:0;
padding:0;
}
/* style map - a css unique id */
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
/* style menu - a css unique id */
#menu {
position: absolute;
left: 480px;
top: 10px;
background: #fff;
font-size: 14px;
font-weight: bold;
border-radius: 4px;
text-align: center;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
/* style popup - a css .class */
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
/* style legend - a css class */
.legend {
background-color: #fff;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 3px 4px rgba(0,0,0,0.50);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 12px;
position: absolute;
right: 10px;
bottom: 50px;
z-index: 1;
}
/* style legend - a css class */
.legend h4 {
margin: 0 0 5px;
margin-right: 5px;
}
/* style legend - a css class */
.legend div span {
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
</style>
</head>
<body>
<!-- identify the map -->
<div id='map'></div>
<!-- identify one legend for each of 3 variances -->
<div id='Bed-legend' class='legend' style='display: visible;'>
<h4>Colors By Bedroom Variance</h4>
<div><span style='background-color: #4575b4'></span>Yardi lower in beds</div>
<div><span style='background-color: #54278f'></span>Yardi equals Plan</div>
<div><span style='background-color: #fcc5c0'></span>Yardi higher by 1 beds</div>
<div><span style='background-color: #f768a1'></span>Yardi higher by 2 beds</div>
<div><span style='background-color: #7a0177'></span>Yardi higher by 3+ beds</div>
</div>
<div id='Bath-legend' class='legend' style='display: none;'>
<h4>Colors By Bathroom Variance</h4>
<div><span style='background-color: #4575b4'></span>Yardi lower in baths</div>
<div><span style='background-color: #54278f'></span>Yardi equals Plan</div>
<div><span style='background-color: #fcc5c0'></span>Yardi higher by 0.5 baths</div>
<div><span style='background-color: #f768a1'></span>Yardi higher by 1 bath</div>
<div><span style='background-color: #7a0177'></span>Yardi higher by 2+ baths</div>
</div>
<div id='Sqft-legend' class='legend' style='display: none;'>
<h4>Colors By Sq Ft Variance</h4>
<div><span style='background-color: #0c2c84'></span>Yardi lower: 644 - 858</div>
<div><span style='background-color: #fd8d3c'></span>Yardi lower: 431 - 644</div>
<div><span style='background-color: #c6dbef'></span>Yardi lower: 50 - 431</div>
<div><span style='background-color: #fcc5c0'></span>Yardi equals Plan (+ or - 50)</div>
<div><span style='background-color: #41ab5d'></span>Yardi higher by > 50 </div>
</div>
<div id='menu'>
<fieldset>
<legend>Laughlin Homes by Variance Type:</legend>
<input id='Bedroom' type='radio' name='rtoggle' value='Bed_Varian' checked='checked'>
<label for='Bedroom'>bedrooms</label>
<input id='Bathroom' type='radio' name='rtoggle' value='Bath_Varia' >
<label for='Bathroom'>bathrooms</label>
<input id='Sq_Feet' type='radio' name='rtoggle' value='Sq_Ft_Vari' >
<label for='Sq_Feet'>square feet</label>
</fieldset>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGtheW5lMjMiLCJhIjoiN2ZuVll5MCJ9.INSHe8gm7HMfO8HZPUuAhg';
var map = new mapboxgl.Map({
container: 'map',
// use any style; this is a predefined mapbox style
style: 'mapbox://styles/mapbox/satellite-streets-v10',
center: [-100.790, 29.352],
zoom: 14.9
});
// add navigational control
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
// define variables
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
var bedLegendEl = document.getElementById('Bed-legend');
var bathLegendEl = document.getElementById('Bath-legend');
var sqftLegendEl = document.getElementById('Sqft-legend');
// define functions
document.getElementById('menu').addEventListener('click', function switchLayer(layer) {
var layerId = layer.target.id;
console.log(layerId)
// var visibility = map.getLayoutProperty(layerId, 'visibility');
map.setLayoutProperty(layerId, 'visibility', 'visible');
// set the legend
// If id = Bed
if (layerId === 'Bedroom') {
bedLegendEl.style.display = 'block';
bathLegendEl.style.display = 'none';
sqftLegendEl.style.display = 'none';
map.setLayoutProperty('Bedroom', 'visibility', 'visible');
map.setLayoutProperty('Bathroom', 'visibility', 'none');
map.setLayoutProperty('Sq_Feet', 'visibility', 'none');
}
// If id = Bath
if (layerId === 'Bathroom') {
bedLegendEl.style.display = 'none';
bathLegendEl.style.display = 'block';
sqftLegendEl.style.display = 'none';
map.setLayoutProperty('Bedroom', 'visibility', 'none');
map.setLayoutProperty('Sq_Feet', 'visibility', 'none');
}
// Else id = Sq_Ft
else {
bedLegendEl.style.display = 'none';
bathLegendEl.style.display = 'none';
sqftLegendEl.style.display = 'block';
map.setLayoutProperty('Bedroom', 'visibility', 'none');
map.setLayoutProperty('Bathroom', 'visibility', 'none');
}
});
map.on('load', function () {
// source is a TMK tileset; same source for all layers
map.addSource('laughlincombined4326', {
type: 'vector',
url: 'mapbox://tkayne23.7gg2xn4y'
});
// add variance by bedrooms to paint units
// can be controlled by either the filter or visibility option
map.addLayer({
'id': 'Bedroom',
'type': 'fill',
'source': 'laughlincombined4326',
'layout': {'visibility': 'visible'},
'source-layer': 'LaughlinForMapbox4326-8kt1ts',
'paint': {
'fill-color': {
'property': 'Bed_Varian',
'type': 'interval',
'stops': [
[-5, '#4575b4'],
[0, '#54278f'],
[1, '#fcc5c0'],
[2, '#f768a1'],
[3, '#7a0177']
]
},
'fill-outline-color': '#000000',
'fill-opacity': 0.9
}
});
/* add variance by bathrooms to paint units
can be controlled by either the filter or visibility option */
map.addLayer({
'id': 'Bathroom',
'type': 'fill',
'source': 'laughlincombined4326',
'layout': {'visibility': 'none'},
'source-layer': 'LaughlinForMapbox4326-8kt1ts',
'paint': {
'fill-color': {
'property': 'Bath_Varia',
'type': 'interval',
'stops': [
[-5, '#4575b4'],
[0, '#54278f'],
[.5, '#fcc5c0'],
[1, '#f768a1'],
[2, '#7a0177']
]
},
'fill-outline-color': '#000000',
'fill-opacity': 0.9
}
});
// add variance by square feet to paint units
// can be controlled by either the filter or visibility option
map.addLayer({
'id': 'Sq_Feet',
'type': 'fill',
'source': 'laughlincombined4326',
'layout': {'visibility': 'none'},
'source-layer': 'LaughlinForMapbox4326-8kt1ts',
'paint': {
'fill-color': {
'property': 'Sq_Ft_Vari',
'type': 'interval',
'stops': [
[-858, '#0c2c84'],
[-654, '#fd8d3c'],
[-431, '#c6dbef'],
[-50, '#fcc5c0'],
[50, '#41ab5d']
]
},
'fill-outline-color': '#000000',
'fill-opacity': 0.9
}
});
// always create the hover effect
map.addLayer({
'id': 'homes-fill-hover',
'type': 'fill',
'source': 'laughlincombined4326',
'source-layer': 'LaughlinForMapbox4326-8kt1ts',
'layout': {'visibility': 'visible'},
'paint': {
'fill-color': '#db1e11',
'fill-outline-color': '#000000',
'fill-opacity': 1
},
'filter': ['==', 'addr_house', '']
});
// layer to only show that unit, thus making a hover effect.
// it should adjust to the active layer or keep at homes-fill-hover
// it needs to match the current layer
// features is key
map.on('mousemove', function(e) {
map.getCanvas().style.cursor = 'pointer';
var features = map.queryRenderedFeatures(e.point, { layers: ['Bedroom'] });
if (features.length) {
map.setFilter('homes-fill-hover', ['==', 'addr_house', features[0].properties.addr_house]);
} else {
map.setFilter('homes-fill-hover', ['==', 'addr_house', '']);
}
});
// Reset the state-fills-hover layer's filter when the mouse leaves the map
map.on('mouseout', function() {
map.setFilter('homes-fill-hover', ['==', 'addr_house', '']);
});
// When a click event occurs near a polygon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['Bedroom'] });
if (!features.length) {
return;
}
var feature = features[0];
// give popup info to display
var popup = new mapboxgl.Popup()
.setLngLat(map.unproject(e.point))
.setHTML('<div id="popup" class="popup" style="z-index: 10;"> <h4> Unit Details: </h4>' +
'<ul class="list-group">' +
'<li class="list-group-item"> Unit #: ' + feature.properties['Address'] + " </li>" +
'<li class="list-group-item"> from ' + feature.properties['Yardi_info'] + " </li>" + '<li class="list-group-item"> from ' + feature.properties['Reno_Plan'] + " </li>" +
'<li class="list-group-item"> Renovation Unit Type: ' + feature.properties['Reno_Unit_'] + " </li>" + '</ul> </div>')
.addTo(map);
});
});
</script>
</body>
</html>
//添加地图框链接并设置地图样式
劳克林住房变化
/*CSS的正确注释*/
身体{
保证金：0；
填充：0；
}
/*样式映射-css唯一id*/
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
/*样式菜单-css唯一id*/
#菜单{
位置：绝对位置；
左：480px；
顶部：10px；
背景：#fff；
字体大小：14px；
字体大小：粗体；
边界半径：4px；
文本对齐：居中；
填充：10px；
字体系列：“开放式Sans”，无衬线；
}
/*样式弹出窗口-一个css.class*/
.mapboxgl弹出窗口{
最大宽度：400px；
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
}
/*样式图例-css类*/
.传奇{
背景色：#fff；
边界半径：3px；
底部：30px；
盒影：0 3px4pRGBA（0,0,0,0.50）；
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
填充：12px；
位置：绝对位置；
右：10px；
底部：50px；
z指数：1；
}
/*样式图例-css类*/
.图例h4{
利润率：0.05倍；
右边距：5px；
}
/*样式图例-css类*/
.图例分区跨度{
边界半径：50%；
显示：内联块；
高度：10px；
右边距：5px；
宽度：10px；
}
卧室颜色差异
亚迪低层
亚迪等于计划
亚尔迪更高1个床位
Yardi高出2个床位
Yardi上升了3+个床位
浴室颜色差异
亚迪河下游浴场
亚迪等于计划
雅迪河水位上升0.5个百分点
Yardi比bath高1%
Yardi高出2+个浴池
按平方英尺差异划分的颜色
亚迪河下游：644-858
亚迪河下游：431-644
亚迪河下游：50-431
雅迪等于计划（+或-50）
雅迪比去年同期高出50%以上
劳克林之家（按差异类型）：
卧室
浴室
平方英尺
mapboxgl.accessToken='pk.eyJ1IjoidGtheW5lMjMiLCJhIjoiN2ZuVll5MCJ9.INSHe8gm7HMfO8HZPUuAhg'；
var map=new mapboxgl.map({
容器：“映射”，
//使用任何样式；这是预定义的地图框样式
风格：'mapbox://styles/mapbox/satellite-streets-v10',
中间：[-100.790,29.352]，
缩放：14.9
});
//添加导航控制
var nav=new mapboxgl.NavigationControl（）；
地图添加控制（导航，“右上方”）；
//定义变量
var layerList=document.getElementById（'menu'）；
var inputs=layerList.getElementsByTagName（'input'）；
var bedLegendEl=document.getElementById（'Bed-legend'）；
var bathLegendEl=document.getElementById（'Bath-legend'）；
var sqftLegendEl=document.getElementById（'Sqft-legend'）；
//定义函数
document.getElementById（'menu'）。addEventListener（'click'，函数切换层（层）{
var layerId=layer.target.id；
console.log（layerId）
//var visibility=map.getLayoutProperty（layerId，'visibility'）；
setLayoutProperty（layerId，'visibility'，'visible'）；
//设置图例
//如果id=床
如果（layerId==‘卧室’）{
bedLegendEl.style.display='block'；
bathLegendEl.style.display='none'；
sqftLegendEl.style.display='none'；
map.setLayoutProperty（“卧室”、“可见性”、“可见”）；
map.setLayoutProperty（“浴室”、“可见性”、“无”）；
map.setLayoutProperty（“平方英尺”、“可见性”、“无”）；
}
//如果id=Bath
如果（layerId==‘浴室’）{
bedLegendEl.style.display='none'；
bathLegendEl.style.display='block'；
sqftLegendEl.style.display='none'；
map.setLayoutProperty（“卧室”、“可见性”、“无”）；
map.setLayoutProperty（“平方英尺”、“可见性”、“无”）；
}
//Else id=平方英尺
否则{
bedLegendEl.style.display='none'；
bathLegendEl.style.display='none'；
sqftLegendEl.style.display='block'；
map.setLayoutProperty（“卧室”、“可见性”、“无”）；
map.setLayoutProperty（“浴室”、“可见性”、“无”）；
}
});
map.on（'load'，function（）{
//源是TMK tileset；所有层的源都相同
map.addSource（'laughlincombined4326'{
键入：“向量”，
网址：'mapbox://tkayne23.7gg2xn4y'
});
//按卧室添加差异以绘制单元
//可由“过滤器”或“可见性”选项控制
map.addLayer({
“id”：“卧室”，
“类型”：“填充”，
'来源'：'laughlincombined4326'，
“布局”：{“可见性”：“可见”}，
“源层”：“laughlinformabox4326-8kt1ts”，
“油漆”：{
“填充颜色”：{
“财产”：“Bed_Varian”，
'type'：'interval'，
“停止”：[
[-5，#4575b4']，
[0，#54278f']，
[1，#fcc5c0']，
[2'#f768a1']，
[3'#7a0177']
]
},
“填充轮廓颜色”：“000000”，
“填充不透明度”：0.9
}
});
/*按浴室添加差异以绘制单位
可由“过滤器”或“可见性”选项控制*/
map.addLayer({
“id”：“浴室”，
“类型”：“填充”，
'来源'：'laughlincombined4326'，
'layout'：{'visibility'：'none'}，
“源层”：“laughlinformabox4326-8kt1ts”，
“油漆”：{
“填充颜色”：{
“财产”：“Bath_Varia”，
'type'：'interval'，
“停止”：[
[-5，#4575b4']，
[0，#54278f']，
[5'#fcc5c0'