将带有预设投影的 topojson 文件与具有通过 api 加载的点位置的点对齐
Aligning topojson file with preset projection with points with point locations loaded via an api
感谢之前的 我能够使用 geoproject 将我的 geojson 投影设置为 BC Albers。
geoproject 'd3.geoAlbers().parallels([50, 58.5]).rotate([126, 0]).center([0,50.5]).fitSize([960, 600], d)' < "$<" > "$@"
然后我使用空投影将 topojson 加载到 d3
var path = d3.geoPath()
.projection(null);
加载时一切看起来都很好,但是当我通过 api 加载点位置并将投影设置为匹配 topojson 文件时
var projection = d3.geoAlbers()
.rotate([126,0])
.center([0, 50.5])
.parallels([50, 58.5])
.scale(1500)
.translate([960 / 2, 600 / 2]);
这些点没有与背景地图对齐
我的问题是如何排列它们?
我希望能够使用 geoproject 预设投影,但通过 api 加载的点需要动态设置投影。我有一种感觉,这与动态投影中的 .scale()
和地理投影中的 .fitSize()
有关。
你明白了,背景特征中的比例是用 .fitSize
设置的,其中(连同 .fitExtent
:
Sets the projection’s scale and translate to fit the specified GeoJSON
object in the center of the given extent. (API doc).
因此,虽然背景数据的缩放和平移是自动设置的,但您正在尝试手动缩放(和平移)未投影的数据以匹配,而不知道 .fitSize
设置的值。
有几种可能性可以解决这个问题:
第一个选项,也许是最简单的(尽管看起来是倒退),尽管已经对数据进行了投影,但您可以使用开始时使用的未投影数据,并使用与用于点的投影相同的投影对其进行投影.这使您可以一步轻松地根据需要修改点和背景特征,因为所有要显示的特征都将通过相同的投影函数进行传输。
第二个选项是找出需要的投影参数。你知道所有这些,除了缩放和平移,因为你把它留给了方法.fitSize
。
要从 d3 投影中获取任何投影参数,您可以使用不带任何参数的相应方法,因此要获取比例或平移,请使用:
projection.scale(); // k
projection.translate(); // [x,y]
我不确定你是否可以从命令行实现这个,你不能用你用空投影投影的数据来做到这一点(因为它已经被投影并且不需要 d3 投影现在)。但是您可以通过尝试在浏览器中投影未投影的数据来获取背景的比例和平移。只需设置您在命令行上使用的相同投影,然后获取比例和平移值(无需实际绘制任何东西):
var projection = d3.geoAlbers()
.rotate([126,0])
.center([0, 50.5])
.parallels([50, 58.5])
.fitSize([960,500],jsonFeature)
console.log(scale = projection.scale());
console.log(translate = projection.translate());
那么你就缺少了匹配两组数据所需的两个投影参数。
然而,正如我在上面暗示的那样,如果所有需要投影的要素都共享相同的坐标系,则在操作地图时会更容易,所以我倾向于选择选项 1(因为您可以更改图层但不能更改点层的坐标系)。
感谢之前的
geoproject 'd3.geoAlbers().parallels([50, 58.5]).rotate([126, 0]).center([0,50.5]).fitSize([960, 600], d)' < "$<" > "$@"
然后我使用空投影将 topojson 加载到 d3
var path = d3.geoPath()
.projection(null);
加载时一切看起来都很好,但是当我通过 api 加载点位置并将投影设置为匹配 topojson 文件时
var projection = d3.geoAlbers()
.rotate([126,0])
.center([0, 50.5])
.parallels([50, 58.5])
.scale(1500)
.translate([960 / 2, 600 / 2]);
这些点没有与背景地图对齐
我的问题是如何排列它们?
我希望能够使用 geoproject 预设投影,但通过 api 加载的点需要动态设置投影。我有一种感觉,这与动态投影中的 .scale()
和地理投影中的 .fitSize()
有关。
你明白了,背景特征中的比例是用 .fitSize
设置的,其中(连同 .fitExtent
:
Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. (API doc).
因此,虽然背景数据的缩放和平移是自动设置的,但您正在尝试手动缩放(和平移)未投影的数据以匹配,而不知道 .fitSize
设置的值。
有几种可能性可以解决这个问题:
第一个选项,也许是最简单的(尽管看起来是倒退),尽管已经对数据进行了投影,但您可以使用开始时使用的未投影数据,并使用与用于点的投影相同的投影对其进行投影.这使您可以一步轻松地根据需要修改点和背景特征,因为所有要显示的特征都将通过相同的投影函数进行传输。
第二个选项是找出需要的投影参数。你知道所有这些,除了缩放和平移,因为你把它留给了方法.fitSize
。
要从 d3 投影中获取任何投影参数,您可以使用不带任何参数的相应方法,因此要获取比例或平移,请使用:
projection.scale(); // k
projection.translate(); // [x,y]
我不确定你是否可以从命令行实现这个,你不能用你用空投影投影的数据来做到这一点(因为它已经被投影并且不需要 d3 投影现在)。但是您可以通过尝试在浏览器中投影未投影的数据来获取背景的比例和平移。只需设置您在命令行上使用的相同投影,然后获取比例和平移值(无需实际绘制任何东西):
var projection = d3.geoAlbers()
.rotate([126,0])
.center([0, 50.5])
.parallels([50, 58.5])
.fitSize([960,500],jsonFeature)
console.log(scale = projection.scale());
console.log(translate = projection.translate());
那么你就缺少了匹配两组数据所需的两个投影参数。
然而,正如我在上面暗示的那样,如果所有需要投影的要素都共享相同的坐标系,则在操作地图时会更容易,所以我倾向于选择选项 1(因为您可以更改图层但不能更改点层的坐标系)。