maptalks繪制旋轉(zhuǎn)文字標(biāo)注圖形樣式
Daraz購(gòu)趣多跨境電商2024-10-28710
MapTalks 是一個(gè)用于瀏覽器端的JavaScript地圖庫(kù)，它允許開發(fā)者在地圖上進(jìn)行豐富的交互式操作和自定義圖形繪制。要?jiǎng)?chuàng)建并繪制一個(gè)旋轉(zhuǎn)文字標(biāo)注（標(biāo)簽Label）圖形樣式，你可以使用 MapTalks 中的 `Label` 圖形類，并設(shè)置其旋轉(zhuǎn)角度屬性。以下是一個(gè)簡(jiǎn)單的示例：
// 首先確保已經(jīng)正確引入了maptalks庫(kù)并初始化了一個(gè)地圖實(shí)例
var map = new maptalks.Map('map', {
center: [116.397428, 39.908637],
zoom: 10,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c']
})
});
// 創(chuàng)建一個(gè)帶有旋轉(zhuǎn)效果的文字標(biāo)注
var labelStyle = {
textName: '旋轉(zhuǎn)文字標(biāo)注', // 文字內(nèi)容
textSize: 16, // 字體大小
fontFamily: 'Arial', // 字體
textFill: '#ff0000', // 字體顏色
textRotation: -45 // 文字旋轉(zhuǎn)角度，正值逆時(shí)針旋轉(zhuǎn)，負(fù)值順時(shí)針旋轉(zhuǎn)
};
var label = new maptalks.Label([116.4, 39.9], labelStyle)
.addTo(map); // 將標(biāo)注添加到地圖中上述代碼將會(huì)在地圖上創(chuàng)建一個(gè)以給定地理坐標(biāo)為錨點(diǎn)，且文本內(nèi)容為“旋轉(zhuǎn)文字標(biāo)注”的標(biāo)簽，并將其旋轉(zhuǎn)-45度。
請(qǐng)注意，實(shí)際使用時(shí)需要根據(jù)你的地圖容器、地理位置以及具體需求調(diào)整樣式參數(shù)。
<!DOCTYPE html><html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖形樣式 - 旋轉(zhuǎn)文字標(biāo)注</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [-0.113049,51.49856],
zoom: 14,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
var layer = new maptalks.VectorLayer('vector').addTo(map);
var text = new maptalks.Marker(
[-0.113049, 51.49856],
{
'properties' : {
'name' : 'Hello\nMapTalks'
},
'symbol' : {
'textFaceName' : 'sans-serif',
'textName' : '{name}',
'textSize' : 40,
'textFill' : '#34495e',
'textHaloFill' : '#fff',
'textHaloRadius' : 5,
'textRotation' : 60 //text rotation in degree, clock-wise
}
}
).addTo(layer);
</script>
</body></html>評(píng)論可見，查看隱藏內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Daraz購(gòu)趣多
