mapbox-gl 展示撒点图层

基本流程：

1.map load的时候添加vocter图层；

2.设置layer，并添加，默认隐藏；

3.menu动态添加一个图层，添加点击事件，回调函数设置图层的显示和隐藏；

4.var 一个popup，设置其基本属性；

5.设置mouseenter, mouseleave 回调函数；

6.添加图例。通过js控制和修改CSS。

1.html部分


<body>
<div id="map"></div>
<nav id ='menu'></nav>
<pre id="info"></pre>
<div class="map-overlay">
    <div class="map-overlay-inner">
		<label>图例</label>
        <ul id="legend-lists">
        </ul>
    </div>
</div>
</body>

2.css部分

.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 150px;
    bottom: 30px;
    right: 30px;
    padding: 10px;
    display: none;
    opacity: 1;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 1px;
}

#legend-lists li {
  list-style-type: none;
  list-style-position: outside;
}

#legend-lists li:before {
  display: inline-block;
  content: '●';
  padding-right:10px;
  font-size: 20px;
}

.map-overlay-inner label {
    display: block;
    font-weight: bold;
    padding-left: 60px;
    padding-top: 10px;
    font-size: 15px;
}

3.js部分


// colors to use for the categories
var colors = ['#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c']; 

var link_spjks_sd = document.createElement('a');
link_spjks_sd.href = '#';
link_spjks_sd.className = '';
link_spjks_sd.textContent = '--撒点';

//图例
var map_overlay = document.querySelector('.map-overlay');
var legend_lists = document.getElementById('legend-lists');


link_spjks_sd.onclick = function(e) {
	e.preventDefault();
	e.stopPropagation();

	var layerID = map.getLayer('spjks-2');

	if (layerID === undefined ){
		map.addSource('spjks-2', {
	        type: 'vector',
	        tiles: ['']
	    });
	    map.addLayer({
	        'id': 'spjks-2',
	        'type': 'circle',
	        'source': 'spjks-2',
	        'source-layer': 'spjks',
	        'paint': {
	            // make circles larger as the user zooms from z12 to z22
	            'circle-radius': {
	                'base': 1.75,
	                'stops': [
	                    [12, 4],
	                    [22, 180]
	                ]
	            },
	            // color circles by ethnicity, using a match expression
	            // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
	            'circle-color': colors[3]
	        }
	    });
	    this.className = 'active';

	    //图例显示
	    if (!document.getElementById('spjks_tl')){
	    	var li_spjks_sd = document.createElement('li');
		    li_spjks_sd.id = 'spjks_tl';
		    li_spjks_sd.textContent = '室';
		    li_spjks_sd.style.color = colors[3];
		    legend_lists.appendChild(li_spjks_sd);
		    map_overlay.style.display = 'block';
	    };
	    

	    var popup = new mapboxgl.Popup({maxWidth:'500px',closeButton: false,closeOnClick: false});
	 
		map.on('mouseenter', 'spjks-2', function(e) {
			var coordinates = e.features[0].geometry.coordinates.slice();
			var sl = e.features[0].properties.sl;
			var name = e.features[0].properties.name;
			var addr = e.features[0].properties.addr;
	        map.getCanvas().style.cursor = 'pointer';
			 
			// Ensure that if the map is zoomed out such that
			// multiple copies of the feature are visible, the
			// popup appears over the copy being pointed to.
			while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
				coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
			}

			var description = '<h3>'+'<strong>'+'详情'+'</strong>'+'</h3>'
			+'<strong>'+'名称：'+'</strong>'+ name +'<br/>'		
			+'<strong>'+'数量：'+'</strong>'+ sl + '<br/>'
			+'<strong>'+'地址：'+'</strong>'+ addr ; 
			 
			popup.setLngLat(coordinates)
			.setHTML(description)
			.addTo(map);
		});	 
	 
		map.on('mouseleave', 'spjks-2', function() {
			map.getCanvas().style.cursor = '';
			popup.remove();
		});
	} else {
		map.removeLayer('spjks-2');
		map.removeSource('spjks-2');
		this.className = '';
		legend_lists.removeChild(spjks_tl);
		map_overlay.style.display = 'none';
	}

};
layers.appendChild(link_spjks_sd);

mapbox-gl 展示 撒点 图层

猜你喜欢

mapbox-gl 展示撒点图层