Crtanje na mapi
Iscrtavanje geometrijskih elemenata na mapi (tačka, linija, poligon).
HTML Kopiraj
<!DOCTYPE html>
<html>
<head>
<title>Crtanje na mapi</title>
<script src="https://maps-api.planplus.rs/script/maplibre/maplibre-gl/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
<link href="https://maps-api.planplus.rs/style/maplibre/maplibre-gl.css" rel="stylesheet" />
<script src="https://maps-api.planplus.rs/script/maplibre/maplibre-gl/maplibre-gl-draw.js"></script>
<link href="https://maps-api.planplus.rs/style/maplibre/maplibre-gl-draw.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px;"></div>
<script>
// vaša licenca
var lid = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
// instanciranje mape
var map = new maplibregl.Map({
container: 'map',
style: 'https://vt.planplus.rs/mapstyle/PPMapaStyle.json?lid=' + lid,
center: [20.424476, 44.813864 ],
zoom: 11
});
// instanciranje dodatka za crtanje
var draw = new MaplibreDraw({
// izaberi koje kontrole za crtanje želiš da se prikažu na mapi.
controls: {
line_string: true,
polygon: true,
point: true,
trash: true,
combine_features: false,
uncombine_features: false
}
});
// dodavanje kontrole za crtanje na mapu.
map.addControl(draw);
// događaji (events)
map.on('draw.create', previewData);
map.on('draw.delete', previewData);
map.on('draw.update', previewData);
// dodaj svoju logiku ovde
function previewData() {
console.log(draw.getAll());
};
</script>
</body>
</html>
JSON Kopiraj
{
"type": "FeatureCollection",
"features": []
}
Za detaljno upoznavanje sa mogućnostima dodatka za crtanje posetite stranu MapboxGL Draw