JavaScriptとTencent Mapsを利用して地図3D建物表示機能を実装-jsチュートリアル-php.cn

JavaScriptとTencent Mapsを利用して地図3D建物表示機能を実装

王林

リリース： 2023-11-21 16:12:46

オリジナル

1691 人が閲覧しました

JavaScriptとTencent Mapsを利用して地図3D建物表示機能を実装

JavaScript と Tencent Maps を使用して、地図の 3D 建物表示機能を実装します。

地図アプリケーションの開発において、3D 建物表示機能を使用すると、ユーザーはより良い操作を行うことができます。ユーザーエクスペリエンスとエンゲージメントを向上させるために、地図に表示される場所を理解します。この記事では、JavaScript と Tencent Map API を使用して地図 3D 建物表示機能を実装する方法と詳細なコード例を紹介します。

ステップ 1: Tencent Map API を構成する

まず、Tencent Map API の JavaScript ファイルをページに導入し、対応する API キーを取得する必要があります。 API キーは、Tencent Map Open Platform のアプリケーションページから取得できます。

Tencent Map API をページに導入する JavaScript ファイルのコードは次のとおりです:

<script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

ログイン後にコピー

YOUR_KEY を API キーに置き換える必要があることに注意してください。

ステップ 2: マップオブジェクトを作成する

次に、マップ情報と建物の 3D モデルを表示するために、ページ内にマップオブジェクトを作成する必要があります。マップオブジェクトは、QQ が提供するマップコンストラクターを通じて作成できます。

マップオブジェクトを作成するコードは次のとおりです。

// 创建地图对象
var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128),   // 地图中心点
    zoom: 16,   // 地图缩放级别
    mapTypeId: qq.maps.MapTypeId.ROADMAP,  // 地图类型
    disableDefaultUI: true, // 隐藏地图默认控件
    zoomControl: true,  // 显示缩放控件
    mapControl: true    // 显示地图类型控件
});

ログイン後にコピー

マップオブジェクトを作成するには、中心点、ズームレベル、その他の情報などのいくつかのパラメーターを渡す必要があります。この例では、中心点は北京の中心に設定され、ズームレベルは 16、マップタイプは ROADMAP (通常のマップ)、マップの既定のコントロールは非表示になり、ズームコントロールとマップタイプコントロールのみが表示されます。が表示されます。

ステップ 3: 3D 建物モデルを作成する

地図上に 3D 建物モデルを表示するには、QQ が提供する 3DTilesLayerAPI を使用する必要があります。 3DTilesLayer オブジェクトを作成するときは、モデルや照明などのパラメーターを渡してモデルを作成する必要があります。

3D 建築モデルを作成するコードは次のとおりです。

// 创建3D建筑模型
var buildingLayer = new qq.maps.ThreeDTilesLayer({
    map: map,
    visible: true,
    url: "https://yingyan.baidu.com/demo/3dtile/106Building/tileset.json",
    light: {
        type: "BRIGHT",
        position: [-200, 10, 200],
        color: "#FFFFFF",
        intensity: 1.0
    }
});

ログイン後にコピー

url パラメーターは、3D 建築モデルの JSON 記述ファイルの場所を指定するために使用され、照明パラメーターは次のとおりです。モデルの照明を設定するために使用されます。

ステップ 4: インタラクティブイベントを追加する

ユーザーエクスペリエンスと参加性を高めるために、マウスをホバーしたときに建物に関する関連情報を表示するなど、いくつかのインタラクティブイベントを追加する必要があります。

インタラクティブイベントを追加するコードは次のとおりです:

// 添加鼠标悬停事件
qq.maps.event.addListener(buildingLayer, 'mousemove', function (event) {
    var position = event.latLng,
        height = buildingLayer.getHeightAtLatLng(position),
        infoWindow = new qq.maps.InfoWindow({
            map: map,
            position: position,
            content: "<div style='font-weight:bold;font-size:14px;'>该建筑高度为：" + height.toFixed(2) + "米</div>"
        });
    infoWindow.open();
});

ログイン後にコピー

上記のコードでは、qq.maps.event.addListener() 関数を使用して 3DTilesLayer の Mousemove イベントをリッスンします。物体。イベントがトリガーされると、マウスの位置の地理座標を取得し、getHeightAtLatLng() 関数を通じてポイントの高さを取得し、最後に地図上に建物情報を表示します。

完全なコード例は次のとおりです。



    
        
        地图3D建筑展示
        
        <script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
        <script>
            window.onload = function() {
                // 创建地图对象
                var map = new qq.maps.Map(document.getElementById("map"), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                    zoom: 16,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    zoomControl: true,
                    mapControl: true
                });
                // 创建3D建筑模型
                var buildingLayer = new qq.maps.ThreeDTilesLayer({
                    map: map,
                    visible: true,
                    url: "https://yingyan.baidu.com/demo/3dtile/106Building/tileset.json",
                    light: {
                        type: "BRIGHT",
                        position: [-200, 10, 200],
                        color: "#FFFFFF",
                        intensity: 1.0
                    }
                });
                // 添加鼠标悬停事件
                qq.maps.event.addListener(buildingLayer, 'mousemove', function (event) {
                    var position = event.latLng,
                        height = buildingLayer.getHeightAtLatLng(position),
                        infoWindow = new qq.maps.InfoWindow({
                            map: map,
                            position: position,
                            content: "<div style='font-weight:bold;font-size:14px;'>该建筑高度为：" + height.toFixed(2) + "米</div>"
                        });
                    infoWindow.open();
                });
            }
        </script>

ログイン後にコピー

マップの 3D 建物表示機能を確認するには、コードを HTML ファイルとして保存し、ブラウザーで開く必要があります。

概要:

この記事では、JavaScript と Tencent Map API を使用して地図 3D 建物表示機能を実装する方法を紹介し、詳細なコード例を示します。上記の実装により、ユーザーは地図上の建物情報をより深く理解し、ユーザーエクスペリエンスと参加性を高めることができます。

以上がJavaScriptとTencent Mapsを利用して地図3D建物表示機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。