UI元素 ​

在maptalks里关于domui方面主要提供了ui和control两个命名空间,关于他们的区别：

• control下的类，他们的位置是不随着地图视角的改变而改变的,他们的位置是死的
• ui和control正好相反，他们的位置是随着地图视角的改变而改变的，他们的位置会跟随地图

InfoWindow和UIMarker怎样选择 ​

InfoWindow和UIMarker都是在地图上展示UIDOM,但是他们还是有些区别的

• InfoWindow 一般是随着图形(Geometry)来展示，其一般作为图形的附属信息展示的
• UIMarker 是独立展示的，不需要成为 Geometry的附属者
• InfoWindow的展示位置是固定的，一般都是放在Geometry的上面
• UIMarker的位置就比较灵活了，可以随意放到四周，可以Geometry一起组成一些特殊的效果 你可以把该UIMarker随意的放到Geomtry的四周,UIMarker提供了对齐功能 UIMarker Align Demo
  如果UI/UX设计师喜欢设计这种奇奇怪怪的效果就特别适合 UIMarker

Marker和UIMarker怎样选择？ ​

Marker是纯图片渲染，采用canvas或者webgl等渲染技术，而UIMarker是纯的DOM,所以：

• 纯图片的用Marker
• 需要在地图展示表格，图表，表单，各种CSS效果，交互等的元素就采用UIMarker

地图展示的UI东西有点多乱糟糟的怎么办？ ​

maptalks的UI已经内置碰撞了功能,开启碰撞即可 ui-collision demo

UI要素支持海拔高度吗？ ​

支持的

const layer = new maptalks.VectorLayer("layer", {
  enableAltitude: true,
}).addTo(map);
const center = map.getCenter();
//海拔
center.z = 100;
const point = new maptalks.Marker(center).addTo(layer);
point.setInfoWindow({
  content: "hello",
});
//显示时会自动那point的坐标作为显示的点,也可以手动传入坐标的值
//openInfoWindow(coordinate)
point.openInfoWindow();

let c2 = center.copy();
c2.x += 0.01;
const marker = new maptalks.ui.UIMarker(c2, {
  content: '<div class="text-marker">maptalks</div>',
  verticalAlignment: "top",
}).addTo(map);

怎样展示gif？ ​

• 可以用UImarker来加载gif图片资源，注意DOM的渲染性能比较差，适合少量的数据
• 如果你想用Marker也是可以的，需要用到一个gif解码插件 gifloop

gifloop + maptalks 例子