【GIS开发小课堂】高德地图+threejs打造智慧景区大屏

前言

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

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

技术栈

·高德地图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的错误用法。

1、创建高德地图实例

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。

2、绘制地图

在实例创建好以后就该绘制地图了，绘制地图使用实例中的 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黑色主题的风格，当然，你用自己的自定义地图生成的地址也可以放在这里，下面从图中看一下具体创建出一