Hallo
folgend ist ein Java funcktion und htm codl damit kann man eine Polygone (heisst Snäpping zone)auf den Karte direct zeichnen
die frage ist wie kan ich den polygone mit JSON-Datei einlesen,?
das Heisst muss dies Polygon in einem JSON-Datei gespeichert werden.
JSON-Datei mit Zone ->Snapping-Zone anzeigen->z.B. Name der Zone ändern ->Abspeichern in JSON-Datei
------------------------------------------------------------
function DrawSnappingZone(MapIdentifier){
var coordinatearray = [];
var snappingpoints = prompt("Wieviele Punkte sollen gesetzt werden?");
MapIdentifier.on('click', function(evt)
{
var single_coordinate = ol.proj.toLonLat(evt.coordinate);
coordinatearray.push(single_coordinate);
//console.log(coordinatearray);
console.log(coordinatearray.length);
//DrawSnappingZone(coordinatearray, 5);
if (coordinatearray.length == snappingpoints)
coordinatearray.push(coordinatearray[0]);
RouteAnzeigenAusKoordinaten(coordinatearray, KarteGlobal_o, 'red');
}
});
-----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ol5/css/ol.css" type="text/css"/>
<style>
.map {
height: 400px;
width: 600px;
</style>
<script src="ol5/build/ol.js"></script>
<script src="polyline.js"></script>
<script src="Goslar.js"></script>
<script src="…terode.js"></script>
<title>Erste Testmap</title>
</head>
<body>
<div id="map" class="map"></div>
<!--
*width und height: legt die Größe fest, die die Map innerhalb der Seite haben soll
=> hier: 640x480 Pixel
-->
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZmlsc2UiLCJhIjoiY2p1Y3p0ZDE2MDAzMjQ0bnhreDA4eGh1biJ9.aCzJGqMoMbrMsrO3VsN0OA'
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([9.97025, 51.52132], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
var crd = polyline.decode('kymyHwgz{@b@`EeD|Ar@hMmBfS}Kj\\gKtN}BhIx@pz@wH~NkBdK_AjAhAnf@uGl`@kLjGmLsBcKiKgIs[gItAUcCiBX');
//Dekodierung der Polyline, die von OSRM geliefert wurde.
crd.map(function(l)
return l.reverse();
//Vertauschen der Ausrichtung von Lat und Long
console.log(crd);
var polyline = new ol.geom.LineString(crd) //Wandeln der Array-Einträge in einen geometry-String
polyline.transform('EPSG:4326', 'EPSG:3857'); //Wandlung der Polylines in ein Referenzkoordinatensystem
var polyfeat = new ol.Feature(polyline);//Wandeln der geometry-Polyline in ein Feature
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polyfeat]
}),
style: new ol.style.Style({
fill: new ol.style.Fill(
color: 'green'
stroke: new ol.style.Stroke(
color: 'red',
width: 3