🌍maptalks study

Appearance

目录

GLTFLayer ​

GLTFLayer继承了OverlayLayer，从名字上就可以看出，其是用来管理图形点(GLTFMarker)数据的

可以存放的图形

  • 点

在业务里使用GLTFLayer主要是不断的：

  • 添加图形
  • 移除图形
  • 清空图形
  • 显示图层
  • 隐藏图层等

注意：GLTFLayer的作用是用来管理图形，方便的图形的批量显示，隐藏，添加等操作，所以其具有的特性是：

  • 看不见摸不着
  • 没有click等这些事件的

注意其在@maptalks/gl-layers包里，你需要：

sh
npm i @maptalks/gl-layers

用法 ​

由于其也是是继承 OverlayLayer 的，你会发现其用法和VectorLayer一样，仅有的区别：

  • 其是webgl渲染的
  • 其仅仅支持GLTFMarker图形数据

确切的说凡是继承了OverlayLayer的图层他们的用法都是一样的，仅仅是不同的图层管理的数据类别不同和渲染的形态不同罢了

关于GLTFMarker ​

关于GLTFMarker虽然也是点图形，但是其是3D模型作为点的方式加入图层管理的，和普通的Marker还是有区别的：

  • GLTFMarker是3D模型的点，是可以看到GLTFMarker四周和背面的,Marker是普通的图片
  • GLTFMarker仅仅支持gltf/glb格式，如果你的模型是其他的格式，需要使用工具或者代码等工具将其转成gltf格式
  • GLTFMarker是矢量的，随着地图缩放而缩放，不会模糊的

注意gltf格式是成组出现的，有个.bin文件的，如果你的模型加载报错，要检查是否缺少了.bin文件

GLTFMarker使用小技巧 ​

js
const symbol = {
    url: "/resources/gltf/alien/alien.gltf",
    modelHeight: 240, //model height,Unit is meters
    scaleX: 1,
    scaleY: 1,
    scaleZ: 1,
    rotationZ: 180,
};

const gltfLayer = new maptalks.GLTFLayer("gltf");
const gltfMarker = new maptalks.GLTFMarker(map.getCenter(), {
    symbol,
});
gltfLayer.addGeometry(gltfMarker);

GLTFMarker的样式系统里有个参数modelHeight:

  • 表示模型的高度，单位米
  • 不管模型的大小和坐标，只要是模型的modelHeight为同样的值，那么其在地图呈现的大小一样的，所以如果不同的模型希望其呈现大小一样，那么就把他们的modelHeight设置为同一个值
  • 调整模型的大小时，都是通过这个参数modelHeight,只有当模型的展现的长宽高比例不是我们预期时，我才会去设置模型的scaleX,scaleY这些参数，举例:比如设置了模型的高度为100，这时希望模型的长为150,但是因为模型原始数据的原因，这时模型的的高度和长度比列不是 2:3,可能是2:2.5，这时我们才去调整模型的 scaleX,scaleY，总之就是：调整模型的缩放通过modelHeight，scaleX,scaleY等是用来调整模型自身的长宽高的比列，即scaleZ永远都是1

TIP

总结：

  • 模型的整体缩放用modelHeight控制
  • 模型的大小比例用scaleX,scaleY控制

批量模型 ​

MultiGLTFMarker 和 GLTFLineString 都是用来加载批量模型的,模型只能是一种,用来添加重复的数据模型,比如树木模型 ,因为用的instance mesh实现的,相对于 GLTFLayer会有更好的性能

  • 优点:更好的性能
  • 缺点:没有GLTFMarker灵活

MultiGLTFMarker ​

2Q$24E5MYIT_S%9W{YDD433.png

只能是一种模型，但是每条数据可以设置模型的scale,rotation等

js
const center = map.getCenter();
const data = [];
for (let i = -2; i < 3; i++) {
    for (let j = -2; j < 3; j++) {
        data.push({
            coordinates: center.add(i * 0.01, j * 0.01),
            scale: [1, 1, Math.random() + 1],
        });
    }
}
const point = new maptalks.MultiGLTFMarker(data, {
    symbol: {
        url: "./../assets/data/alien.gltf",
        modelHeight: 400, //model height,Unit is meters
        // scaleX: 1,
        // scaleY: 1,
        // scaleZ: 1,
        rotationZ: 180,
    },
});
point.addTo(layer);
point.on("click", (e) => {
    console.log(e);
});

GLTFLineString ​

UTTAQ7JQVJGFX@URITYNQOX.png

只能是一种模型，相对于MultiGLTFMarker更加极端,每条数据的模型都是一样的，只有位置不一样

js
const coordinates = [
    [120.68430204122774, 31.313924437098905],
    [120.68429694740905, 31.313872215303803],
    [120.68431986959285, 31.313824345299594],
    [120.68434279177677, 31.313759067981863],
    [120.68435807323272, 31.313709022007544],
    [120.6843835423258, 31.31365027235168],
    [120.68441155832829, 31.313576291251394],
    [120.68444212124018, 31.313503678099124],
    [120.6844628968272, 31.313447974086984],
    [120.68449204124977, 31.313386550219292],
    [120.68451110534306, 31.31332724277476],
    [120.68453311812618, 31.313274927692675],
    [120.6845551309093, 31.313214032843945],
    [120.68457645184321, 31.313153325012337],
    [120.68459715491304, 31.31310009164585],
    [120.68462455305144, 31.313039708442176],
    [120.68463925143396, 31.312971573152566],
    [120.68465798919988, 31.31291876096745],
    [120.68467907445302, 31.31286804540113],
    [120.68469681217175, 31.312797310256627],
    [120.68471383991209, 31.312743471978678],
    [120.6847375627209, 31.312666754152275],
    [120.68476404999058, 31.31259401638951],
    [120.68478340708862, 31.31252967004795],
    [120.68480378236313, 31.31247091965642],
    [120.68482182827938, 31.312400669967673],
    [120.68484216729553, 31.312343473355867],
    [120.68486418007888, 31.312259107165772],
    [120.6848844828362, 31.312186492998052],
    [120.68489929146244, 31.31212354536521],
    [120.68491075255452, 31.312069177615257],
    [120.68492348710106, 31.312007443060764],
    [120.68494640928486, 31.31193998853044],
    [120.68496074508153, 31.311847230414486],
    [120.68497951910604, 31.31175503231239],
    [120.68499480056187, 31.3116832256828],
    [120.68500753510853, 31.311600539192995],
    [120.68502281656436, 31.31153526033401],
    [120.68503555111101, 31.31146562950127],
    [120.68505083256684, 31.31139599861703],
    [120.68505847329482, 31.31132201574607],
    [120.68507884856933, 31.311230625060574],
    [120.68508903620659, 31.311141410258273],
    [120.68510177075314, 31.311054371345307],
    [120.68511959911848, 31.310982564181614],
    [120.68513233366502, 31.310886821211483],
    [120.68514761512097, 31.310778022263634],
    [120.68515270893954, 31.31068880703262],
    [120.68516799039548, 31.310606119669927],
    [120.68517308421406, 31.310527784206755],
    [120.68518836567, 31.310432040774373],
    [120.68520110021655, 31.310316713328888],
    [120.6852112878538, 31.31021444170247],
    [120.68521892858178, 31.310120873947],
    [120.68522147549106, 31.31003383409106],
    [120.68521892858178, 31.309942442155744],
    [120.68522402240046, 31.309853226133413],
    [120.6852342100376, 31.309757482015385],
    [120.6852342100376, 31.309668265817805],
    [120.68523930385629, 31.30958557755926],
    [120.6852342100376, 31.309492009179138],
    [120.68523166312832, 31.309420200824405],
    [120.68523166312832, 31.30935056842813],
    [120.68523166312832, 31.30927440793576],
    [120.68522656930975, 31.30919824738183],
    [120.68522911621903, 31.309128614821503],
    [120.68522911621903, 31.309054630169754],
    [120.68521892858178, 31.308967589328546],
    [120.6852112878538, 31.30889360455032],
    [120.6852112878538, 31.308823971764838],
    [120.68520364712583, 31.308728226600664],
    [120.68519345948857, 31.308667297809194],
    [120.685187565045, 31.308606183077387],
    [120.68518836567, 31.308519327722962],
    [120.68517308421406, 31.308462750863868],
    [120.68516544348608, 31.30837353344006],
    [120.68515016203014, 31.308262555551124],
    [120.68513233366502, 31.30815810565386],
    [120.68511959911848, 31.30807106398433],
    [120.68510177075314, 31.307966613874754],
    [120.68509158311599, 31.307875219933834],
    [120.68507884856933, 31.307779473805425],
    [120.68505847329482, 31.307681551527963],
    [120.68504319183887, 31.30757492493231],
    [120.68502281656436, 31.307478276307307],
    [120.68500244128984, 31.30740736860966],
    [120.68498534103242, 31.307327104767495],
    [120.68496416513312, 31.30725585489452],
    [120.68494215235, 31.30720092416479],
    [120.68492348710106, 31.30712883276439],
];
const point = new maptalks.GLTFLineString(coordinates, {
    symbol: {
        url: "./../assets/data/tree/tree.gltf",
        modelHeight: 5, //model height,Unit is meters
        scaleX: 1,
        scaleY: 1,
        scaleZ: 1,
        rotationZ: 180,
    },
});
point.addTo(layer);
point.on("click", (e) => {
    console.log(e);
});

This document is generated by mdpress