mapbox-gl js Customize camera animations例子 （CSS、DOM、JS 传值和交互）

在地图上显示一个控制面板，可以输入各种参数，JS或者参数值，点击按钮，实现地图的交互。

html的dom 如下：

<div class="map-overlay  top">
		<div class="map-overlay-inner">
			<fieldset>
				<label>Select easing function</label>
				<select id="easing" name="easing">
					<option value="easeInCubic">Ease In Cubic</option>
					<option value="easeOutQuint">Ease Out Quint</option>
					<option value="easeInOutCirc">Ease In/Out Circ</option>
					<option value="easeOutBounce">Ease Out Bounce</option>
				</select>
			</fieldset>
			<fieldset>
				<label for="duration">Set animation duration</label>
				<p id="durationValue"></p>
				<input
					type="range"
					id="duration"
					name="duration"
					min="0"
					max="10000"
					step="500"
					value="1000"
				/>
			</fieldset>
			<fieldset>
				<label>Animate camera motion</label>
				<label for="animate" id="animateLabel">Yes</label>
				<input type="checkbox" id="animate" name="animate" checked />
			</fieldset>
			<fieldset class="offset">
				<label for="offset-x">Offset-X</label>
				<input
					type="number"
					id="offset-x"
					name="offset-x"
					min="-200"
					max="200"
					step="50"
					value="0"
				/>
			</fieldset>
			<fieldset class="offset">
				<label for="offset-y">Offset-Y</label>
				<input
				type="number"
				id="offset-y"
				name="offset-y"
				min="-200"
				max="200"
				step="50"
				value="0"
				/>
				<p>Offsets can be negative</p>
			</fieldset>
			<button type="button" id="animateButton" name="test-animation">
				Test Animation
			</button>
		</div>
	</div>

主要结构是

map-overlay

       map-overlay-inner

                 fieldset

                 button

CSS的设置：

.map-overlay {
      font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
      position: absolute;     //绝对定位
      width: 200px;           //宽度，没有定义高度，那么高度可以自动适应内容
      bottom: 0;
      right: 0;
      padding: 30px;     //元素内边距，用padding的话，map-overlay的内容会内进30px;
                         //margin是元素的外边距，map-overlay与外面元素距离30px;
    }
       
    .map-overlay .map-overlay-inner {  //内部元素，一个框
      background-color: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      padding: 10px;             //内边距
      margin-bottom: 10px;       //距离底部的外边距，即距离map-overlay的底部距离
    }
       
    .map-overlay-inner fieldset {
      border: none;         //边框
      padding: 0;
      margin: 0 0 10px;    // 上、右、下、左
    }
       
    .map-overlay-inner fieldset:last-child {    //最后一个子元素
      margin: 0;
    }
       
    .map-overlay-inner select {
      width: 100%;
    }
       
    .map-overlay-inner p {
      margin: 0;
    }
       
    .map-overlay-inner label {
      display: block;           //此元素将显示为块级元素，此元素前后会带有换行符。
      font-weight: bold;
    }
       
    .map-overlay-inner button {
      background-color: cornflowerblue;
      color: white;
      border-radius: 5px;
      display: inline-block;      // 行内块元素。
      height: 20px;
      border: none;
      cursor: pointer;
    }
       
    .map-overlay-inner button:focus {
      outline: none;
    }
       
    .map-overlay-inner button:hover {
      background-color: blue;
      box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
      -webkit-transition: background-color 500ms linear;
      -ms-transition: background-color 500ms linear;
      transition: background-color 500ms linear;
    }
       
    .offset > label,
    .offset > input {
      display: inline;   //行内块元素。
    }
       
    #animateLabel {
      display: inline-block;    //行内块元素。
      min-width: 20px;
    }

盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content,padding,margin，边框border则不可以用%单位

元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。

扫描二维码关注公众号，回复： 12647302 查看本文章

block水平默认情况下，水平竖直方向上的padding,margin有效。

inline元素水平排列，竖直方向上的padding,margin无效。

inline-block水平元素，水平竖直方向上的padding,margin有效

边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南
关于什么时候用margin什么时候用padding，网上有许许多多的讨论，大多数似乎讨论到点上面，却又有些隔靴搔痒的感觉，总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：

何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
 

inline：使元素变成行内元素（内联），拥有行内元素的特性，即
1. 与其他行内元素共享一行
2. 不能修改width、height属性，大小由内容撑开
3. padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效
 

block： 使元素变成块级元素，拥有块级的特性，即
1. 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
2. 可以修改width、height属性
3. padding、margin四个方向的值设置均有效
 

inline-block： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即
1. 与其他行内元素共享一行
2. 可以修改width、height属性
3. padding、margin四个方向的值设置均有效

js部分：

var easingFunctions = {
	// start slow and gradually increase speed
	easeInCubic: function(t) {
		return t * t * t;
	},
	// start fast with a long, slow wind-down
	easeOutQuint: function(t) {
		return 1 - Math.pow(1 - t, 5);
	},
	// slow start and finish with fast middle
	easeInOutCirc: function(t) {
		return t < 0.5
		? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
		: (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
	},
	// fast start with a "bounce" at the end
	easeOutBounce: function(t) {
		var n1 = 7.5625;
		var d1 = 2.75;
		 
		if (t < 1 / d1) {
			return n1 * t * t;
		} else if (t < 2 / d1) {
			return n1 * (t -= 1.5 / d1) * t + 0.75;
		} else if (t < 2.5 / d1) {
			return n1 * (t -= 2.25 / d1) * t + 0.9375;
		} else {
			return n1 * (t -= 2.625 / d1) * t + 0.984375;
		}
	}
};


// set up some helpful UX on the form
var durationValueSpan = document.getElementById('durationValue');
var durationInput = document.getElementById('duration');
durationValueSpan.innerHTML = durationInput.value / 1000 + ' seconds';
durationInput.addEventListener('change', function(e) {
	durationValueSpan.innerHTML = e.target.value / 1000 + ' seconds';
});
 
var animateLabel = document.getElementById('animateLabel');
var animateValue = document.getElementById('animate');
animateValue.addEventListener('change', function(e) {
	animateLabel.innerHTML = e.target.checked ? 'Yes' : 'No';
});


map.on('load', function() {
	// add a layer to display the map's center point
	map.addSource('center', {
		'type': 'geojson',
		'data': {
		'type': 'Point',
		'coordinates': [113.256, 23.369]
		}
	});
	map.addLayer({
		'id': 'center',
		'type': 'symbol',
		'source': 'center',
		'layout': {
		'icon-image': 'marker-15',
		'text-field': 'Center: [-94, 40]',
		'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
		'text-offset': [0, 0.6],
		'text-anchor': 'top'
		}
	});
	 
	var animateButton = document.getElementById('animateButton');
	animateButton.addEventListener('click', function() {
		var easingInput = document.getElementById('easing');
		var easingFn =
			easingFunctions[
			easingInput.options[easingInput.selectedIndex].value
			];
		var duration = parseInt(durationInput.value, 10);
		var animate = animateValue.checked;
		var offsetX = parseInt(
			document.getElementById('offset-x').value, 10
		);
		var offsetY = parseInt(
			document.getElementById('offset-y').value, 10
		);
		 
		var animationOptions = {
			duration: duration,
			easing: easingFn,
			offset: [offsetX, offsetY],
			animate: animate,
			essential: true // animation will happen even if user has `prefers-reduced-motion` setting on
		};
		 
		// Create a random location to fly to by offsetting the map's
		// initial center point by up to 10 degrees.
		var center = [
			113.258 + (Math.random() - 0.5) * 20,
			23.369 + (Math.random() - 0.5) * 20
		];
		 
		// merge animationOptions with other flyTo options
		animationOptions.center = center;
		 
		map.flyTo(animationOptions);
		// update 'center' source and layer to show our new map center
		// compare this center point to where the camera ends up when an offset is applied
		map.getSource('center').setData({
			'type': 'Point',
			'coordinates': center
		});
		map.setLayoutProperty(
			'center',
			'text-field',
			'Center: [' +
			center[0].toFixed(1) +     //toFixed(num)  js 四舍五入的方法，num是保留小数点
			', ' +
			center[1].toFixed(1) +
			']'
		);
	});
});