mirror of
https://github.com/sakitam-fdd/maptalks.plot.git
synced 2025-12-08 20:35:49 +00:00
76 lines
1.8 KiB
HTML
76 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>maptalks-plot</title>
|
|
<link rel="stylesheet" href="../node_modules/maptalks/dist/maptalks.css">
|
|
<style type="text/css">
|
|
html, body {
|
|
margin: 0px;
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="map" class="container"></div>
|
|
<script src="../node_modules/maptalks/dist/maptalks.js"></script>
|
|
<script src="../dist/maptalks.plot.js"></script>
|
|
<script type="text/javascript">
|
|
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 layer = new maptalks.VectorLayer('vector').addTo(map);
|
|
|
|
var drawTool = new MaptalksPlot.PlotDraw({
|
|
mode: 'Curve'
|
|
}).addTo(map).disable();
|
|
drawTool.on('drawend', function (param) {
|
|
console.log(param.geometry);
|
|
layer.addGeometry(param.geometry);
|
|
});
|
|
var items = ['Polyline', 'Curve', 'Arc', 'FreeLine'].map(function (value) {
|
|
return {
|
|
item: value,
|
|
click: function () {
|
|
drawTool.setMode(value).enable();
|
|
}
|
|
};
|
|
});
|
|
new maptalks.control.Toolbar({
|
|
items: [
|
|
{
|
|
item: 'Shape',
|
|
children: items
|
|
},
|
|
{
|
|
item: 'Disable',
|
|
click: function () {
|
|
drawTool.disable();
|
|
}
|
|
},
|
|
{
|
|
item: 'Clear',
|
|
click: function () {
|
|
layer.clear();
|
|
}
|
|
}
|
|
]
|
|
}).addTo(map);
|
|
</script>
|
|
</body>
|
|
</html>
|