高德地图+threejs打造智慧景区大屏

原文地址

前言

本项目是一个智慧景区（商场）项目，项目主旨在于对景区的智能化管理，是对AI赋能的具象化，告别传统后台管理模式，从大屏中可以实现一个完整景区（商场）的集中化管理，可以对景区内部设施，店铺、人流量和人物画像进行精准分析。也可以配合智能相机、智慧消防对景区（商场）内的人防安全进行远程管理，现在杭州的景区公共卫生间也都实现智能化，甚至你可以在游客端（模拟的，现在所有内容都在同一个大屏）看到距离你最近的卫生间还剩几个坑儿，景区智慧大屏只是一个载体，集成的智慧体越多，大屏的功能就越强大。

本项目代码使用umi+react+高德地图amap+threejs开发的一款景区管理项目，其中模型使用svg文件并嵌入高德地图中，实现新增景区、绑定店铺、绑定点位设施等功能，使用高德地图的导航功能，可以直接导航到景区内。页面内容包含景区的创建和景区大屏展示，在大屏展示中可以对商铺和点位进行绑定，另页面中集成了coze的ai智能系统，可进行对话，绑定商铺活动或者一些可自动化生产的内容，将在视频演示中详细讲解。

视频介绍地址

jvideo

源码下载

体验地址

下面跟着作者一步一步来实现吧~

技术栈

• 高德地图AMAP
• THREE.JS
• indexDB
• react + UMI

环境

• nodejs: v18.19.0
• umi: 4.1.8
• react: 18.0.33
• threejs: 0.152.2
• @amap/amap-jsapi-loader: “^1.0.1”

高德地图部分

@amap/amap-jsapi-loader 是高德官网提供的地图JSAPI加载器，可以避免多种异步加载API的错误用法

创建高德地图实例

import AMapLoader from '@amap/amap-jsapi-loader';
export const CreateAMap = () => {
   
    return new Promise((resolve, reject) => {
   
        // 申请好的Web端开发者Key，首次调用 load 时必填
        AMapLoader.load({
   
            "key": "**************", 
            "version": "2.0",
             // 需要使用的的插件列表，如比例尺'AMap.Scale'等，
            "plugins": ["AMap.Walking", "AMap.Driving"],
            "Loca": {
   
                version: '2.0.0'
            },
          
        }).then(async (res) => {
   
            resolve(res)
        }).catch((error) => {
   
            reject(error)
        })
    })

}

在使用高德地图的时候，需要成为开发者并创建一个 Key，在构建AMAP实例还需要以下几个必要的元素，版本号2.0，plugins插件，项目中用到了AMap.Walking 步行规划，当然你可以加入自己想要的插件，比如AMap.Driving 驾驶路线规划。Loca是用于可视化内容的，比如灯光、镜头、路径等元素。

现在地图实例创建好了，那么我们开始创建地图，首先我这里选择的主题是系统默认的黑色3d主题地图，如果想要一个完全属于自己风格的地图可以在官网的 自定义地图服务中创建（需要额度）

调用

useAsyncEffect(async () => {
   
    AMapRef.current = await CreateAMap()
    if (containerRef.current) {
   
        createMap()
    }
}, [])

将AMAP实例存放在AMapRef.current中，在后面的方法中都可以使用，并且在containerRef.current存在的时候绘制地图，containerRef.current是将要绘制地图的容器，id为container

绘制地图

在实例创建好以后就该绘制地图了，绘制地图使用实例中的 AMAP.Map方法，接受两个参数，第一个是地图容器，第二个是配置项：new AMap.Map(div: (String | HTMLDivElement), opts: MapOptions)

const createMap = async () => {
   
    let AMap = AMapRef.current
    // 创建地图
    var map = new AMap.Map("container", {
   
        resizeEnable: true,
        center: [119.986, 30.2235],//地图中心点
        zoom: 17.4, //地图显示的缩放级别
        viewMode: '3D',//开启3D视图,默认为关闭
        buildingAnimation: true,//楼块出现是否带动画
        pitch: 45,
        rotation: 45,
        features: ['bg', 'building'], // 只显示建筑、道路、区域
        // showLabel: false,  // 隐藏标注信息
        mapStyle: "amap://styles/grey",
        showIndoorMap: false,
        // rotateEnable: false,
        // pitchEnable: false,
        zIndex: 9
    });
    mapRef.current = map

    var loca = new (window as any).Loca.Container({
   
        map,
        zIndex: 9
    });
    locaRef.current = loca

    ……
}

以上配置项都是基础需要配置的，可以参照官网上面的介绍进行配置，这里需要说明一点是features和viewMode一个是过滤标注信息，项目中去掉了其他的元素，只展示了建筑和背景，而mapStyle则是官网提供的一个3d黑色主题的风格，当然，你用自己的自定义地图生成的地址也可以放在这里，下面从图中看一下具体创建出一个什么样的地图

从图中可以看到一个类似矩形的区域，那个就是本次要做的景区——闲林埠，下一步就是要将自制的景区模型加载到高德地图中

首先说明，本人不是UI，只是一个技术死宅，对于美术上的事儿一窍不通，在做的过程中，就有一种感觉，我加入的3d景区，还不如高德原本的模型好看~，勿喷

清除多余楼块

从地图中可以看出，3d地图中已经存在了很多默认的模型，那么咱们如果将自己的模型加入进去就会互相影响，所以我们首先要做的就是清除景区区域原有的模型 使用高德提供的官方图层AMap.Buildings，在官网中可以找到围栏的功能styleOpts.areas，去除原有模块就使用这个api实现的。

export const cleanBuild = (AMap: any, map: