mirror of
https://github.com/sakitam-fdd/maptalks.plot.git
synced 2025-12-08 20:35:49 +00:00
73 lines
2.0 KiB
HTML
73 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Geometry - Rectangle, Circle, Ellipse and Sector</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.36.2/dist/maptalks.css">
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.min.js"></script>
|
|
<body>
|
|
|
|
<div id="map" class="container"></div>
|
|
|
|
<script>
|
|
var map = new maptalks.Map('map', {
|
|
center: [-0.113049,51.498568],
|
|
zoom: 14,
|
|
attribution: {
|
|
content: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
|
|
},
|
|
baseLayer: new maptalks.TileLayer('base', {
|
|
urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
|
|
subdomains: ['a','b','c','d']
|
|
})
|
|
});
|
|
|
|
var center = map.getCenter();
|
|
|
|
var rectangle = new maptalks.Rectangle(center.add(-0.018,0.012), 800, 700, {
|
|
symbol: {
|
|
lineColor: '#34495e',
|
|
lineWidth: 2,
|
|
polygonFill: '#34495e',
|
|
polygonOpacity: 0.4
|
|
}
|
|
});
|
|
console.log(center.add(-0.013,-0.001))
|
|
var circle = new maptalks.Circle(center.add(0.002,0.008), 500,{
|
|
symbol: {
|
|
lineColor: '#34495e',
|
|
lineWidth: 2,
|
|
polygonFill: '#1bbc9b',
|
|
polygonOpacity: 0.4
|
|
}
|
|
});
|
|
var sector = new maptalks.Sector(center.add(-0.013,-0.001), 900, 240, 300, {
|
|
symbol: {
|
|
lineColor: '#34495e',
|
|
lineWidth: 2,
|
|
polygonFill: 'rgb(135,196,240)',
|
|
polygonOpacity: 0.4
|
|
}
|
|
});
|
|
|
|
var ellipse = new maptalks.Ellipse(center.add(0.003,-0.005), 1000, 600, {
|
|
symbol: {
|
|
lineColor: '#34495e',
|
|
lineWidth: 2,
|
|
polygonFill: 'rgb(216,115,149)',
|
|
polygonOpacity: 0.4
|
|
}
|
|
});
|
|
|
|
new maptalks.VectorLayer('vector')
|
|
.addGeometry([rectangle, circle, sector, ellipse])
|
|
.addTo(map);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|