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.
675 lines
33 KiB
HTML
675 lines
33 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,URL,TextDecoder"></script>
|
|
|
|
|
|
<title>Tracing around a polygon</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.5.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">Tracing around a polygon</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" 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="./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 active" href="./tracing.html">Tracing around a polygon</a>"
|
|
tabindex="0"
|
|
>9</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=trace" class="badge badge-info">trace</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="trace"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action active" href="./tracing.html">Tracing around a polygon</a>"
|
|
tabindex="0"
|
|
>1</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=snap" class="badge badge-info">snap</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="snap"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./snap.html">Snap Interaction</a>
|
|
<a class="list-group-item list-group-item-action active" href="./tracing.html">Tracing around a polygon</a>"
|
|
tabindex="0"
|
|
>2</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-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" 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="./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="./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="./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="./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 active" 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>"
|
|
tabindex="0"
|
|
>60</a>
|
|
</span>
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q=topology" class="badge badge-info">topology</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="topology"
|
|
data-content="
|
|
<a class="list-group-item list-group-item-action" href="./topolis.html">topolis integration</a>
|
|
<a class="list-group-item list-group-item-action active" href="./tracing.html">Tracing around a polygon</a>"
|
|
tabindex="0"
|
|
>2</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="Polygon">Polygon</option>
|
|
<option value="LineString">LineString</option>
|
|
<option value="None">None</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 setting up a draw interaction to easily snap to an existing feature.</p>
|
|
<div id="docs"><p>This example showcases how the draw interaction API can be set up to make snapping along an existing geometry easier while preserving topology, which is sometimes called "tracing". When the user clicks on two different points on the Idaho state border, the part of the border comprised between these two points is added to the currently drawn feature. This leverages the <code>appendCoordinates</code> method of the <code>ol/interaction/Draw</code> interaction.</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 Draw from 'ol/interaction/Draw';
|
|
import Feature from 'ol/Feature';
|
|
import Fill from 'ol/style/Fill';
|
|
import GeoJSON from 'ol/format/GeoJSON';
|
|
import LineString from 'ol/geom/LineString';
|
|
import Map from 'ol/Map';
|
|
import Snap from 'ol/interaction/Snap';
|
|
import Stroke from 'ol/style/Stroke';
|
|
import Style from 'ol/style/Style';
|
|
import View from 'ol/View';
|
|
import {OSM, Vector as VectorSource} from 'ol/source';
|
|
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
|
|
|
// math utilities
|
|
|
|
// coordinates; will return the length of the [a, b] segment
|
|
function length(a, b) {
|
|
return Math.sqrt(
|
|
(b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1])
|
|
);
|
|
}
|
|
|
|
// coordinates; will return true if c is on the [a, b] segment
|
|
function isOnSegment(c, a, b) {
|
|
var lengthAc = length(a, c);
|
|
var lengthAb = length(a, b);
|
|
var dot =
|
|
((c[0] - a[0]) * (b[0] - a[0]) + (c[1] - a[1]) * (b[1] - a[1])) / lengthAb;
|
|
return Math.abs(lengthAc - dot) < 1e-6 && lengthAc < lengthAb;
|
|
}
|
|
|
|
// modulo for negative values, eg: mod(-1, 4) returns 3
|
|
function mod(a, b) {
|
|
return ((a % b) + b) % b;
|
|
}
|
|
|
|
// returns a coordinates array which contains the segments of the feature's
|
|
// outer ring between the start and end points
|
|
// Note: this assumes the base feature is a single polygon
|
|
function getPartialRingCoords(feature, startPoint, endPoint) {
|
|
var polygon = feature.getGeometry();
|
|
if (polygon.getType() === 'MultiPolygon') {
|
|
polygon = polygon.getPolygon(0);
|
|
}
|
|
var ringCoords = polygon.getLinearRing().getCoordinates();
|
|
|
|
var i,
|
|
pointA,
|
|
pointB,
|
|
startSegmentIndex = -1;
|
|
for (i = 0; i < ringCoords.length; i++) {
|
|
pointA = ringCoords[i];
|
|
pointB = ringCoords[mod(i + 1, ringCoords.length)];
|
|
|
|
// check if this is the start segment dot product
|
|
if (isOnSegment(startPoint, pointA, pointB)) {
|
|
startSegmentIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
var cwCoordinates = [];
|
|
var cwLength = 0;
|
|
var ccwCoordinates = [];
|
|
var ccwLength = 0;
|
|
|
|
// build clockwise coordinates
|
|
for (i = 0; i < ringCoords.length; i++) {
|
|
pointA =
|
|
i === 0
|
|
? startPoint
|
|
: ringCoords[mod(i + startSegmentIndex, ringCoords.length)];
|
|
pointB = ringCoords[mod(i + startSegmentIndex + 1, ringCoords.length)];
|
|
cwCoordinates.push(pointA);
|
|
|
|
if (isOnSegment(endPoint, pointA, pointB)) {
|
|
cwCoordinates.push(endPoint);
|
|
cwLength += length(pointA, endPoint);
|
|
break;
|
|
} else {
|
|
cwLength += length(pointA, pointB);
|
|
}
|
|
}
|
|
|
|
// build counter-clockwise coordinates
|
|
for (i = 0; i < ringCoords.length; i++) {
|
|
pointA = ringCoords[mod(startSegmentIndex - i, ringCoords.length)];
|
|
pointB =
|
|
i === 0
|
|
? startPoint
|
|
: ringCoords[mod(startSegmentIndex - i + 1, ringCoords.length)];
|
|
ccwCoordinates.push(pointB);
|
|
|
|
if (isOnSegment(endPoint, pointA, pointB)) {
|
|
ccwCoordinates.push(endPoint);
|
|
ccwLength += length(endPoint, pointB);
|
|
break;
|
|
} else {
|
|
ccwLength += length(pointA, pointB);
|
|
}
|
|
}
|
|
|
|
// keep the shortest path
|
|
return ccwLength < cwLength ? ccwCoordinates : cwCoordinates;
|
|
}
|
|
|
|
// layers definition
|
|
|
|
var raster = new TileLayer({
|
|
source: new OSM(),
|
|
});
|
|
|
|
// features in this layer will be snapped to
|
|
var baseVector = new VectorLayer({
|
|
source: new VectorSource({
|
|
format: new GeoJSON(),
|
|
url:
|
|
"https://ahocevar.com/geoserver/wfs?service=wfs&request=getfeature&typename=topp:states&cql_filter=STATE_NAME='Idaho'&outputformat=application/json",
|
|
}),
|
|
});
|
|
|
|
// this is were the drawn features go
|
|
var drawVector = new VectorLayer({
|
|
source: new VectorSource(),
|
|
style: new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(100, 255, 0, 1)',
|
|
width: 2,
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(100, 255, 0, 0.3)',
|
|
}),
|
|
}),
|
|
});
|
|
|
|
// this line only appears when we're tracing a feature outer ring
|
|
var previewLine = new Feature({
|
|
geometry: new LineString([]),
|
|
});
|
|
var previewVector = new VectorLayer({
|
|
source: new VectorSource({
|
|
features: [previewLine],
|
|
}),
|
|
style: new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(255, 0, 0, 1)',
|
|
width: 2,
|
|
}),
|
|
}),
|
|
});
|
|
|
|
var map = new Map({
|
|
layers: [raster, baseVector, drawVector, previewVector],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [-12986427, 5678422],
|
|
zoom: 5,
|
|
}),
|
|
});
|
|
|
|
var drawInteraction, tracingFeature, startPoint, endPoint;
|
|
var drawing = false;
|
|
|
|
var getFeatureOptions = {
|
|
hitTolerance: 10,
|
|
layerFilter: function (layer) {
|
|
return layer === baseVector;
|
|
},
|
|
};
|
|
|
|
// the click event is used to start/end tracing around a feature
|
|
map.on('click', function (event) {
|
|
if (!drawing) {
|
|
return;
|
|
}
|
|
|
|
var hit = false;
|
|
map.forEachFeatureAtPixel(
|
|
event.pixel,
|
|
function (feature) {
|
|
if (tracingFeature && feature !== tracingFeature) {
|
|
return;
|
|
}
|
|
|
|
hit = true;
|
|
var coord = map.getCoordinateFromPixel(event.pixel);
|
|
|
|
// second click on the tracing feature: append the ring coordinates
|
|
if (feature === tracingFeature) {
|
|
endPoint = tracingFeature.getGeometry().getClosestPoint(coord);
|
|
var appendCoords = getPartialRingCoords(
|
|
tracingFeature,
|
|
startPoint,
|
|
endPoint
|
|
);
|
|
drawInteraction.removeLastPoint();
|
|
drawInteraction.appendCoordinates(appendCoords);
|
|
tracingFeature = null;
|
|
}
|
|
|
|
// start tracing on the feature ring
|
|
tracingFeature = feature;
|
|
startPoint = tracingFeature.getGeometry().getClosestPoint(coord);
|
|
},
|
|
getFeatureOptions
|
|
);
|
|
|
|
if (!hit) {
|
|
// clear current tracing feature & preview
|
|
previewLine.getGeometry().setCoordinates([]);
|
|
tracingFeature = null;
|
|
}
|
|
});
|
|
|
|
// the pointermove event is used to show a preview of the result of the tracing
|
|
map.on('pointermove', function (event) {
|
|
if (tracingFeature && drawing) {
|
|
var coord = null;
|
|
map.forEachFeatureAtPixel(
|
|
event.pixel,
|
|
function (feature) {
|
|
if (tracingFeature === feature) {
|
|
coord = map.getCoordinateFromPixel(event.pixel);
|
|
}
|
|
},
|
|
getFeatureOptions
|
|
);
|
|
|
|
var previewCoords = [];
|
|
if (coord) {
|
|
endPoint = tracingFeature.getGeometry().getClosestPoint(coord);
|
|
previewCoords = getPartialRingCoords(
|
|
tracingFeature,
|
|
startPoint,
|
|
endPoint
|
|
);
|
|
}
|
|
previewLine.getGeometry().setCoordinates(previewCoords);
|
|
}
|
|
});
|
|
|
|
var snapInteraction = new Snap({
|
|
source: baseVector.getSource(),
|
|
});
|
|
|
|
var typeSelect = document.getElementById('type');
|
|
|
|
function addInteraction() {
|
|
var value = typeSelect.value;
|
|
if (value !== 'None') {
|
|
drawInteraction = new Draw({
|
|
source: drawVector.getSource(),
|
|
type: typeSelect.value,
|
|
});
|
|
drawInteraction.on('drawstart', function () {
|
|
drawing = true;
|
|
});
|
|
drawInteraction.on('drawend', function () {
|
|
drawing = false;
|
|
previewLine.getGeometry().setCoordinates([]);
|
|
tracingFeature = null;
|
|
});
|
|
map.addInteraction(drawInteraction);
|
|
map.addInteraction(snapInteraction);
|
|
}
|
|
}
|
|
|
|
typeSelect.onchange = function () {
|
|
map.removeInteraction(drawInteraction);
|
|
map.removeInteraction(snapInteraction);
|
|
addInteraction();
|
|
};
|
|
addInteraction();
|
|
</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>Tracing around a polygon</title>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></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="Polygon">Polygon</option>
|
|
<option value="LineString">LineString</option>
|
|
<option value="None">None</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": "tracing",
|
|
"dependencies": {
|
|
"ol": "6.5.0"
|
|
},
|
|
"devDependencies": {
|
|
"parcel": "^2.0.0-beta.1"
|
|
},
|
|
"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="tracing.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.5.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>
|