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種元素各有不同的表現。

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) +
			']'
		);
	});
});