возможность
Некоторые из проектных требований команды связаны с визуальным отображением данных в городском планировании и строительстве.Интеграция оборудования, данных, городских территорий и других элементов в форме ГИС дает более привлекательный эффект.
В последнее время из-за потребностей проекта ожидания накладываются на слой 3D-моделей зданий в верхней части карты. Существующая техническая структура команды - это использование высоконравственных карт ГИС-сервисов, необходимо поднять шум на основе высоконравственной карты после некоторых жестких попыток достичь конечного эффекта, как показано.
Технические решения
AutoNavi предоставляет некоторые решения для загрузки 3D-моделей. Разработчики могут вызывать API для построения геометрических моделей или использовать собственный подключаемый модуль AutoNavi GltfLoader для загрузки самостоятельно созданных gltf-моделей. В первом отсутствуют инструменты визуального редактирования, и он подходит только для создания простых моделей; второй подходит для загрузки сложных самостоятельно созданных моделей, таких как пример модели JSAPI glTF, предоставленный Gaode.
Мы можем использовать профессиональные инструменты моделирования 3DMax, C4D и т. д. для экспорта файлов obj, затем преобразовать файлы obj в формат gltf, а затем использовать GltfLoader для загрузки модели в указанное место на карте, а затем неизбежно внести некоторые корректировки, такие как масштабирование, поворот и положение в соответствии с местоположением, подходящим для карты ГИС.
Этапы реализации
Подготовьте файлы модели
На примере 3DMax2016 модель моделирования экспортируется в виде файла .obj (с файлами материалов .mtl и различными файлами текстур), а настройки экспорта показаны на рисунке. Затем используйте официальный инструмент преобразования obj2gltf, предоставленный cesium.js, чтобы преобразовать файл obj в файл gltf, подходящий для карт Gaode.
Этот наступил на несколько ям, требующих внимания, в противном случае после того, как модель не может быть загружена, отображается ненормальная ситуация или загружается очень большая вероятность того, что будет:
1.Похоже,что карта Gaode не может поддерживать карту материала в формате .tga.Раз в модели указан путь текстуры,то после загрузки модель не может отображаться.Поэтому после экспорта файлов obj и mtl обязательно удалите или преобразовать путь в формате .tga в формат png;
2. Все суффиксы пути к текстуре, объявленные в экспортированном файле mtl, указаны в нижнем регистре, например .jpg.Если соответствующий суффикс текстуры указан в верхнем регистре .JPG, его необходимо изменить, чтобы он соответствовал объявлению в файле mtl, в противном случае он может появиться после деплоя, когда текстуру не получить; Файл в формате .gltf необходимо экспортировать, а в настоящее время Gaode Map не может загружать двоичный формат .glb;
3. Используйте следующую команду для экспорта файла .gltf.Функция -t состоит в том, чтобы отделить экспортируемый файл gltf от файла текстуры.Если параметр -t не добавлен, файл gltf со всеми текстурами, встроенными в форму будет экспортироваться из 64base. , файл всего один, и путь карты в этом файле вообще не разбирается, загрузка не проходит и сообщается об ошибке, похожей на undefined;
obj2gltf -i model.obj -o model.gltf -t
4. Если вы не хотите устанавливать obj2gltf самостоятельно, вы также можете использовать инструмент преобразования, предоставляемый AutoNavi, но он поддерживает только загрузку пакетов сжатия модели ниже 5M;
написание кода
1. Инициализируйте карту и слои
// 创建地图实例
var map = new AMap.Map("container", {
viewMode: '3D',
pitch: 60,
rotation: 11.4,
zoom: 16,
zooms:[3,20],
center: [113.533247, 22.794298],
mapStyle: 'amap://styles/grey',
showIndoorMap: false,
features:['bg','road','building']
});
// 环境光
map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],1);
// 平行光
map.DirectionLight = new AMap.Lights.DirectionLight([1,0,-0.5],[1,1,1],0.5);
// 创建Object3DLayer图层
var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);
2. Загрузите модель
var sourceList = [{
name: '棕榈水岸',
url: '../data/gltf/ns/zlsa/zlsa.gltf', //
position: [113.524818,22.792584],
scale: 7.3,
height: 0
},{
name: '供电局',
url: '../data/gltf/ns/gdj/gdj.gltf', //
position: [113.527976,22.796998],
scale: 7.3,
height: 0
}];
map.plugin(['AMap.GltfLoader'], function () {
loadModel()
})
// 加载模型
function loadModel () {
var gltfObj = new AMap.GltfLoader()
for (var i = 0; i < sourceList.length; i++) {
// 逐个加载模型
(function (count) {
var model = sourceList[count]
gltfObj.load(model.url, function (gltfObj) {
console.log('加载成功')
gltfObj.setOption({
position: new AMap.LngLat(model.position[0], model.position[1]), // 必须
scale: model.scale, // 非必须，默认1
height: model.height, // 非必须，默认0
scene: 0, // 非必须，默认0
})
gltfObj.rotateX(90)
gltfObj.rotateZ(0)
object3Dlayer.add(gltfObj)
})
})(i)
}
}
существующие проблемы
Первая попытка загрузки участка 2,24 километра платформы, около 16 моделей, сделанная страница до сих пор зависла в работе.
Похоже, что карта Gaode не поддерживает большие и сложные gltf модели очень дружелюбно Я случайно выбрал модель ячейки среди всех моделей. Как показано на рисунке, здесь более 30 000 граней и 291 текстура, а карта Gaode просто невыносима. После просмотра официального примера, причиной плавной работы должен быть выбор относительно оптимизированной модели города, текстуры модели упрощены по дизайну, обработана UV, то есть несколько текстур объединены в одну, однако, для самодельных моделей зданий В настоящее время не существует надежного автоматического метода карты UV-слияния Текущий метод оптимизации может только удалять детали модели и сжимать файлы карты.
По этой проблеме в службу поддержки AutoNavi был специально отправлен заказ на работу, и ответ казался неразрешимым. Похоже, вам нужно дождаться обновления версии, до этого, по оценкам, вы можете найти решения только на других технологических платформах.