2024CCVR：长春市吃什么AI大屏

预览图：

组件1：3d轮播图

参考的如下内容：

【CSS】3D旋转轮播教学_哔哩哔哩_bilibili

组件2：3d词云图

参考的tagcanvas.js：

TagCanvas - an HTML5 Canvas Tag Cloud (goat1000.com)

组件3：滚动图

直接用Claude写的函数，用css控制向上滚动的间距和频率就行

组件4：高德地图

地图模型

地图的创建-生命周期-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

路径规划

位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

写法

值得注意的是，我的地图模型和路径规划复用的同一个map,并不会进行销毁，这样还刚好实现切换路径规划的时候可以无缝切换，看着效果很好。(前面需要全局定义一个securityJsCode)

function initAMap(lng, lat) {
    AMapLoader.load({
        key: "",
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.ControlBar", "AMap.Driving"],
        AMapUI: {
            version: "1.1",
            plugins: []
        },
        Loca: {
            version: "2.0"
        }
    }).then(AMapInstance => {
        AMap = AMapInstance;  // 保存AMap为全局变量
        map = new AMap.Map("map-container", {
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            pitch: 50,
            rotation: -15,
            viewMode: '3D',
            zooms: [2, 20],
            center: [lng, lat],
            mapStyle: 'amap://styles/fresh',
        });

        var controlBar = new AMap.ControlBar({
            position: {
                right: '10px',
                top: '10px'
            }
        });
        controlBar.addTo(map);

        var toolBar = new AMap.ToolBar({
            position: {
                right: '40px',
                top: '110px'
            }
        });
        toolBar.addTo(map);

        mapInitialized = true;
        console.log("Map initialized successfully");
    }).catch(e => {
        console.error("Failed to initialize map:", e);
    });
}

function refreshAMap(newLng, newLat) {
    if (!mapInitialized) {
        console.log("Map not initialized yet, waiting...");
        setTimeout(() => refreshAMap(newLng, newLat), 1000);  // 等待1秒后重试
        return;
    }
    //如果panel中已经有东西，则清空
    panel = document.getElementById('panel');
    panel.innerHTML = '';
    panel.style.display = 'block';
    // 创建驾车路线规划实例
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    });

    // 规划路线
    driving.search(
        new AMap.LngLat(localStorage.getItem('gcj02Longitude'), localStorage.getItem('gcj02Latitude')),
        new AMap.LngLat(newLng, newLat),
        function (status, result) {
            if (status === "complete") {
                console.log("绘制驾车路线完成");
                // 调整地图视野以包含起点和终点
                map.setFitView();
            } else {
                console.log("获取驾车数据失败：" + result);
            }
        }
    );
}