minemap 点选3d模型

        minemap 点选是通过map.queryRenderedFeatures来实现的，这个方法用的最多的是在地图的点击事件中进行相关操作；最近有个需求要点击相关模型信息来选中模型，在官方文档中并没有找到手动勾选模型的方法，于是根据queryRenderedFeatures来寻求解决办法。

最终效果

 

 关键代码

const clickChose = () => {
  // 需先将模型的经纬度设置为center
  global3D.map.setCenter([116.24544236500196, 40.07246532046025]);
  console.log(global3D.domRect,'domRect')
  global3D.map.setZoom(17);
  // 抓取map div中心点-即当前位于中心的模型
  const point1 = [global3D.domRect.width / 2, global3D.domRect.height / 2, 0];
  console.log(point1, "point1111");
  var features = global3D.map.queryRenderedFeatures(point1, {
    modelHighlight: true,
    highlightRange: "SCENE",
  });
  if (features && features.length > 0 && features[0].properties) {
    console.log("查询到结果", features[0].properties);
  }
};

         由于官方并没有给出勾选模型的方法，因此想到将模型的经纬度设置为地图中心，然后用queryRenderedFeatures抓取当前中心的屏幕坐标，那么此时抓取的元素必然是当前位于中心的模型。当然还可以将模型的经纬度转换为屏幕坐标然后抓取，然而本人尝试将经纬度转换屏幕坐标，最终失败，若有相关经验的大佬可以指点一二。

 完整代码以及文件

global3D.js 

        由于本项目是使用vue3+vite实现，考虑到地图对象可能会被很多文件使用，若放到vuex中，则map对象众多的属性被proxy会对页面性能造成一定影响，于是就创建了一个global3D的全局对象：

export default {
    map: null,
    domRect: null // map dom 盒模型数据
}

baseMap3D.vue：地图底图

<template>
  <div class="base-map-3D" :id="map3dId"></div>
</template>
<script setup>
import {