百度地图APIの高速利用と多数の座標点追加手法

迅速な導入

注意：この記事のコードは百度地图 JavaScript API v3.0 を前提としています。GLバージョンでは若干異なる場合があります。

地図において重要な要素は緯度経度です：経度：英語longitudeの略称lng；緯度：英語latitudeの略称lat

基本的な利用方法

百度地図APIを使用する前に、まずAPIキー（ak）が必要です。取得していない場合は無料で申請できます。 1.jsをインポートします（このakはmapvのサンプルに使用されているものです。テストが必要な方はご自由にご利用ください）

<script src="//api.map.baidu.com/api?v=3.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>

またはnpmを使用

$ npm install vue-baidu-map

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'あなたのキー'
})

2.地図の初期化

<template>
  <div class="map-box" style="height:100%">
    <!-- コンテナを準備 -->
    <div class="baidu-map" id="baiduMap"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // base64でカスタム座標画像
            bluePoint:
                "data:image/png;base64,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"
        }
    },
    methods: {
        init() {
            const map = new BMap.Map('baiduMap', {
                // 地図がクリック可能かどうか
                enableMapClick: false,
                // 座標タイプ 3はgcj02座標、5はbd0ll座標、デフォルトは5
                // 座標が正しいのに表示されない、または位置がずれる場合はタイプを確認してください
                coordsType: 5
            })
            // 1つの点オブジェクト、座標と名前を含む
            const center = {
                name: '温州市人民政府',
                lng: '120.705832',
                lat: '28.00032'
            }
            // 地理座標を初期化するオブジェクト
            const point = new BMap.Point(center.lng, center.lat)
            // 地図を初期化し、点を地図の中心に設定し、初期ズームレベルを設定
            map.centerAndZoom(point, 12)

            // その他の地図設定
            map.enableScrollWheelZoom(true)    // マウスホイールでのズームを有効化
            map.enableDragging()  // ドラッグ
        }
    },
    mounted() {
        this.init()
    }
}
</script>

これで百度地図が表示されるが、他の要素は含まれていない。

ポイント（マーカー）の追加

百度地図で追加されるポイントはオーバーレイと呼ばれます。多くのオーバーレイを追加できます：

オーバーレイを追加するにはaddOverlay()メソッドを使用します。以下は単一ポイントを追加する方法です：

makePoint(map, data) {
    // Point(lng: Number, lat: Number) 経度が最初
    const MAPPoniter = new BMap.Point(data.lng, data.lat)
    // イメージマーカーのインスタンスを作成します。デフォルトスタイルは赤い点です。設定可能です
    // ここではdataのbase64の青い点画像に設定します
    const blueIcon = new BMap.Icon(this.bluePoint, new BMap.Size(32, 38))
    const MAPMarker = new BMap.Marker(MAPPoniter, { icon: blueIcon })

    // ラベルを設定します。内容、オフセット
    const label = new BMap.Label(data.name, {
        offset: new BMap.Size(-27, 32)
    })
    // ラベルスタイル
    label.setStyle({
        border: 'none',
        background: '#ACACAC',
        fontSize: 20,
        fontWeight: 'bold',
        color: 'red'
    })
    // ラベルを設定
    MAPMarker.setLabel(label)

    // ホバー時に表示されるポイント名を設定
    MAPMarker.setTitle(data.name)

    // クリックイベントリスナー
    MAPMarker.addEventListener('click', function (e) {
       console.log(e)
    })

    // 地図にオーバーレイを追加
    map.addOverlay(MAPMarker)
}

通常はsetLabelとsetTitleのどちらか一方を設定します。情報を直接表示したい場合はsetLabelを使用します。 init()の中でこのメソッドを呼び出します：

init(){
   ...
   this.makePoint(map, center)
}

コントロールの追加

百度地図では縮尺コントロールやズームコントロールなどの補助コントロールを追加できます。

init(){
    // ......以前のコードを省略
    // ズームコントロールを追加
    const navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL
    })
    map.addControl(navigation)
}

注： eslintがBMAP_ANCHOR_BOTTOM_RIGHTが文字列であると警告する可能性がありますが、これらの大文字定数設定は文字列を使用しないでください。そうしないと機能しません。

地図左下のアイコンを非表示にする

CSSを使用してアイコンを非表示にできますが、スタイルをscoped内に置かないように注意してください：

<style lang="less" scoped>
.baidu-map {
  width: 100%;
  height: 100%;
}
</style>

<style>
.anchorBL a {
  display: none;
}

.anchorBL img {
  display: none;
}

.anchorBL span {
  display: none !important;
}
</style>

多数のポイントを処理する方法

数個のポイントや数十個のポイントは上記の方法で十分です。しかし、数千や数万のポイントがある場合はどうでしょうか？直接forループを使用しても良いですが、ブラウザが一時的に応答しなくなる可能性があります。そのため、以下の方法を使用し、それぞれの利点と欠点を考慮して状況に応じて選択してください。

まずポイントの形式を定義します：

[
  {
    "name": "温州张和堂医药连锁有限公司兴元店",
    "lng": "120.763505",
    "lat": "27.96839093"
  },
  {
    "name": "温州万康大药房有限公司",
    "lng": "120.7530476",
    "lat": "27.97953802"
  }
]

ポイントクラスタリング

ポイントクラスタリングの効果は、密集した複数のポイントを1つの大きなポイントに集約し、数を示すことで、クリックすると拡大できるようになります。詳細は後の図をご覧ください。 index.htmlにインポートします。百度地図関連のツールライブラリ：

<script src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

ポイントクラスタリングの実装方法：

makePolyPoints(map, data) {
    const MAPMarkers = []
    map.clearOverlays()
    data.forEach(point => {
        const MAPMarker = new BMap.Marker(new BMap.Point(point.lng, point.lat))
        MAPMarker.setTitle(point.name)
        MAPMarkers.push(MAPMarker)
        // ポイントオブジェクトに属性を追加し、クリックリスナーでその属性を取得できます
        MAPMarker.zbbm = 'xxxxx'
        MAPMarker.addEventListener('click', function (e) {
            console.log('座標コード:', e.target.zbbm)
        })
    })
    if (map.markerClusterer) {
        map.markerClusterer.clearMarkers()
    }
    // ポイントクラスタリングを使用
    map.markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: MAPMarkers
    })
}

init()で呼び出すだけで使用できます。labelとカスタムアイコンiconが必要な場合は、単一ポイントを追加する方法と同様です。

大量のポイント

大量のポイントはポイントをクラスター化せず、すべて表示します。ただし、この方法の欠点はカスタムアイコンを使用できないことです。公式が提供する予設形状のみを使用できます。

大量ポイントを使用するには以下のライブラリをインポートする必要があります：

<script src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

大量ポイントの実装方法：

makeCollectionPoints(map, data) {
    map.clearOverlays()
    // canvasサポートの確認（大量ポイント）
    if (document.createElement('canvas').getContext) {
        // 座標点データ配列
        var points = []
        for (var point of data) {
            points.push(new BMap.Point(point.lng, point.lat))
        }
        // 大量ポイントの設定属性
        // アイコン設定：サイズ、形状、色
        const options = {
            size: BMAP_POINT_SIZE_NORMAL,
            shape: BMAP_POINT_SHAPE_STAR,
            color: 'yellow'
        }
        // 大量ポイントの初期化
        const pointCollection = new BMap.PointCollection(points, options)
        pointCollection.addEventListener('click', function (e) {
            console.log(e)
        })
        map.addOverlay(pointCollection)
    } else {
        alert('ブラウザがサポートされていません。chrome、safari、IE8+以上をお使いください')
    }
}

ShapeTypeの予設形状：

定数	説明
BMAP\_POINT\_SHAPE\_CIRCLE	円形、デフォルト形状
BMAP\_POINT\_SHAPE\_STAR	星形
BMAP\_POINT\_SHAPE\_SQUARE	四角形
BMAP\_POINT\_SHAPE\_RHOMBUS	菱形
BMAP\_POINT\_SHAPE\_STAR	菱形
BMAP\_POINT\_SHAPE\_WATERDROP	水滴状、この型はsizeとcolor属性を持ちません
その他の具体的なパラメータ設定については：百度地图 javascript 3.0 apiを参照

mapvの使用

mapvは百度地図公式が提供する地理情報可視化オープンソースライブラリであり、多数の座標点の追加にも使用できます。

公式API

canvasを使用して地図上にレイヤーを追加し、速度とカスタムアイコンを保証します。まずmapvライブラリをインポートします$npm install mapv、または：

<script src="//mapv.baidu.com/build/mapv.min.js"></script>

ポイントデータ形式

[
    {
        geometry: {
            type: 'Point',
            coordinates: [123, 23]
        },
        fillStyle: 'red',
        size: 30
    },
    {
        geometry: {
            type: 'Point',
            coordinates: [121, 33]
        },
        fillStyle: 'rgba(255, 255, 50, 0.5)',
        size: 90
    }
]

設定項目の説明

{
    zIndex: 1, // レイヤー順序
    size: 5, // サイズ値
    fillStyle: 'rgba(200, 200, 50, 1)', // 塗りつぶし色
    strokeStyle: 'rgba(0, 0, 255, 1)', // 枠線色
    lineWidth: 4, // 枠線幅
    globalAlpha: 1, // 不透明度
    globalCompositeOperation: 'lighter', // 色の重ね方
    shadowColor: 'rgba(255, 255, 255, 1)', // 影色
    shadowBlur: 35,  // 影のぼかしレベル
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    lineCap: 'butt',
    lineJoin: 'miter',
    miterLimit: 10
}

mapvによる大量ポイントの追加方法：

makeMapvPoints(map, data) {
    if (document.createElement('canvas').getContext) {
        // カスタム座標点画像を使用
        var img = new Image()
        img.src = this.bluePoint

        // mapv設定項目を作成
        const iconOpt = {
            draw: 'icon',
            width: 32,
            height: 38,
            methods: {
                click: item => {
                    if (item) console.log(item)
                }
            }
        }

        // 画像読み込み後にレイヤーを作成することでカスタムアイコンを使用可能
        img.onload = function () {
            // ポイント座標の配列
            const dataSet = []
            // dataset形式のデータを構築
            data.forEach(point => {
                const geometry = {}
                geometry.type = 'Point'
                geometry.coordinates = [point.lng, point.lat]
                dataSet.push({
                    geometry,
                    icon: img,
                    tag: { name: point.name }
                })
            })

            const mapSet = new mapv.DataSet(dataSet)
            // dataSet.set(data) // データ変更

            // オーバーレイレイヤー
            const mapvLayer = new mapv.baiduMapLayer(map, mapSet, iconOpt)
            // レイヤーを表示
            mapvLayer.show()
            // mapvLayer.hide() // レイヤー非表示
        }
    } else {
        alert('ブラウザがサポートされていません。chrome、safari、IE8+以上をお使いください')
    }
}

注意：

カスタムアイコンiconを使用する際には、必ずwidthとheightまたはsizeを設定してください。設定しないと座標ポイントのクリックイベントが発生しません。
クリックイベントコールバックを使用する際には、コールバックのパラメータがnullかどうかを確認してください。このイベントは常にトリガーされます（座標クリックなしでも）。座標がない場合はnull、ある場合は非空になります。

補足

地理座標検索 - 座標拾取システム

タグ: 百度地图 JavaScript API 地図可視化ポイントクラスタリング大量ポイント

7月26日 00:08 投稿

異端開発室