Azure 地图群集位置差异
Azure maps cluster position discrepancies
我有一个从 ms 端点检索的位置列表,如下所示:
https://atlas.microsoft.com/search/fuzzy/json?top=100&typeahead=true&subscription-key=subscription-key&api-version=1&query=Leeds
然后,用户选择建议的地址之一,然后使用此端点提供的位置显示在使用集群的地图上。因此,以利兹为例,我有以下内容:
-1.548567, 53.801277
但是,当我在创建 HtmlMarkerLayer
时提供的 clusterRenderCallback
函数中创建集群时,我得到的位置接近我提供的 但不同,我不知道如何或为什么。
所以代码看起来像这样:
首先我创建数据源
dataSource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(dataSource);
然后我在 HtmlMarkerLayer
创建中管理集群创建:
clusterRenderCallback: function (id, position, properties) {
var cluster = new atlas.HtmlMarker({
position: position, // different position to that which I have provided
htmlContent: `<div>${properties.point_count_abbreviated}</div>`,
values: properties,
});
map.events.add('click', cluster, clusterClicked);
return cluster;
}
我在这里创建要添加到我的数据源的点:
let features = list.map(x => new atlas.data.Feature(new atlas.data.Point(new atlas.data.Position(x.lon, x.lat)), x));
dataSource.add(features);
例如,我收到的 Leeds 集群的位置是 -1.549072265625、53.80065082633024,尽管我在 Leeds 有 2 个位置,它们都是由相同的坐标构成的:-1.548567、53.801277
似乎在地图集代码中有某种机制 "fixes" 提供的坐标;任何人都知道如何阻止这个或者我在这里做错了什么?
==编辑 02/05==
好的,按照@rbrundritt 的回答,这里是我应该添加的最后一点代码,显示了单击集群后我们做了什么:
function clusterClicked(e) {
var cluster = e.target;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: cluster.getOptions().position,
zoom: zoom
});
});
}
这就是我们遇到这种差异的问题所在 - 单击群集会放大到群集中断的缩放级别;然而,由于我们将地图以集群位置为中心,pin 位置与集群位置不同,在该缩放级别(即 3 左右)的地图中看不到。最重要的是,我们无法知道在这个函数的上下文中,集群对应的引脚是什么,这给我们留下了错误的行为。
簇应该很少有与它们包含的任何点相同的坐标。集群将重叠点组合在一起,平均位置用于在地图上表示该组。当一个集群分解成它的各个点时,该标记将具有原始位置值。
好的,所以我不知道 datasource.getClusterLeaves
方法返回了什么(我只是把叶子误认为是动词离开)。这就是我一直在寻找的,所以我的代码现在看起来像这样:
function inSamePosition(pos1, pos2) {
return pos1.data.geometry.coordinates[0] == pos2.data.geometry.coordinates[0]
&& pos1.data.geometry.coordinates[1] == pos2.data.geometry.coordinates[1];
}
function clusterClicked(e) {
var cluster = e.target;
(cluster.properties.cluster_id, Number.POSITIVE_INFINITY, 0).then(pins => {
let position = pins.every(p => inSamePosition(p, pins[0])) ? pins[0]['data'].geometry.coordinates : null;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: position ? position : cluster.getOptions().position,
zoom: zoom
});
});
})
}
我有一个从 ms 端点检索的位置列表,如下所示:
https://atlas.microsoft.com/search/fuzzy/json?top=100&typeahead=true&subscription-key=subscription-key&api-version=1&query=Leeds
然后,用户选择建议的地址之一,然后使用此端点提供的位置显示在使用集群的地图上。因此,以利兹为例,我有以下内容:
-1.548567, 53.801277
但是,当我在创建 HtmlMarkerLayer
时提供的 clusterRenderCallback
函数中创建集群时,我得到的位置接近我提供的 但不同,我不知道如何或为什么。
所以代码看起来像这样:
首先我创建数据源
dataSource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(dataSource);
然后我在 HtmlMarkerLayer
创建中管理集群创建:
clusterRenderCallback: function (id, position, properties) {
var cluster = new atlas.HtmlMarker({
position: position, // different position to that which I have provided
htmlContent: `<div>${properties.point_count_abbreviated}</div>`,
values: properties,
});
map.events.add('click', cluster, clusterClicked);
return cluster;
}
我在这里创建要添加到我的数据源的点:
let features = list.map(x => new atlas.data.Feature(new atlas.data.Point(new atlas.data.Position(x.lon, x.lat)), x));
dataSource.add(features);
例如,我收到的 Leeds 集群的位置是 -1.549072265625、53.80065082633024,尽管我在 Leeds 有 2 个位置,它们都是由相同的坐标构成的:-1.548567、53.801277
似乎在地图集代码中有某种机制 "fixes" 提供的坐标;任何人都知道如何阻止这个或者我在这里做错了什么?
==编辑 02/05==
好的,按照@rbrundritt 的回答,这里是我应该添加的最后一点代码,显示了单击集群后我们做了什么:
function clusterClicked(e) {
var cluster = e.target;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: cluster.getOptions().position,
zoom: zoom
});
});
}
这就是我们遇到这种差异的问题所在 - 单击群集会放大到群集中断的缩放级别;然而,由于我们将地图以集群位置为中心,pin 位置与集群位置不同,在该缩放级别(即 3 左右)的地图中看不到。最重要的是,我们无法知道在这个函数的上下文中,集群对应的引脚是什么,这给我们留下了错误的行为。
簇应该很少有与它们包含的任何点相同的坐标。集群将重叠点组合在一起,平均位置用于在地图上表示该组。当一个集群分解成它的各个点时,该标记将具有原始位置值。
好的,所以我不知道 datasource.getClusterLeaves
方法返回了什么(我只是把叶子误认为是动词离开)。这就是我一直在寻找的,所以我的代码现在看起来像这样:
function inSamePosition(pos1, pos2) {
return pos1.data.geometry.coordinates[0] == pos2.data.geometry.coordinates[0]
&& pos1.data.geometry.coordinates[1] == pos2.data.geometry.coordinates[1];
}
function clusterClicked(e) {
var cluster = e.target;
(cluster.properties.cluster_id, Number.POSITIVE_INFINITY, 0).then(pins => {
let position = pins.every(p => inSamePosition(p, pins[0])) ? pins[0]['data'].geometry.coordinates : null;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: position ? position : cluster.getOptions().position,
zoom: zoom
});
});
})
}