1
Ich bin in der Lage, Marker & Geojson Polygone mit Flugblatt und Google Maps anzuzeigen. Aber Karte und Polygone kommen in verschiedenen Schichten das sieht nicht gut aus, wenn Sie heranzoomen, herauszoomen oder ziehen. Wie kann ich sie in einem anzeigen Schicht? Hier ist die plunker!Wie zeigen Google Maps und Flugblätter Polygone in einer Ebene?
<!DOCTYPE html>
<html>
<style>
.leaflet-google-layer {
z-index: 0 !important;
}
.leaflet-map-pane {
z-index: 100;
}
</style>
<head>
<title>Leaflet Draw</title>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="leaflet.draw.ie.css" />
<![endif]-->
<script src="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js?v=3.25"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var map = new L.Map('map', {
center: new L.LatLng(-37.7772, 175.2756),
zoom: 9
});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
title: 'Draw a sexy polygon!',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
map.on('draw:edited', function(e) {
var layers = e.layers;
layers.eachLayer(function(layer) {
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
});
map.on('draw:deleted', function(e) {
var layers = e.layers;
layers.eachLayer(function(layer) {
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
});
L.geoJson($scope.geojsonFeatures, {
onEachFeature: onEachFeature
});
$scope.geojsonFeatures = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
175.2756, -37.7772
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
175.27364730834958, -37.77322501372662
],
[
175.27849674224854, -37.776617142149554
],
[
175.28351783752439, -37.784486280685925
],
[
175.28879642486572, -37.781365860467126
],
[
175.2824878692627, -37.7707486617024
],
[
175.27364730834958, -37.77322501372662
]
]
]
}
}]
};
console.log($scope.geojsonFeatures);
L.geoJson($scope.geojsonFeatures, {
onEachFeature: onEachFeature
});
function onEachFeature(feature, layer) {
drawnItems.addLayer(layer);
}
});
</script>
</body>
</html>