mirror of
https://github.com/JudeHu/maptalks.TextPath.git
synced 2025-12-08 21:26:07 +00:00
53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>图形样式 - 文本路径</title>
|
|
<style type="text/css">
|
|
html,body{margin:0px;height:100%;width:100%}
|
|
.container{width:100%;height:100%}
|
|
</style>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.37.0/dist/maptalks.min.css">
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@0.37.0/dist/maptalks.js"></script>
|
|
<script type="text/javascript" src="https://rawgit.com/JudeHu/maptalks.TextPath/master/dist/maptalks.textPath.js"></script>
|
|
|
|
<body>
|
|
|
|
<div id="map" class="container"></div>
|
|
<script>
|
|
|
|
var map = new maptalks.Map('map', {
|
|
center: [-0.113049,51.49856],
|
|
zoom: 10,
|
|
attribution: {
|
|
content: '© Google Maps'
|
|
},
|
|
baseLayer: new maptalks.TileLayer('base', {
|
|
urlTemplate: 'https://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2sen-US!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965',
|
|
subdomains: ['a','b','c','d']
|
|
})
|
|
});
|
|
|
|
var layer = new maptalks.VectorLayer('vector').addTo(map);
|
|
|
|
var textpath = new maptalks.TextPath(
|
|
[
|
|
map.getCenter().add(-0.1, -0.2),
|
|
map.getCenter().add(0.1, 0.1),
|
|
map.getCenter().add(-0.1, 0.1)
|
|
],
|
|
{
|
|
textName: "test123456test123456test123456test123456test123456",
|
|
fontSize: '10000m', // meter(m) use geoDistance, pixel(px) use pixelDistance
|
|
fontFamily: "Arial",
|
|
textStrokeMin: 5, // no text drawed if text-pixel-Size < textStrokeMin, default 5
|
|
symbol:{
|
|
'lineColor' : 'red',
|
|
'lineOpacity': 0.9
|
|
}
|
|
}
|
|
).addTo(layer);
|
|
</script>
|
|
</body>
|
|
</html>
|