MapVGL de Baidu Map agrega capas de modelo personalizadas (ThreeJS)

       He estado estudiando ThreeJS durante algún tiempo y se puede combinar con el negocio de la empresa, pero el contenido comercial a nivel del mapa es un poco limitado porque el modelo debe estar vinculado al mapa y no sé cómo hacerlo. implementarlo, así que lo puse en espera. Hasta que tuve una oportunidad accidental, descubrí que MapVGL de Baidu Map puede lograr varios efectos 3D interesantes, así que decidí investigar un poco y primero colocar las capas 3D propias de Baidu:

    A continuación debemos seguir algunos pasos para colocar nuestro propio modelo en la ubicación especificada.

Preparación:

    1. Solicite ak en Baidu Maps. Esto no es difícil. Puede usar Baidu usted mismo.

    2 Copie el código de visualización del mapa oficial, los principiantes pueden escribirlo ellos mismos (yo mismo lo escribí)

    3 Necesitamos usar ThreeJS para implementar esta función y necesitamos introducir mapvgl.treslayers.min.js. Le sugiero que guarde este archivo en el proyecto local, porque hay algunos inconvenientes. Debe realizar pequeñas modificaciones en este archivo. , que se presentará a continuación. Si alguien ve este problema y tiene otras formas de resolverlo, espero que podamos comunicarnos en privado.

    4. Cree un modelo y conviértalo a json. Este archivo es necesario al importar. Puede usar el editor oficial de ThreeJS para convertir obj a json. (Yo uso el modelo en formato obj)

Comience a codificar:  

  var map = new BMapGL.Map("map_container");                      // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(118.731134,32.011681), 19);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);                                //开启鼠标滚轮缩放
    map.setHeading(20);
    map.setTilt(70);
    map.setMapStyleV2({                                             //这个根据个人喜好 不喜欢的 可以不加
        styleId: '--------------------------------'
    });

 var THREE = mapvgl.THREE;
 var view = new mapvgl.View({
     map: map
 });

 var threeLayer = new mapvgl.ThreeLayer();                        //创建一个threelayer
 view.addLayer(threeLayer);                                       //添加到view

 var objectLoader = new THREE.ObjectLoader();                     //读取模型
 var group;
 objectLoader.load("20200327/model.json",function (object) {
    object.rotation.set(3.1415926 / 2,0,0);
    object.scale.set(1.18,1.18,1.18);
    for (var i = 0 ;i < object.children.length; i++){
        object.children[i].material.color = new THREE.Color(1,0.796,0.429);
        object.children[i].material.transparent = true;
        object.children[i].material.opacity = 0.6;
        for (var j = 0; j < object.children[i].material.length;j++){
            object.children[i].material[j].color = new THREE.Color(1,0.796,0.429);
            object.children[i].material[j].transparent = true;
            object.children[i].material[j].opacity = 0.6;
         }
        group = object;
     }
    object.children[6].visible = false;
    threeLayer.add(object,new BMapGL.Point(13217250,3742290)); //设置模型位置坐标
}

 var light = new THREE.DirectionalLight('#ffffff',2);          //添加灯光
 light.position.set(100,100,100);
 light.lookAt(0,0,0);
 threeLayer.scene.add(light);

    Ahora puede ejecutar el navegador y observar su modelo. Yo utilicé el modelo y las coordenadas de posición relacionadas del Centro Deportivo Olímpico de Nanjing. Esto no importa. Puede modificarlo según sus preferencias.

Muéstrame el efecto que logré aquí:

Hablemos de los peligros de esto:

1 Algunos estudiantes encontrarán que este modelo se escalará de acuerdo con el zoom del mouse. Encontramos mapvgl.treslayer.min.js, buscamos clave: "render", valor: función, que es aproximadamente la línea 26016 (porque he modificado este código) y luego vaya a Find this.updateCamera(); a continuación y comente esta línea de código para resolver el problema del escalado incorrecto del modelo. Permítanme publicar una imagen:

2. En el proyecto anterior estaba el código fuente de ThreeJS, que se usó para importar el modelo obj, pero no tuvo éxito. Solo pudimos usar las TRES variables proporcionadas oficialmente por Baidu. Parece que el código fuente fue encapsulado para ThreeJS. , por lo que el ThreeJS original no era aplicable aquí. Afortunadamente, los métodos aplicables no han cambiado mucho y aún puedes encontrar algunas pistas consultando el código fuente.

3 También está el tema de la conversión de coordenadas que nunca he entendido (después de todo, soy un novato), y no existe ningún documento oficial que explique este asunto. ¿Cómo convertir XYZ en el mundo 3D y la longitud y latitud en el mundo real? Estoy confundido al mirar el código fuente de FlyLineLayer. Si alguien sabe sobre esto, por favor deme algún consejo.

por fin:

Hablaré sobre cómo interactuar con el modelo cargado más adelante. Por cierto, espero que los socios con experiencia relevante en la industria puedan comunicarse más.