Gaode API JSマップは複数の座標点の中心点を取得します

1. 需要

する必要がある：

地図上に複数の場所を表示する
地図は適切なサイズに拡大され、すべての地点が適切に表示されることが必要です
端の周りにスペースを残します。

写真のように作ります。
ここに画像の説明を挿入

ここに画像の説明を挿入

2. 使用する必要がある AMap クラスライブラリ

午後の研究の後、私はそれを理解しました。

次の AMap クラスライブラリが必要です。

AMap.Bounds()エリア
AMap.LngLat()点座標(基点)
AMap.setBounds()マップエリアを設定します。これにより、マップ画面がこのエリアに自動的に移動します

Gaode Map API Bounds の公式ドキュメント:
https://lbs.amap.com/api/javascript-api-v2/documentation#bounds

ここに画像の説明を挿入

3、悟る

たとえば、このような点の配列がある場合、それを上記の要件に従って地図上に表示する必要があります。

[
	{
    
    "name":"大明湖","position":[117.023666,36.67672],"note":"","type":"","img":""},
	{
    
    "name":"济南五龙潭","position":[117.014772,36.665984],"note":"","type":"","img":""},
	{
    
    "name":"济南高新万达","position":[117.128471,36.686068],"note":"","type":"","img":""},
	{
    
    "name":"济南宜家","position":[116.928408,36.663449],"note":"","type":"","img":""},
	{
    
    "name":"济南华山风景区","position":[117.070015,36.728507],"note":"","type":"","img":""}
]

1. ポイントを最大限に活用する

領域を記述するには、領域の対角線上の 2 点の座標値が必要です。

これらの点の最大値を見つける必要があります。

メソッドを書きました

/**
 * 获取区域对角线的两点坐标，即这个区域内的最小坐标值和最大坐标值
 *
 * @param pointerArray [[a,b],[c,d]]
 * @return Array {min:number[a,b], max:number[c,d]}
 */
getMaxBoundsPointer(pointerArray){
    
    
    let lngArray = pointerArray.map(item => item[0])
    let latArray = pointerArray.map(item => item[1])

    return {
    
    
        min: [Math.min(...lngArray),  Math.min(...latArray)],
        max: [Math.max(...lngArray),  Math.max(...latArray)],
    }
},

これらの点の配列を受け取ります。形式は[[a,b],[c,d]]次のとおりです。

let maxLocations =  this.getMaxBoundsPointer(pointer.pointerArray.map(item => item.position))

得られた結果は次のとおりです。

ここに画像の説明を挿入

2. 適切なマップ境界距離を計算します。

これらのポイントを表示するときに、上記の領域を使用すると、いくつかのポイントが地図の端まで走っていることがわかります。
これは私たちが望んでいることではないので、境界値を追加する必要があります。

注:
これらの点の距離は不確実であり、数百メートルの場合もあれば、数十キロメートルの場合もあるため、適切な境界距離は固定値ではありません。
上記は単なる点のセットの表示であり、距離間隔が固定されていない他の点のセットにも適応させる必要があります。

したがって、計算を使用してmaxLocationsこの領域の長さと幅を計算し、それを1/4境界として使用する必要があります。これにより、表示がより合理的になります。

// 取区间的 1/4 作为地图的边界
let lngGap = (maxLocations.max[0] - maxLocations.min[0]) / 4
let latGap = (maxLocations.max[1] - maxLocations.min[1]) / 4

3. 新しいゾーン値を計算します。

新しい面積値は、元の極座標に前のステップで計算された境界値を加えたものに基づく必要があります。

// 新的区域极点坐标
let min = new AMap.LngLat(maxLocations.min[0] - lngGap, maxLocations.min[1] - latGap)
let max = new AMap.LngLat(maxLocations.max[0] + lngGap, maxLocations.max[1] + latGap)

4. マップの境界を設定します

マップの境界を設定します。

点配列の数が複数点の場合は、上記の方法で面積値を取得し、設定します。AMap.setBounds()
点配列の数が点の場合、その点を地図の中心点とし、AMap.setCenter()中心点を次のように設定します。
ポイント数が0の場合は処理なし

// 1. 多个点时，设置 bounds
if (pointer.pointerArray.length > 1){
    
    
    let bounds = new AMap.Bounds(min, max)
    this.map.setBounds(bounds)
}
// 2. 一个点时，将其作为中心点
else if (pointer.pointerArray.length === 1){
    
    
    console.log(pointer.pointerArray)
    let centerLngLat = new AMap.LngLat(...pointer.pointerArray[0].position)
    this.map.setCenter(centerLngLat)  // 设置地图中心点坐标
}
// 3.
else {
    
    

}

４、完成した作品

完成した例:

https://kylebing.cn/tools/map/#/pointer/pointer-viewer

ここに画像の説明を挿入