ole
Version:
OpenLayers Editor
216 lines (192 loc) • 5.92 kB
HTML
<html>
<head>
<title>OpenLayers Editor</title>
<link rel="stylesheet" type="text/css" href="style/ole.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/ol@8.2.0/ol.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/maplibre-gl@4.2.0/dist/maplibre-gl.css"
/>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/ol@8.2.0/dist/ol.js"></script>
<script src="https://unpkg.com/maplibre-gl@4.2.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/jsts@2.11.3/dist/jsts.min.js"></script>
<script src="index.js"></script>
<div id="app">
<div id="header">
<nav>
<div id="brand">OpenLayers Editor</div>
<div id="links">
<a href="#" class="active">Demo</a>
<a href="api.html">API</a>
<a
target="_blank"
href="https://github.com/geops/openlayers-editor"
>
Code
</a>
</div>
</nav>
</div>
<div id="map"></div>
<div id="promo">
<a href="https://geops.com/en/career" target="_blank">
<div id="promo-text">Join the team!</div>
</a>
</div>
<div id="copyright">
<a href="https://www.sbb.ch/" target="_blank">© SBB/CFF/FFS</a>|
<a href="https://www.geops.ch/" target="_blank">© geOps Tiles</a>|
<a href="https://www.openstreetmap.org/about/" target="_blank">
© OpenStreetMap Contributors
</a>
|
<a href="https://www.openmaptiles.org/" target="_blank">
© OpenMapTiles
</a>
|
<a
href="https://geops.com/en/imprint"
target="_blank"
rel="noopener noreferrer"
>
Imprint
</a>
|
<a
href="https://geops.com/en/privacy"
target="_blank"
rel="noopener noreferrer"
>
Privacy
</a>
|
<a
href="https://geops.com/en"
target="_blank"
rel="noopener noreferrer"
>
About geOps
</a>
</div>
</div>
<script type="text/javascript">
var editLayer = new ol.layer.Vector({
source: new ol.source.Vector({
wrapX: false,
}),
});
// Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
var mbMap = new maplibregl.Map({
container: 'map',
center: ol.proj.toLonLat([873708.375917, 6105425.847789]),
attributionControl: false,
interactive: false,
});
// Get the public api key
fetch('https://backend.developer.geops.io/publickey')
.then((response) => response.json())
.then(function (data = {}) {
mbMap.setStyle(
'https://maps.geops.io/styles/travic_v2/style.json?key=' + data.key,
);
});
// Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
var mbLayer = new ol.layer.Layer({
render: function (frameState) {
if (!mbMap) {
return null;
}
var canvas = mbMap.getCanvas();
var viewState = frameState.viewState;
var visible = mbLayer.getVisible();
canvas.style.position = 'absolute';
canvas.style.display = visible ? 'block' : 'none';
var opacity = mbLayer.getOpacity();
canvas.style.opacity = opacity;
// adjust view parameters in mapbox
var rotation = viewState.rotation;
mbMap.jumpTo({
center: ol.proj.toLonLat(viewState.center),
zoom: viewState.zoom - 1,
bearing: (-rotation * 180) / Math.PI,
animate: false,
});
if (!(
canvas.width === Math.floor(frameState.size[0] * frameState.pixelRatio) &&
canvas.height === Math.floor(frameState.size[1] * frameState.pixelRatio)
)) {
mbMap.resize();
}
mbMap.redraw();
return mbMap.getCanvas();
},
});
var map = new ol.Map({
layers: [mbLayer, editLayer],
target: 'map',
view: new ol.View({
center: [873708.375917, 6105425.847789],
zoom: 15,
}),
keyboardEventTarget: document,
});
var editor = new ole.Editor(map);
var cad = new ole.control.CAD({
source: editLayer.getSource(),
});
var draw = new ole.control.Draw({
source: editLayer.getSource(),
});
var drawLine = new ole.control.Draw({
type: 'LineString',
source: editLayer.getSource(),
});
var rotate = new ole.control.Rotate({
source: editLayer.getSource(),
});
var drawPoly = new ole.control.Draw({
type: 'Polygon',
source: editLayer.getSource(),
});
var modify = new ole.control.Modify({
source: editLayer.getSource(),
});
var buffer = new ole.control.Buffer({
source: editLayer.getSource(),
});
var union = new ole.control.Union({
source: editLayer.getSource(),
});
var intersection = new ole.control.Intersection({
source: editLayer.getSource(),
});
var difference = new ole.control.Difference({
source: editLayer.getSource(),
});
editor.addControls([
cad,
draw,
drawLine,
drawPoly,
modify,
rotate,
buffer,
union,
intersection,
difference,
]);
var ls = new ole.service.LocalStorage();
editor.addService(ls);
// For tests purpose
window.editor = editor;
window.editLayer = editLayer;
</script>
</body>
</html>