1
マガジン& geojsonポリゴンをチラシとGoogleマップを使用して表示できます。地図やポリゴンが異なるレイヤーに入っていますが、ズームイン、ズームアウト、またはドラッグ中に違和感があります。層？ここにはplunker！Googleマップとリーフレット描画ポリゴンを同じレイヤーに表示するにはどうすればよいですか？
<!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>