code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
var source = new ol.source. Vector (); var drawLayer = new ol.layer. Vector ({ source: source, style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.2)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }), image: new ol.style. Circle ({ radius: 6 , fill: new ol.style. Fill ({ color: '#e63946' }) }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), drawLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.3522 , 48.8566 ]), zoom: 13 }) }); var draw = new ol.interaction. Draw ({ source: source, type: 'Polygon' }); map. addInteraction (draw); draw. on ( 'drawend' , function ( evt ) { var geom = evt.feature. getGeometry (); var area = ol.sphere. getArea (geom); console. log ( 'Area: ' + (area / 1e6 ). toFixed ( 2 ) + ' km²' ); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://unpkg.com/ol@10.10.0/ol.css" /> < script src = "https://unpkg.com/ol@10.10.0/dist/ol.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > var source = new ol.source. Vector (); var drawLayer = new ol.layer. Vector ({ source: source, style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.2)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }), image: new ol.style. Circle ({ radius: 6 , fill: new ol.style. Fill ({ color: '#e63946' }) }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), drawLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.3522 , 48.8566 ]), zoom: 13 }) }); var draw = new ol.interaction. Draw ({ source: source, type: 'Polygon' }); map. addInteraction (draw); draw. on ( 'drawend' , function ( evt ) { var geom = evt.feature. getGeometry (); var area = ol.sphere. getArea (geom); console. log ( 'Area: ' + (area / 1e6 ). toFixed ( 2 ) + ' km²' ); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import Map from 'ol/Map' ; import View from 'ol/View' ; import TileLayer from 'ol/layer/Tile' ; import { fromLonLat } from 'ol/proj' ; import 'ol/ol.css' ; var source = new ol.source. Vector (); var drawLayer = new ol.layer. Vector ({ source: source, style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.2)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }), image: new ol.style. Circle ({ radius: 6 , fill: new ol.style. Fill ({ color: '#e63946' }) }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), drawLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.3522 , 48.8566 ]), zoom: 13 }) }); var draw = new ol.interaction. Draw ({ source: source, type: 'Polygon' }); map. addInteraction (draw); draw. on ( 'drawend' , function ( evt ) { var geom = evt.feature. getGeometry (); var area = ol.sphere. getArea (geom); console. log ( 'Area: ' + (area / 1e6 ). toFixed ( 2 ) + ' km²' ); }); var source = new ol.source.Vector();
var drawLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.2)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 }),
image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: '#e63946' }) })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
drawLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
var draw = new ol.interaction.Draw({ source: source, type: 'Polygon' });
map.addInteraction(draw);
draw.on('drawend', function(evt) {
var geom = evt.feature.getGeometry();
var area = ol.sphere.getArea(geom);
console.log('Area: ' + (area / 1e6).toFixed(2) + ' km²');
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var source = new ol.source.Vector();
var drawLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.2)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 }),
image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: '#e63946' }) })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
drawLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
var draw = new ol.interaction.Draw({ source: source, type: 'Polygon' });
map.addInteraction(draw);
draw.on('drawend', function(evt) {
var geom = evt.feature.getGeometry();
var area = ol.sphere.getArea(geom);
console.log('Area: ' + (area / 1e6).toFixed(2) + ' km²');
});
</script>
</body>
</html> import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
var source = new ol.source.Vector();
var drawLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.2)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 }),
image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: '#e63946' }) })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
drawLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
var draw = new ol.interaction.Draw({ source: source, type: 'Polygon' });
map.addInteraction(draw);
draw.on('drawend', function(evt) {
var geom = evt.feature.getGeometry();
var area = ol.sphere.getArea(geom);
console.log('Area: ' + (area / 1e6).toFixed(2) + ' km²');
});
