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>

로그인 후 복사

코드를 HTML 파일로 저장한 후 브라우저에서 열어야 지도의 3D 건물 표시 기능을 볼 수 있습니다.

요약:

이 글에서는 JavaScript와 Tencent Map API를 사용하여 지도 3D 건물 표시 기능을 구현하는 방법을 소개하고 자세한 코드 예제를 제공합니다. 위와 같은 구현을 통해 사용자는 지도상의 건물 정보를 더 잘 이해할 수 있으며 사용자 경험과 참여도를 높일 수 있습니다.

위 내용은 JavaScript 및 Tencent Maps를 사용하여 지도 3D 건물 표시 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!