在地圖上顯示一個控制面板,可以輸入各種參數,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) +
']'
);
});
});