- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
正如您从我的 Mapbox GL JS map 上的图片中看到的,我试图将“W”标记径向定位在中心的小“2”标记周围,但我不知道如何实现这一点。
您可以查看下面随附的 fiddle 以更好地理解这一点。
但本质上,有一个数组 w_markers_arr
,对于每个数组内容,我向 map 添加一个标记,使用以下代码将其从中心标记偏移一点:
"coordinates": [
center_marker.features[0].geometry.coordinates[0] - (w_markers_arr.length * 0.0006) + (i * 0.002),
center_marker.features[0].geometry.coordinates[1] - 0.001 - (Math.sin(i * 0.001) * 0.5)
]
我尝试过使用 Math.PI
、Math.PI/2
,使其出现在中心标记周围,但没有成功。
在我附加的当前代码中,我尝试使用 Math.Sin()
以某种方式使其出现在波浪中(我丢失了tbh),但它也不成功。
希望有人能指出我正确的方向。非常感谢任何帮助。
#geocoder-container > div {
min-width:50%;
margin-left:25%;
}
.mapboxgl-ctrl-geocoder {
display: none;
}
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-bottom-right {
display: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Set a point after Geocoder result</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>
<script>
var center_marker;
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
center: [127.017613, 37.591672],
maxBounds: [
[126.972368, 37.572532], // Southwest coordinates
[127.073682, 37.629226] // Northeast coordinates
], // Sets bounds as max
zoom: 14.2,
minZoom: 14.2
// pitch: 60, // pitch in degrees
// bearing: -60, // bearing in degrees
});
// After the map style has loaded on the page, add a source layer and default
// styling for a single point.
map.on('load', function() {
map.addSource('single-point', {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
});
center_marker = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"message": "Marker 0",
},
"geometry": {
"type": "Point",
"coordinates": [127.017613, 37.591672],
}
},
]
};
// create center marker and add to map
var el = document.createElement('div');
el.className = 'marker_places';
el.dataset.index = 0;
el.style.backgroundImage = 'url(http://fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_1.svg)';
el.style.width = '25px';
el.style.height = '25px';
// add center marker to map
new mapboxgl.Marker(el)
.setLngLat(center_marker.features[0].geometry.coordinates)
.addTo(map);
/******/
var w_markers_arr = ["w_marker1", "w_marker2", "w_marker3", "w_marker4", "w_marker5", "w_marker6",]
var w_markers = {
"type": "FeatureCollection",
"features": []
};
// add w markers
for (var i = 0; i < w_markers_arr.length; i++) {
var w_markers_feature_toadd = {
"type": "Feature",
"properties": {
"message": "Work "+i,
"index": i
},
"geometry": {
"type": "Point",
"coordinates": [
center_marker.features[0].geometry.coordinates[0] - (w_markers_arr.length * 0.0006) + (i * 0.002),
center_marker.features[0].geometry.coordinates[1] - 0.001 - (Math.sin(i * 0.001) * 0.5)
]
}
}
w_markers.features.push(w_markers_feature_toadd);
// create marker ele and add to map
var el = document.createElement('div');
el.className = 'marker_floaters';
el.dataset.index = i;
el.style.backgroundImage = 'url(https://www.fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_works.svg)';
el.style.width = '35px';
el.style.height = '35px';
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(w_markers_feature_toadd.geometry.coordinates)
.addTo(map);
}
});
</script>
</body>
</html>
最佳答案
用纬度/经度制作一个圆可能非常棘手。
图书馆Turf.js提供了一些非常有用的工具,例如circle
,它返回一个以中心点和半径为中心的圆:
var radius = 0.2;
var options = { steps: w_markers_arr.length, units: 'kilometers' };
var circleCenter = center_marker.features[0].geometry.coordinates;
var circle = turf.circle(circleCenter, radius, options);
var circleCoordinates = circle.geometry.coordinates[0];
通过将步数设置为标记的数量,circleCooperatives[i]
将包含每个标记的坐标(+ 最后一个与第一个标记相同的坐标) .
关于javascript - Mapbox GL js - 围绕给定坐标径向添加多个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52760507/
我有一个点(粉色圆圈),它有一个已知的 X 坐标和一个已知的 Y 坐标,但 Y 坐标> 坐标不正确。它当前位于目标贝塞尔曲线(部分位于白色正方形中的曲线)所在的点(如果它是两点之间的一条线)。我需要为
有一个基于QML 和QWT 的代码,一种具有更多可能性的图形生成器。技术要求之一是根据某个 X 坐标获得绘图曲线的 Y 坐标。 有一种不准确的方法 - 获取 QwtPlotCurve 的 QPoint
我目前正在将对象的 3D 坐标转换为 2D 坐标,然后在其上绘制 2D 文本(目前是对象名称): public static int[] getScreenCoords(double x, doubl
首先,我创建一个元组列表(要绘制的点)。每个元组由 3 个数字组成(x - 坐标,y - 坐标,c - 点的颜色) import random import matplotlib.pyplot as
我正在制作一个 2 人 Java 游戏,但我需要确保坐标保留在板上。 addPiece(1, 1, "X"); addPiece(8, 8, "O"); showBoard(); Scanner my
我想检查我是否正确使用了 scipy 的 KD 树,因为它看起来比简单的暴力破解要慢。 关于这个我有三个问题: Q1. 如果我创建以下测试数据: nplen = 1000000 # WGS84 lat
我有一个 GeoJSON 文件,我正在尝试处理它以便在谷歌地图上绘制一些功能。然而,问题在于坐标不是传统的纬度/经度表示法,而是一些大的六位/七位数字。示例: { "type":
我在使用坐标时遇到格式化问题。 public class Coordinate { public int x; public int y; public Coordinate( int x
我正在尝试获取当前位置的经度和纬度坐标。这是到目前为止我的代码: public class MainActivity extends AppCompatActivity { @Override pro
基本上,我需要获取从 OpenGL 中的贝塞尔曲线实现绘制的所有坐标。具体来说,我需要坐标来沿着弯曲的轨迹路径移动场景中的球体对象(棒球)。这是我用来绘制曲线的: GL2 gl = drawable.
现在我用 JAVA 遇到了一些问题,但不记得如何获取坐标系之间的长度。 例如。A 点 (3,7)B点(7,59) 我想知道如何计算a点和b点之间的距离。非常感谢您的回答。 :-) 最佳答案 A = (
我正在用 Pi2Go 机器人制作一个小项目,它将从超声波传感器获取数据,然后如果它看到一个物体,则放置一个 X,并放置 O 它当前所在的位置,我有两个问题:如何在 tkinter 上设置坐标位置?例如
如何在 pygame 中存储对象的先前坐标?我的问题可能有点难以解释,但我会尽力,如果您自己尝试我的代码以理解我的意思可能会有所帮助。 这就是我的游戏的内容。我希望这能让我的问题更容易理解。 我正在创
如何存储用户的当前位置并在 map 上显示该位置? 我能够在 map 上显示预定义的坐标,只是不知道如何从设备接收信息。 此外,我知道我必须将一些项目添加到 Plist 中。我怎样才能做到这一点? 最
我在 android 应用程序开发方面不是很熟练,我正在开发一个测试应用程序。我检测到了脸和眼睛,现在我要根据眼睛的坐标在脸上画一些像粉刺或疤痕的东西(例如脸颊上的眼睛下方)。稍后,我会把眼镜或帽子放
所以我正在使用 API 来检测图像中的人脸,到目前为止它对我来说效果很好。然而,我一直无法弄清楚如何将图像裁剪到脸上。我知道如何裁剪位图,但它需要获取位图中脸部的左上角位置以及宽度和高度。当我使用 查
我有 2 个表。第一个表包含以下列:Start_latitude、start_longitude、end_latitude、end_longitude、sum。 sum 列为空,需要根据第二张表进行填
有没有办法给 Google Maps API 或类似的 API 一个城镇名称,并让它返回城镇内的随机地址?我希望能够将数据作为 JSON 获取,以便我可以在 XCode 中使用 SwiftyJSON
我将坐标保存在 numpy 数组 x 和 y 中。现在我想要的只是获得一个多边形(分别是点数组),它用给定的宽度参数定义周围区域。 我遇到的问题是我需要一个没有(!)交叉点的多边形。但是,当曲线很窄时
我正在开发井字游戏 (3x3),所以我有 9 个按钮,我想做的是获取用户按下的按钮的坐标,并在按钮的位置插入图像。 例子: @IBOutlet weak var button1Outlet: UIBu
我是一名优秀的程序员,十分优秀!