使用new AMap.Map實(shí)例化地圖，并設(shè)置mapStyle為"amap://styles/grey"，也可以在官網(wǎng)上自己設(shè)計(jì)屬于自己的風(fēng)格，主要講的不是這部分所以大概交代一下就過去了，實(shí)例化Map后返回一個(gè)map實(shí)例，后續(xù)的操作都需要用到。

添加GLCustomLayer圖層

new AMap.GLCustomLayer({
    zIndex: 100,
    init:()=>{},
    render: ()=>{}
})

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 1 << 30);

轉(zhuǎn)換工具提供一個(gè)getCameraParams方法，其中包含相機(jī)位置等其他屬性

fov — 攝像機(jī)視錐體垂直視野角度
near — 攝像機(jī)視錐體近端面
far — 攝像機(jī)視錐體遠(yuǎn)端面

其中大部分屬性都和threejs的透視相機(jī)屬性相同，在render方法中更新相機(jī)，這樣做的作用就是在后續(xù)做巡航功能時(shí)會(huì)實(shí)時(shí)更新相機(jī)位置

camera.near = near;
camera.far = far;
camera.fov = fov;
camera.position.set(...position);
camera.up.set(...up);
camera.lookAt(...lookAt);
camera.updateProjectionMatrix();

createGLCustomLayer方法就是之前定義的初始化AMap.GLCustomLayer方法。返回一個(gè)GLCustomLayer實(shí)例，這樣就可以在地圖內(nèi)插入可視化內(nèi)容。

加載模型

回到new AMap.GLCustomLayer提供的init屬性中，創(chuàng)建一個(gè)3d場(chǎng)景并把模型加載到場(chǎng)景中，

renderer = new THREE.WebGLRenderer({
    context: gl,  // 地圖的 gl 上下文
});

// 自動(dòng)清空畫布這里必須設(shè)置為 false，否則地圖底圖將無法顯示
renderer.autoClear = false;

scene = new THREE.Scene();

// 初始化模型
function initGltf(): Promise<THREE.Object3D> {
    return new Promise((resolve, reject) => {
        var loader = new GLTFLoader();
        loader.load('https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf', (gltf: any) => {
            let object = gltf.scene;
            resolve(object)
        });
    })
}

我在模型上添加了一個(gè)AxesHelper輔助線，官網(wǎng)上表示藍(lán)色代表z軸，但是放在地圖中發(fā)生了坐標(biāo)方向不一致的問題，threejs的向上方向是y軸，地圖中z是向上方向，這一點(diǎn)可能要注意一下了

用于簡(jiǎn)單模擬3個(gè)坐標(biāo)軸的對(duì)象.
紅色代表 X 軸. 綠色代表 Y 軸. 藍(lán)色代表 Z 軸.

旋轉(zhuǎn)模型

const { x, y, z } = setRotation(new THREE.Vector3(90, -90, 0))
group.rotation.set(x, y, z)

export function setRotation(rotation: THREE.Vector3) {
    var x = Math.PI / 180 * (rotation.x || 0);
    var y = Math.PI / 180 * (rotation.y || 0);
    var z = Math.PI / 180 * (rotation.z || 0);
    return new THREE.Vector3(x, y, z)
}

loca.viewControl.addTrackAnimate({
    path: pathArr, // 鏡頭軌跡，二維數(shù)組，支持海拔
    duration: 120000, // 時(shí)長(zhǎng)
    timing: [[0, 0.3], [1, 0.7]], // 速率控制器
    rotationSpeed: 1800, // 每秒旋轉(zhuǎn)多少度
}, function () {
    console.log('完成',);
});

const pathArr = [[116.310348, 39.89702], [116.310541, 39.884855], [116.320963, 39.889154], [116.322894, 39.889608], [116.325542, 39.889822], [116.328074, 39.889761], [116.349104, 39.889429], [116.348517, 39.89747], [116.355205, 39.898413], [116.35656, 39.90021], [116.355802, 39.93225]]

// 導(dǎo)航線
var polyline = new AMap.Polyline({
    path: pathArr,            // 設(shè)置線覆蓋物路徑
    showDir: true,
    strokeColor: '#3366bb',   // 線顏色
    strokeWeight: 10,           // 線寬
    zIndex: 1
});
map.add(polyline)

const render = () => {
    requestAnimationFrame(() => {
        render()
    })
    if (object) {
        const center = map.getCenter()
        var position = customCoords.lngLatsToCoords([
            [center.lng, center.lat]
        ])[0];
        const v3 = new THREE.Vector3(position[1], 0, position[0])
        object.position.copy(v3)
        const rotation = map.getRotation()

        object.rotation.y = rotation * Math.PI / 180
    }
    map.render();
    TWEEN && TWEEN.update()
}

 // 飛線
var geo = new (window as any).Loca.GeoJSONSource({
    url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
});

var layer = new (window as any).Loca.PulseLineLayer({
    // loca,
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [1, 30],
});

var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];

layer.setSource(geo);

layer.setStyle({
    altitude: 0,
    lineWidth: 2,
    // 脈沖頭顏色
    headColor: (_, feature) => {
        return headColors[feature.properties.type - 1];
    },
    // 脈沖尾顏色
    trailColor: 'rgba(128, 128, 128, 0.5)',
    // 脈沖長(zhǎng)度，0.25 表示一段脈沖占整條路的 1/4
    interval: 0.25,
    // 脈沖線的速度，幾秒鐘跑完整段路，可以通過計(jì)算距離動(dòng)態(tài)改變時(shí)間
    duration: 5000,
});
// 飛線結(jié)束

loca.add(layer);