我目前正在为一个项目构建一个网络应用,不知道是否有人可以帮助我。我基本上是在做一个GPS游戏,在这个游戏中,整个地图都被雾气所覆盖,要想去除雾气,用户必须访问每个地点并登录。
对于雾,我只是要使用一个巨大的多边形来覆盖整个地图,然后使用用户的位置,在用户的当前位置生成一个多边形,从雾多边形切割多边形,然后最后重新应用它。
谁能告诉我,如何在用户位置添加一个六边形的多边形。
我目前是用地理位置API来获取用户的位置,但我也有点摸不着头脑,因为要画出这个六边形。下面我已经得到了位置代码,它在用户位置上放置了一个标记和一个基本的静态多边形(多边形是一个占位符,没有更多).我已经尝试播放导航器代码在用户位置上添加一个多边形,但它一直在破坏地图,我有点困惑如何做到这一点。
任何帮助都将是非常感激的。
navigator.geolocation.getCurrentPosition(function (position) {
var userMarker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(mymap);
})
var userPolygon = [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-1.5268367528915405,54.98091997292441],
[-1.5270352363586424,54.98074450562538],
[-1.5267670154571533,54.98054748879672],
[-1.5262091159820557,54.980541332005245],
[-1.5259945392608643,54.98072911372045],
[-1.5262305736541748,54.98091689455734],
[-1.5268367528915405,54.98091997292441]
]
]
}
}].addTo(mymap);
谢谢 @FalkeDesign 到目前为止的帮助。我已经添加了下面的更新代码,如果你能指出为什么他们不显示,我将非常感激。
<script>
var mymap = L.map('mapid').setView([57.149860, -2.102930], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
// //var to capture user position and place marker
// navigator.geolocation.getCurrentPosition(function (position) {
// var userMarker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(mymap);
// })
var fog = L.rectangle([[54.98652836571122, -1.542469837492442], [54.973032422136875, -1.4963848081781708]]);
var fogLayer = L.geoJSON(fog.toGeoJSON()).addTo(myMap);
function subtract() {
var radius = 0.01;
var hex = createHex(myMap.getCenter(), radius); //replace center with navigator point
var templayer = L.geoJSON(turf.difference(fogLayer.getLayers()[0].toGeoJSON(), hex.toGeoJSON()));
fogLayer.removeFrom(myMap);
fogLayer = templayer.addTo(myMap)
}
function createHex(center, radius) {
var centerp = turf.point([center.lng, center.lat]);
var points = [];
points.push(turf.destination(centerp, radius, 90));
points.push(turf.destination(centerp, radius, 150));
points.push(turf.destination(centerp, radius, -150));
points.push(turf.destination(centerp, radius, -90));
points.push(turf.destination(centerp, radius, -30));
points.push(turf.destination(centerp, radius, 30));
var hex = L.polygon([]);
points.forEach((p) => {
hex.addLatLng([p.geometry.coordinates[1], p.geometry.coordinates[0]]);
});
return hex;
}
subtract();
myMap.on('move', subtract);
////Add custom user icon
// var userIcon = L.icon({
// iconUrl: 'prototype\img\icons8-user-location-48.png',
// iconSize: [48, 48], // size of the icon
// shadowSize: [0, 0], // size of the shadow
// iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
// });
//Fog polygon
var fogPolygon =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-175.078125,
84.9901001802348
],
[
-174.375,
-85.05112877980659
],
[
197.578125,
-84.92832092949963
],
[
197.578125,
84.9901001802348
],
[
-175.078125,
84.9901001802348
]
]
]
}
}
]
};
L.geoJSON(fogPolygon, {
style: function (feature) {
return {
color: '#000000',
weight: 0.2,
}
}
}).addTo(mymap);
/*PoI Placeholders*/
var duthiePark = L.polygon([
[57.12896, -2.107036],
[57.12882, -2.101028],
[57.130765, -2.097294],
[57.132512, -2.102809],
[57.131906, -2.107852],
[57.130776, -2.106779]
]).addTo(mymap);
var robertGordon = L.polygon([
[57.119828, -2.150552],
[57.117568, -2.148342],
[57.117661, -2.136669],
[57.118232, -2.129974],
[57.11963, -2.130404],
[57.119886, -2.136497],
[57.118768, -2.14493]
]).addTo(mymap);
var pittodrie = L.polygon([
[57.159646, -2.090192],
[57.158436, -2.090299],
[57.158587, -2.086523],
[57.159693, -2.086844],
]).addTo(mymap);
var unionTerraceGardens = L.polygon([
[57.14575, -2.101521],
[57.147612, -2.103775],
[57.147612, -2.104461],
[57.147147, -2.104826],
[57.145598, -2.102122]
]).addTo(mymap);
var unionSquare = L.polygon([
[57.144166, -2.098882],
[57.145098, -2.095771],
[57.142653, -2.092767],
[57.141582, -2.095771]
]).addTo(mymap);
var marischalCollege = L.polygon([
[57.150301, -2.096007],
[57.149475, -2.097552],
[57.14838, -2.096329],
[57.149044, -2.095428],
[57.14951, -2.095084],
[57.150232, -2.095504],
]).addTo(mymap);
var robertGordonCollege = L.polygon([
[57.147822, -2.1032177],
[57.147868, -2.100663],
[57.148858, -2.101521],
[57.149638, -2.103066],
[57.149381, -2.104053]
]).addTo(mymap);
var robertGordonCollege = L.polygon([
[57.147822, -2.1032177],
[57.147868, -2.100663],
[57.148858, -2.101521],
[57.149638, -2.103066],
[57.149381, -2.104053]
]).addTo(mymap);
var aberdeenBeach = L.polygon([
[57.142428, -2.068863],
[57.145315, -2.073669],
[57.153602, -2.078819],
[57.164122, -2.079248],
[57.173149, -2.077446],
[57.158536, -2.078047],
[57.147829, -2.074614],
[57.1428, -2.06809]
]).addTo(mymap);
var victoriaPark = L.polygon([
[57.15256, -2.124707],
[57.150599, -2.123762],
[57.151966, -2.118838],
[57.152781, -2.119181]
]).addTo(mymap);
var westburnPark = L.polygon([
[57.155969, -2.126412],
[57.152664, -2.124674],
[57.152845, -2.121574],
[57.153648, -2.121187],
[57.153625, -2.119911],
[57.154934, -2.120233]
]).addTo(mymap);
var aberdeenHarbour = L.polygon([
[57.14536, -2.095031],
[57.145803, -2.093743],
[57.146263, -2.087681],
[57.144526, -2.075472],
[57.142011, -2.069764],
[57.140498, -2.075686],
[57.140498, -2.089033]
]).addTo(mymap);
var aberdeenUniversity = L.polygon([
[57.166762, -2.106467],
[57.167129, -2.10224],
[57.166721, -2.097305],
[57.16575, -2.097702],
[57.164498, -2.097402],
[57.164557, -2.099805],
[57.163067, -2.099869],
[57.163266, -2.102047],
[57.161973, -2.101736],
[57.162404, -2.10429],
[57.16337, -2.107208],
[57.165404, -2.106156],
]).addTo(mymap);
var hazleheadPark = L.polygon([
[57.142869, -2.17643],
[57.139067, -2.172997],
[57.137635, -2.177374],
[57.137013, -2.180786],
[57.139591, -2.183726],
[57.140953, -2.176816],
[57.142502, -2.178082]
]).addTo(mymap);
/*Display lat/long coordinates - Development use only! */
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent(e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
/*Popups*/
robertGordon.bindPopup("Robert Gordon University");
pittodrie.bindPopup("Pittodrie Stadium");
duthiePark.bindPopup("Duthie Park");
unionTerraceGardens.bindPopup("Union Terrace Gardens")
marischalCollege.bindPopup("Marischal College and Dancing Water Fountains")
robertGordonCollege.bindPopup("Robert Gordon College and Art Gallery")
aberdeenBeach.bindPopup("Aberdeen Beach")
unionSquare.bindPopup("Union Square")
victoriaPark.bindPopup("Victoria park")
westburnPark.bindPopup("Westburn Park")
hazleheadPark.bindPopup("Hazlehead Park")
aberdeenUniversity.bindPopup("Aberdeen University")
aberdeenHarbour.bindPopup("Aberdeen harbour")
.addTo(mymap);
</script>
这是工作与turfjs库。<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.js"></script>
创建六边形
var hex = createHex(myMap.getCenter(),radius); //replace center with navigator point
function createHex(center,radius) {
var centerp = turf.point([center.lng, center.lat]);
var points = [];
points.push(turf.destination(centerp, radius, 90));
points.push(turf.destination(centerp, radius, 150));
points.push(turf.destination(centerp, radius, -150));
points.push(turf.destination(centerp, radius, -90));
points.push(turf.destination(centerp, radius, -30));
points.push(turf.destination(centerp, radius, 30));
var hex = L.polygon([]);
points.forEach((p)=>{
hex.addLatLng([p.geometry.coordinates[1],p.geometry.coordinates[0]]);
});
return hex;
}
去除 "雾 "中的六角形。
var fog = L.rectangle([[54.98652836571122, -1.542469837492442],[ 54.973032422136875, -1.4963848081781708]]);
var fogLayer = L.geoJSON(fog.toGeoJSON()).addTo(myMap);
function subtract() {
var radius = 0.01;
var hex = createHex(myMap.getCenter(),radius); //replace center with navigator point
var templayer = L.geoJSON(turf.difference(fogLayer.getLayers()[0].toGeoJSON(), hex.toGeoJSON()));
fogLayer.removeFrom(myMap);
fogLayer = templayer.addTo(myMap)
}
例如: https:/jsfiddle.netfalkedesign6a4smLgt。
希望你不要忘记查看答案;)