在当今数字化时代，二三维数据融合技术的重要性不言而喻。二三维数据融合通过整合二维数据的结构化优势与三维数据的直观性，打破了传统数据在表达和分析上的局限，为各行业提供了更全面、精准的数据分析手段。从智慧城市建设到工业智能制造，从智能交通管理到应急救援与灾害预警，该技术在众多关键领域发挥着重要作用。

Mapmost应用案例

此前我们已分别介绍仅涉及二维数据的二维数据融合，以及主要针对三维模型的三维模型融合方法。不同于这两种单一维度的数据处理方式，本篇将基于Mapmost项目，让我们探讨同时整合二维与三维数据优势的融合方法及其一些常见的应用点。

_一、_利用二维数据增强三维场景的表现力

在一些智慧楼宇项目实施过程中，若场景范围较小，从视觉效果来看，会显得场景内容不够丰富。这种情况下，为了提升视觉效果和项目的整体展示质量，我们可以获取周边建筑的Shapefile数据。通过在专业软件中读取这些数据，快速生成大批量的建筑白模，以此来丰富场景内容，使整个项目在视觉上更加饱满。

基于Mapmost打造的某智慧园区项目

白模也可以具备出色的使用效果，例如做成半透明的白模。

_二、_使用二维数据快速精确摆放三维模型

对模型点位精度要求较高的场景，比如在智慧交通类项目中，行道树模型需要按照采集到的点位进行摆放。结合使用Mapmost SDK for UE的编辑器工具，读取到采集的数据GeoJSON数据，在场景中批量性准确的生成行道树。

Mapmost SDK for UE 批量精确生成行道树

_三、_使用二维数据精准生成标注

在智慧园区类项目中，我们常常需要在各类建筑、设备等三维模型上进行标注POI或标注Marker，以便更好地展示和管理相关信息。通常，我们会利用对应的二维数据来批量化生成这些标注，以提高工作效率和数据准确性。为了进一步提升展示效果，除了可以对数据进行加工处理，实现让标注能够按照图层显示或隐藏的功能外，还可以通过做避让效果来优化标注的显示效果。

Mapmost SDK for WebGL智慧园区开源案例

_四、_基于二维数据定位车辆实时位置

在一些交通类项目中，可能需要使用数据驱动的方式来模拟或监控车辆的行驶情况。系统会实时获取车辆的GPS定位数据，这些数据来自车载传感器、移动应用程序或其他跟踪系统。获取到数据后，需要对其进行清洗和转换，以确保数据的准确性和一致性。

接下来，处理后的数据会被传输到交通仿真或监控系统中。在这个系统里，通过将矢量数据与三维建模技术相结合，按照实际道路网络和地理环境一比一地构建虚拟场景。系统可以精确地还原当前车辆的行驶轨迹，包括车辆的实时位置、行驶方向、速度等信息。

Mapmost智慧机场使用二维数据实时定位加油车位置

_五、_基于二维数据实现倾斜分区展示、单体化高亮

在使用倾斜摄影测量数据的项目中，可以根据二维数据来实现分区展示、单体化高亮。例如，在城市规划项目里，利用二维地理信息数据，按照行政区划或功能区域对三维倾斜模型进行划分与展示；当需要突出显示某一栋建筑或某条道路等单个地理实体时，借助二维数据中的属性信息，对三维模型中的对应单体进行高亮处理，以便于在复杂模型中快速定位与分析特定对象。

分区展示

倾斜摄影模型单体化效果

二三维数据融合技术就像一个神奇的桥梁，把二维数据和三维模型紧密地连接起来。通过它，我们不仅能用二维数据增强三维场景的表现力，还能快速精确地摆放三维模型，精准生成标注，甚至实时定位车辆位置。

Mapmost产品在这些方面表现出色，支持多种数据格式，操作简单，是二三维数据融合的优秀选择，在模型摆放、标注生成和车辆定位上，Mapmost精准又便捷，能够显著提升项目实施的效率和质量。无论是复杂的城市规划项目，还是精细的交通管理场景，Mapmost都能提供高效、精准且直观的解决方案，为项目的成功实施保驾护航。

关注 Mapmost，持续更新 GIS、三维美术、计算机技术干货

Mapmost 是一套以三维地图和时空计算为特色的数字孪生底座平台，包含了空间数据管理工具（Studio）、应用开发工具（SDK）、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态

在项目开发过程中，近期对项目进行了双页面配置，针对两个不同页面分别单独配置了路由。然而，在单独启动新页面（该页面模块数量较少）时，却发现启动耗时较长。经过深入排查，最终确定是以下这行代码导致了该问题：

return () => import(`@/pages/PRD/views/${realPath}`);

Webpack 在遇到import()语法时，会依据给定路径将所有符合条件的模块进行打包。由于上述导入代码的最后一个部分是变量，对于 Webpack 而言，这等同于@/pages/PRD/views/**/*，因此 Webpack 会将 views 目录下的所有模块及其相关依赖一同打包。

为深入探究 Webpack 对import的处理机制，我创建了一个项目，并针对不同情况进行打包测试，最终得出以下结论：

// `import`的参数不能是完全动态的语句，例如`import(util)`是不被允许的，至少需要包含部分模块路径信息，以便Webpack确定打包范围。
const component = () => {
  const path = "xxx";
  return import(path); 
}
// 这种导入方式会将xxx目录下的所有组件和js文件都进行打包。
const componentB = (name) => {
  const component = "component" + name;
  return import(`./xxx/${component}`); 
}
// 这种导入方式会将xxx目录下以component开头的文件进行打包。
// 如果xxx目录下存在/component*/这样的文件夹，那么文件夹内的所有组件都会被打包。
const componentC = (name) => {
  const component = 
  return import(`./xxx/component${name}`); 
}
// 较为合适的动态引入方式
const componentD = (name) => {
  const component = 
  return import(`./xxx/component${name}.vue`); 
}

Webpack 解析 import 注释指令

在 Webpack 中，import()函数的注释指令是一种特殊语法，用于控制 Webpack 对动态导入模块的处理方式，主要包含以下几种：

webpackChunkName

• 功能：该指令用于手动指定 Webpack 拆分代码时生成的代码块（chunk）名称。合理命名代码块，有助于在打包结果中清晰区分不同功能模块的代码块，对缓存管理、调试以及性能分析等工作都非常有利。

• 示例：

  import(/* webpackChunkName: "user - module - chunk" */ './userModule.js');
  

  在上述代码中，Webpack 会将./userModule.js及其依赖模块打包到名为user - module - chunk的代码块中。从 Webpack 2.6.0 版本开始，还支持使用占位符，例如(index)会使代码块名称以递增数字进行命名，(request)则会使用实际解析的文件名。示例如下：

  // 假设导入多个模块，会生成类似userModule1、userModule2等命名的代码块
  import(/* webpackChunkName: "userModule(index)" */ './userModule.js'); 
  

webpackMode

• 功能：该指令用于指定 Webpack 解析动态导入的模式。在不同模式下，Webpack 对动态导入模块的处理逻辑以及生成代码块的方式会有所不同。

• 模式类型及示例

• lazy：这是默认模式。在这种模式下，Webpack 会为每个import()调用单独生成可延迟加载的代码块。也就是说，每次遇到import()，Webpack 都会创建一个新的独立代码块，在运行时按需加载。例如：

  import(/* webpackMode: "lazy" */ './module1.js');
  import(/* webpackMode: "lazy" */ './module2.js');
  

  上述代码会分别生成两个独立的代码块，用于加载module1.js和module2.js。

• lazy - once：此模式下，Webpack 会生成单个可延迟加载的代码块，该代码块能够满足多个import()调用的需求。适用于一些动态导入语句，比如import(./locales/${language}.json)，可能会根据不同的language值请求多个模块路径的情况。首次调用import()时获取代码块，后续调用则复用该代码块。示例如下：

  // 多个动态导入可能共用一个代码块
  import(/* webpackMode: "lazy - once" */ `./locales/${language}.json`); 
  import(/* webpackMode: "lazy - once" */ `./locales/${anotherLanguage}.json`); 
  

• eager：在该模式下，Webpack 不会生成额外的代码块，而是将被导入的模块直接引入当前代码块，并返回已解析状态的Promise。与静态导入不同的是，在import()调用完成前，模块不会执行。例如：

  import(/* webpackMode: "eager" */ './eagerModule.js').then((module) => {
    module.someFunction();
  });
  

💐 前言 这是继上一篇《全网都找不到！小程序集成第三方 WASM npm 包》后的第二篇。在上一篇中讲述了小程序集成第三方 npm 包@jsquash/jpeg实现 JPEG 图片压缩，而这一次则是探