1
国が繰り返すとき、つまり最大にズームアウトするときに、同じ国を繰り返しクリックした国が無効な座標を返すときに、単一のワールドマップを表示することでユーザーを制限することはできません（これはWrapXプロパティを設定することによって行うことができます）。他の解決策、助けてください。Open Layersから座標を正しく取得する方法リージョンが繰り返されたときのAPI
座標を表示するサンプルコードを追加する。繰り返す同じ国/地域にマウスを乗せてください。
"use strict";
var vectorSource = new ol.source.Vector({
wrapX: false
});
/*Layer Styles*/
var stylesIcon = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'icon.png'
})
})
var stylesIcon2 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,0,255,0.3)'
}),
stroke: new ol.style.Stroke({
color: '#000100',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#000000'
})
})
})
/*Layers*/
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: stylesIcon
});
/*Map*/
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM({})
}), vectorLayer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 1
})
});
var element = document.getElementById('popup');
element.onmouseout = function(event) {
element.style.visibility = 'hidden'
};
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
/*Events*/
map.on("pointermove", function(event) {
var lonlat = ol.proj.transform(event.coordinate, 'EPSG:3857',
'EPSG:4326');
var logitude = lonlat[0];
var lattitude = lonlat[1];
document.getElementById('mousePointer').innerText = 'longitude : ' +
logitude + ' latitude : ' + lattitude;
});
map.on("singleclick", function(event) {
var lonlat = ol.proj.transform(event.coordinate, 'EPSG:3857',
'EPSG:4326');
var logitude = lonlat[0];
var lattitude = lonlat[1];
document.getElementById('mouseClick').innerText = 'longitude : ' +
logitude + ' latitude : ' + lattitude;
});
map.on('click', function(event) {
var feature = map.forEachFeatureAtPixel(event.pixel, function(
feature, layer) {
return feature;
})
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
var element = document.getElementById('popup');
element.innerText = feature.get('name')
element.style.visibility = 'visible'
}
})
function createMarkers() {
var lat = parseFloat(document.getElementById('latitudeInp').value);
var lng = parseFloat(document.getElementById('logitudeInp').value);
vectorSource.clear();
vectorSource.addFeature(new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lng, lat],
'EPSG:4326', 'EPSG:3857')),
name: 'Added Marker'
}));
}a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
.mapDemo {
border: 1px solid black;
margin-top: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet -->
<!-- Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
</head>
<body>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<div id="mapDemo" class="mapDemo">
<h3>Demo Actions</h3>
<p>
Current mouse pointer : <span id="mousePointer"></span>
</p>
<p>
Clicked at :<span id="mouseClick"></span>
</p>
<p>
Add Marker : <span>
<label>Longitude : </label><input type="number" id="logitudeInp" />
</span> <span>
<label>
Latitude
:
</label><input type="number" id="latitudeInp" />
</span> <span>
<label>
Name
:
</label><input type="text" id="nameInp" />
</span> <span>
<label>
Submit
:
</label><input type="submit" id="submit" onclick="createMarkers()" />
</span>
</p>
</div>
<div id="popup"></div>
</body>
</html>
地図上の端には、この点についてご説明しました –