You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
650 lines
38 KiB
HTML
650 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<script>
|
|
var gaProperty = 'UA-2577926-1';
|
|
// Disable tracking if the opt-out cookie exists.
|
|
var disableStr = 'ga-disable-' + gaProperty;
|
|
if (document.cookie.indexOf(disableStr + '=true') > -1) {
|
|
window[disableStr] = true;
|
|
}
|
|
function gaOptout() {
|
|
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
|
window[disableStr] = true;
|
|
}
|
|
function gaOptoutRevoke() {
|
|
document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
|
window[disableStr] = false;
|
|
}
|
|
</script>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
|
|
</script>
|
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
|
|
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
|
|
<script>
|
|
window.addEventListener("load", function() {
|
|
window.cookieconsent.initialise({
|
|
'palette': {
|
|
'popup': {
|
|
'background': '#eaf7f7',
|
|
'text': '#5c7291'
|
|
},
|
|
'button': {
|
|
'background': '#56cbdb',
|
|
'text': '#ffffff'
|
|
}
|
|
},
|
|
'theme': 'edgeless',
|
|
'type': 'opt-out',
|
|
'onInitialise': function (status) {
|
|
if (!this.hasConsented()) {
|
|
gaOptout()
|
|
}
|
|
},
|
|
'onStatusChange': function(status, chosenBefore) {
|
|
if (!this.hasConsented()) {
|
|
gaOptout()
|
|
}
|
|
},
|
|
'onRevokeChoice': function() {
|
|
gaOptoutRevoke()
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
|
|
<link rel="stylesheet" href="./css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
|
|
|
|
|
|
<title>Draw and Modify Geodesic Circles</title>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
|
|
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt=""> OpenLayers</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- menu items that get hidden below 768px width -->
|
|
<nav class="collapse navbar-collapse" id="olmenu">
|
|
<ul class="nav navbar-nav ml-auto">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
|
<a class="dropdown-item" href="../doc/">Docs</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
|
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
|
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="container-fluid line-numbers">
|
|
|
|
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
|
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
This example uses OpenLayers v<span>6.12.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
|
</div>
|
|
|
|
|
|
<div class="row-fluid">
|
|
<a href="#" id="codepen-button" class="btn btn-link float-right">
|
|
<i class="fa fa-codepen fa-lg"></i> Edit
|
|
</a>
|
|
<div class="span12">
|
|
<h4 id="title">Draw and Modify Geodesic Circles</h4>
|
|
<p class="tags">
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=draw" class="badge badge-info">draw</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="draw"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./draw-and-modify-features.html">Draw and Modify Features</a>
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-features.html">Draw Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-shapes.html">Draw Shapes</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-freehand.html">Freehand Drawing</a>
|
|
<a class="list-group-item list-group-item-action" href="./line-arrows.html">LineString Arrows</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure.html">Measure</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure-style.html">Measure using vector styles</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-scale-and-rotate.html">Scale and Rotate using Modify Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./snap.html">Snap Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./topolis.html">topolis integration</a>
|
|
<a class="list-group-item list-group-item-action" href="./tracing.html">Tracing around a polygon</a>"
|
|
tabindex="0"
|
|
>12</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=edit" class="badge badge-info">edit</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="edit"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./draw-and-modify-features.html">Draw and Modify Features</a>
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-features.html">Draw Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-shapes.html">Draw Shapes</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-esri-edit.html">Editable ArcGIS REST Feature Service</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-freehand.html">Freehand Drawing</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure.html">Measure</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure-style.html">Measure using vector styles</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-features.html">Modify Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-test.html">Modify Features Test</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-scale-and-rotate.html">Scale and Rotate using Modify Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./snap.html">Snap Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./topolis.html">topolis integration</a>"
|
|
tabindex="0"
|
|
>13</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=modify" class="badge badge-info">modify</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="modify"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./draw-and-modify-features.html">Draw and Modify Features</a>
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-icon.html">Icon modification</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure-style.html">Measure using vector styles</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-features.html">Modify Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-test.html">Modify Features Test</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-scale-and-rotate.html">Scale and Rotate using Modify Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./snap.html">Snap Interaction</a>"
|
|
tabindex="0"
|
|
>8</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=vector" class="badge badge-info">vector</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="vector"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./mapbox-vector-tiles-advanced.html">Advanced Mapbox Vector Tiles</a>
|
|
<a class="list-group-item list-group-item-action" href="./animated-gif.html">Animated GIF</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-esri.html">ArcGIS REST Feature Service</a>
|
|
<a class="list-group-item list-group-item-action" href="./cluster.html">Clustered Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./feature-animation.html">Custom Animation</a>
|
|
<a class="list-group-item list-group-item-action" href="./custom-circle-render.html">Custom Circle Render</a>
|
|
<a class="list-group-item list-group-item-action" href="./custom-hit-detection-renderer.html">Custom Hit Detection Render</a>
|
|
<a class="list-group-item list-group-item-action" href="./custom-interactions.html">Custom Interactions</a>
|
|
<a class="list-group-item list-group-item-action" href="./polygon-styles.html">Custom Polygon Styles</a>
|
|
<a class="list-group-item list-group-item-action" href="./drag-and-drop-image-vector.html">Drag-and-Drop Image Vector</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-and-modify-features.html">Draw and Modify Features</a>
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-features.html">Draw Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-shapes.html">Draw Shapes</a>
|
|
<a class="list-group-item list-group-item-action" href="./clusters-dynamic.html">Dynamic clusters</a>
|
|
<a class="list-group-item list-group-item-action" href="./earthquake-clusters.html">Earthquake Clusters</a>
|
|
<a class="list-group-item list-group-item-action" href="./heatmap-earthquakes.html">Earthquakes Heatmap</a>
|
|
<a class="list-group-item list-group-item-action" href="./kml-earthquakes.html">Earthquakes in KML</a>
|
|
<a class="list-group-item list-group-item-action" href="./earthquake-custom-symbol.html">Earthquakes with custom symbols</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-esri-edit.html">Editable ArcGIS REST Feature Service</a>
|
|
<a class="list-group-item list-group-item-action" href="./flight-animation.html">Flight Animation</a>
|
|
<a class="list-group-item list-group-item-action" href="./fractal.html">Fractal Rendering</a>
|
|
<a class="list-group-item list-group-item-action" href="./draw-freehand.html">Freehand Drawing</a>
|
|
<a class="list-group-item list-group-item-action" href="./geojson.html">GeoJSON</a>
|
|
<a class="list-group-item list-group-item-action" href="./geojson-vt.html">geojson-vt integration</a>
|
|
<a class="list-group-item list-group-item-action" href="./icon-color.html">Icon Colors</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-icon.html">Icon modification</a>
|
|
<a class="list-group-item list-group-item-action" href="./icon-negative.html">Icon Pixel Operations</a>
|
|
<a class="list-group-item list-group-item-action" href="./icon-scale.html">Icon Scale</a>
|
|
<a class="list-group-item list-group-item-action" href="./icon.html">Icon Symbolizer</a>
|
|
<a class="list-group-item list-group-item-action" href="./jsts.html">JSTS Integration</a>
|
|
<a class="list-group-item list-group-item-action" href="./line-arrows.html">LineString Arrows</a>
|
|
<a class="list-group-item list-group-item-action" href="./mapbox-vector-layer.html">Mapbox Vector Layer</a>
|
|
<a class="list-group-item list-group-item-action" href="./mapbox-vector-tiles.html">Mapbox Vector Tiles</a>
|
|
<a class="list-group-item list-group-item-action" href="./mapbox-layer.html">Mapbox-gl Layer</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure.html">Measure</a>
|
|
<a class="list-group-item list-group-item-action" href="./measure-style.html">Measure using vector styles</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-features.html">Modify Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-test.html">Modify Features Test</a>
|
|
<a class="list-group-item list-group-item-action" href="./ogc-vector-tiles.html">OGC Vector Tiles</a>
|
|
<a class="list-group-item list-group-item-action" href="./osm-vector-tiles.html">OSM Vector Tiles</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-osm.html">OSM XML</a>
|
|
<a class="list-group-item list-group-item-action" href="./regularshape.html">Regular Shapes</a>
|
|
<a class="list-group-item list-group-item-action" href="./modify-scale-and-rotate.html">Scale and Rotate using Modify Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./select-features.html">Select Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./select-hover-features.html">Select Features by Hover</a>
|
|
<a class="list-group-item list-group-item-action" href="./select-multiple-features.html">Select multiple Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./snap.html">Snap Interaction</a>
|
|
<a class="list-group-item list-group-item-action" href="./street-labels.html">Street Labels</a>
|
|
<a class="list-group-item list-group-item-action" href="./style-renderer.html">Style renderer</a>
|
|
<a class="list-group-item list-group-item-action" href="./synthetic-lines.html">Synthetic Lines</a>
|
|
<a class="list-group-item list-group-item-action" href="./synthetic-points.html">Synthetic Points</a>
|
|
<a class="list-group-item list-group-item-action" href="./kml-timezones.html">Timezones in KML</a>
|
|
<a class="list-group-item list-group-item-action" href="./topojson.html">TopoJSON</a>
|
|
<a class="list-group-item list-group-item-action" href="./topolis.html">topolis integration</a>
|
|
<a class="list-group-item list-group-item-action" href="./tracing.html">Tracing around a polygon</a>
|
|
<a class="list-group-item list-group-item-action" href="./translate-features.html">Translate Features</a>
|
|
<a class="list-group-item list-group-item-action" href="./turf.html">turf.js</a>
|
|
<a class="list-group-item list-group-item-action" href="./layer-clipping-vector.html">Vector Clipping Layer</a>
|
|
<a class="list-group-item list-group-item-action" href="./image-vector-layer.html">Vector Image Layer</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-label-decluttering.html">Vector Label Decluttering</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-labels.html">Vector Labels</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-layer.html">Vector Layer</a>
|
|
<a class="list-group-item list-group-item-action" href="./hitdetect-vector.html">Vector Layer Hit Detection</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-wfs.html">WFS</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-wfs-getfeature.html">WFS - GetFeature</a>
|
|
<a class="list-group-item list-group-item-action" href="./vector-wfs-geographic.html">WFS with geographic coordinates</a>
|
|
<a class="list-group-item list-group-item-action" href="./wind-arrows.html">Wind Arrows</a>"
|
|
tabindex="0"
|
|
>68</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=circle" class="badge badge-info">circle</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="circle"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./custom-circle-render.html">Custom Circle Render</a>
|
|
<a class="list-group-item list-group-item-action" href="./custom-hit-detection-renderer.html">Custom Hit Detection Render</a>
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>
|
|
<a class="list-group-item list-group-item-action" href="./tissot.html">Tissot Indicatrix</a>"
|
|
tabindex="0"
|
|
>4</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=sphere" class="badge badge-info">sphere</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="sphere"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>"
|
|
tabindex="0"
|
|
>1</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=geodesic" class="badge badge-info">geodesic</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="geodesic"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action active" href="./draw-and-modify-geodesic.html">Draw and Modify Geodesic Circles</a>"
|
|
tabindex="0"
|
|
>1</a>
|
|
</span>
|
|
</p>
|
|
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="tag-example-title"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="list-group"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="map" class="map"></div>
|
|
<form class="form-inline">
|
|
<label for="type">Geometry type </label>
|
|
<select id="type">
|
|
<option value="Point">Point</option>
|
|
<option value="LineString">LineString</option>
|
|
<option value="Polygon">Polygon</option>
|
|
<option value="Circle">Circle Geometry</option>
|
|
<option value="Geodesic" selected>Geodesic Circle</option>
|
|
</select>
|
|
</form>
|
|
|
|
</div>
|
|
<form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
|
|
<input id="codesandbox-params" type="hidden" name="parameters">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<p id="shortdesc">Example of using Draw and Modify interactions for geodesic circles.</p>
|
|
<div id="docs"><p>Example of using the <code>ol/interaction/Draw</code> interaction with a custom geometry function together with the <code>ol/interaction/Modify</code> interaction to draw and modify geodesic circles (a <code>ol/geom/Polygon#circular</code> polygon representing a circle on the surface of the Earth's sphere). The polygon is placed in a <code>ol/geom/GeometryCollection</code> together with a <code>ol/geom/Point</code> which allows the Modify interaction to adjust the circle center as well as the radius. Custom style functions ensure the correct final geometry is displayed throughout. <code>ol/geom/Circle</code> projected (planar) geometries can also be drawn and modified. The difference between geodesic and projected circles can be seen when their centers are moved between northern and southern latitudes in the Web Mercator projection. The <code>ol/interaction/Snap</code> interaction can be used to create concentric circles.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<h5 class="source-heading">main.js</h5>
|
|
<pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
|
|
import Map from 'ol/Map';
|
|
import View from 'ol/View';
|
|
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
|
|
import {Draw, Modify, Snap} from 'ol/interaction';
|
|
import {GeometryCollection, Point, Polygon} from 'ol/geom';
|
|
import {OSM, Vector as VectorSource} from 'ol/source';
|
|
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
|
import {circular} from 'ol/geom/Polygon';
|
|
import {getDistance} from 'ol/sphere';
|
|
import {transform} from 'ol/proj';
|
|
|
|
const raster = new TileLayer({
|
|
source: new OSM(),
|
|
});
|
|
|
|
const source = new VectorSource();
|
|
|
|
const style = new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)',
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#33cc33',
|
|
width: 2,
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 7,
|
|
fill: new Fill({
|
|
color: '#ffcc33',
|
|
}),
|
|
}),
|
|
});
|
|
|
|
const geodesicStyle = new Style({
|
|
geometry: function (feature) {
|
|
return feature.get('modifyGeometry') || feature.getGeometry();
|
|
},
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)',
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#ff3333',
|
|
width: 2,
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 7,
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
}),
|
|
}),
|
|
});
|
|
|
|
const vector = new VectorLayer({
|
|
source: source,
|
|
style: function (feature) {
|
|
const geometry = feature.getGeometry();
|
|
return geometry.getType() === 'GeometryCollection' ? geodesicStyle : style;
|
|
},
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [raster, vector],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [-11000000, 6600000],
|
|
zoom: 3,
|
|
}),
|
|
});
|
|
|
|
const defaultStyle = new Modify({source: source})
|
|
.getOverlay()
|
|
.getStyleFunction();
|
|
|
|
const modify = new Modify({
|
|
source: source,
|
|
style: function (feature) {
|
|
feature.get('features').forEach(function (modifyFeature) {
|
|
const modifyGeometry = modifyFeature.get('modifyGeometry');
|
|
if (modifyGeometry) {
|
|
const modifyPoint = feature.getGeometry().getCoordinates();
|
|
const geometries = modifyFeature.getGeometry().getGeometries();
|
|
const polygon = geometries[0].getCoordinates()[0];
|
|
const center = geometries[1].getCoordinates();
|
|
const projection = map.getView().getProjection();
|
|
let first, last, radius;
|
|
if (modifyPoint[0] === center[0] && modifyPoint[1] === center[1]) {
|
|
// center is being modified
|
|
// get unchanged radius from diameter between polygon vertices
|
|
first = transform(polygon[0], projection, 'EPSG:4326');
|
|
last = transform(
|
|
polygon[(polygon.length - 1) / 2],
|
|
projection,
|
|
'EPSG:4326'
|
|
);
|
|
radius = getDistance(first, last) / 2;
|
|
} else {
|
|
// radius is being modified
|
|
first = transform(center, projection, 'EPSG:4326');
|
|
last = transform(modifyPoint, projection, 'EPSG:4326');
|
|
radius = getDistance(first, last);
|
|
}
|
|
// update the polygon using new center or radius
|
|
const circle = circular(
|
|
transform(center, projection, 'EPSG:4326'),
|
|
radius,
|
|
128
|
|
);
|
|
circle.transform('EPSG:4326', projection);
|
|
geometries[0].setCoordinates(circle.getCoordinates());
|
|
// save changes to be applied at the end of the interaction
|
|
modifyGeometry.setGeometries(geometries);
|
|
}
|
|
});
|
|
return defaultStyle(feature);
|
|
},
|
|
});
|
|
|
|
modify.on('modifystart', function (event) {
|
|
event.features.forEach(function (feature) {
|
|
const geometry = feature.getGeometry();
|
|
if (geometry.getType() === 'GeometryCollection') {
|
|
feature.set('modifyGeometry', geometry.clone(), true);
|
|
}
|
|
});
|
|
});
|
|
|
|
modify.on('modifyend', function (event) {
|
|
event.features.forEach(function (feature) {
|
|
const modifyGeometry = feature.get('modifyGeometry');
|
|
if (modifyGeometry) {
|
|
feature.setGeometry(modifyGeometry);
|
|
feature.unset('modifyGeometry', true);
|
|
}
|
|
});
|
|
});
|
|
|
|
map.addInteraction(modify);
|
|
|
|
let draw, snap; // global so we can remove them later
|
|
const typeSelect = document.getElementById('type');
|
|
|
|
function addInteractions() {
|
|
let value = typeSelect.value;
|
|
let geometryFunction;
|
|
if (value === 'Geodesic') {
|
|
value = 'Circle';
|
|
geometryFunction = function (coordinates, geometry, projection) {
|
|
if (!geometry) {
|
|
geometry = new GeometryCollection([
|
|
new Polygon([]),
|
|
new Point(coordinates[0]),
|
|
]);
|
|
}
|
|
const geometries = geometry.getGeometries();
|
|
const center = transform(coordinates[0], projection, 'EPSG:4326');
|
|
const last = transform(coordinates[1], projection, 'EPSG:4326');
|
|
const radius = getDistance(center, last);
|
|
const circle = circular(center, radius, 128);
|
|
circle.transform('EPSG:4326', projection);
|
|
geometries[0].setCoordinates(circle.getCoordinates());
|
|
geometry.setGeometries(geometries);
|
|
return geometry;
|
|
};
|
|
}
|
|
draw = new Draw({
|
|
source: source,
|
|
type: value,
|
|
geometryFunction: geometryFunction,
|
|
});
|
|
map.addInteraction(draw);
|
|
snap = new Snap({source: source});
|
|
map.addInteraction(snap);
|
|
}
|
|
|
|
/**
|
|
* Handle change event.
|
|
*/
|
|
typeSelect.onchange = function () {
|
|
map.removeInteraction(draw);
|
|
map.removeInteraction(snap);
|
|
addInteractions();
|
|
};
|
|
|
|
addInteractions();
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<h5 class="source-heading">index.html</h5>
|
|
<pre><code id="example-html-source" class="language-markup"><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Draw and Modify Geodesic Circles</title>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
<!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
|
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
|
|
<style>
|
|
.map {
|
|
width: 100%;
|
|
height:400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map" class="map"></div>
|
|
<form class="form-inline">
|
|
<label for="type">Geometry type &nbsp;</label>
|
|
<select id="type">
|
|
<option value="Point">Point</option>
|
|
<option value="LineString">LineString</option>
|
|
<option value="Polygon">Polygon</option>
|
|
<option value="Circle">Circle Geometry</option>
|
|
<option value="Geodesic" selected>Geodesic Circle</option>
|
|
</select>
|
|
</form>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html></code></pre>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<h5 class="source-heading">package.json</h5>
|
|
<pre><code id="example-pkg-source" class="language-json">{
|
|
"name": "draw-and-modify-geodesic",
|
|
"dependencies": {
|
|
"ol": "6.12.0"
|
|
},
|
|
"devDependencies": {
|
|
"parcel": "^2.0.0"
|
|
},
|
|
"scripts": {
|
|
"start": "parcel index.html",
|
|
"build": "parcel build --public-url . index.html"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
|
<script src="./resources/prism/prism-1.20.0.min.js"></script>
|
|
<script src="./resources/common.js"></script>
|
|
<script src="common.js"></script>
|
|
<script src="draw-and-modify-geodesic.js"></script>
|
|
<script>
|
|
$('#tag-example-list').on('show.bs.modal', function (event) {
|
|
const button = $(event.relatedTarget); // Button that triggered the modal
|
|
const title = button.data('title');
|
|
const content = button.data('content');
|
|
const modal = $(this)
|
|
modal.find('.modal-title').text(title);
|
|
modal.find('.modal-body').html(content);
|
|
});
|
|
|
|
var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
|
|
fetch(packageUrl).then(function(response) {
|
|
return response.json();
|
|
}).then(function(json) {
|
|
var latestVersion = json.version;
|
|
document.getElementById('latest-version').innerHTML = latestVersion;
|
|
var url = window.location.href;
|
|
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
|
|
var cookieText = 'dismissed=-' + latestVersion + '-';
|
|
var dismissed = document.cookie.indexOf(cookieText) != -1;
|
|
if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '6.12.0' != latestVersion) {
|
|
var link = url.replace(branchSearch[0], '/latest/examples/');
|
|
fetch(link, {method: 'head'}).then(function(response) {
|
|
var a = document.getElementById('latest-link');
|
|
a.href = response.status == 200 ? link : '../../latest/examples/';
|
|
});
|
|
var latestCheck = document.getElementById('latest-check');
|
|
latestCheck.style.display = '';
|
|
document.getElementById('latest-dismiss').onclick = function() {
|
|
latestCheck.style.display = 'none';
|
|
document.cookie = cookieText;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|