超图文档-Marker 标注

198 阅读3分钟

用于创建一个标记组件

image.png

示例:

    const el = document.createElement('div');
    el.className = 'marker';
    el.textContent ='标注'
    
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);

API配置

名称描述
anchor
默认: 'center'
一个字符串,指示标记中应通过Marker#setLngLat定位最靠近坐标集的部分。选项有'center'”、“'top'``'bottom'``'left'``'right'``'top-left'``'top-right'”、“'bottom-left''bottom-right'”。
clickTolerance
default: 0
用户在单击标记时可以移动鼠标指针的最大像素数,使其被视为有效单击(而不是标记拖动)。默认是继承地图的clickTolerance
color
默认: '#3FB1CE'
如果没有提供options.element,则用于默认标记的颜色。默认是浅蓝色
draggable
默认: false
一个布尔值,指示标记是否可以拖动到地图上的新位置。
element用作标记的DOM元素。默认是浅蓝色的液滴形状的SVG标记
occludedOpacity
默认: 0.2
被3D地形遮挡的标记的不透明度
offset以像素为单位的偏移量作为PointLike对象,相对于元素的中心应用。负数表示左和上
pitchAlignment
默认: 'auto'
'map'Marker与地图的平面对齐。'viewport'Marker与视口的平面对齐。'auto'自动匹配rotationAlignment的值。
rotation
default: 0
标记的旋转角度,以度为单位,相对于其各自的rotationAlignment设置。正值将顺时针旋转标记。
rotationAlignment
default: 'auto'
标记旋转的对齐。'map'与地图平面对齐,与地图旋转时的基本方向一致。'viewport'是屏幕空间对齐的。'horizon'根据最近的视界对齐,在非球投影上,它等同于'viewport'”。'auto'等同于'viewport'”。
scale
default: 1
如果没有提供options.element,则用于默认标记的刻度。默认比例对应于41px的高度和27px的宽度。

方法

1、addTo 将弹出窗口添加到地图中

   参数: map 要添加弹出窗口的Mapbox GL JS地图。

2、remove 从地图中删除标记

示例:

const marker = new mapboxgl.Marker().addTo(map);  
marker.remove();

3、getLngLat 获取标记的地理位置

注:结果的经度可能与之前由setLngLat设置的经度相差360度的倍数,因为Marker将锚经度包裹在世界副本上,以将标记保持在屏幕上

示例:

// Store the marker's longitude and latitude coordinates in a variable  
const lngLat = marker.getLngLat();  
// Print the marker's longitude and latitude values in the console  
console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`);

4、setLngLat 设置标记的地理位置并移动它

示例:

new mapboxgl.Marker()  
.setLngLat([-65.017, -16.457])  
.addTo(map);

5、getElement 返回Marker的HTML元素

const element = marker.getElement();

6、setPopup 将弹出窗口绑定到标记

示例:

const marker = new mapboxgl.Marker()  
.setLngLat([00])  
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>")) // add popup  
.addTo(map);

7、getPopup 返回绑定到标记弹出窗口实例

示例:

const marker = new mapboxgl.Marker()  
.setLngLat([00])  
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))  
.addTo(map);  
  
console.log(marker.getPopup()); // return the popup instance

8、togglePopup  根据弹出窗口的当前状态,打开或关闭绑定到标记弹出窗口实例

示例:

const marker = new mapboxgl.Marker()  
.setLngLat([00])  
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))  
.addTo(map);  
  
marker.togglePopup(); // toggle popup open or closed

9、getOffset 获取标记的偏移量。

const offset = marker.getOffset();

10、setOffset 设置标记的偏移量

marker.setOffset([0, 1]);

11、setDraggable 设置标记是否可拖动

marker.setDraggable(true);

12、isDraggable 如果标记可以拖动,则返回true

const isMarkerDraggable = marker.isDraggable();

13、setRotation 设置标记的rotation属性。

参数:number 默认0 标记的旋转角度(顺时针,以度为单位)

marker.setRotation(45);

14、getRotation 返回标记的当前旋转角度(以度为单位)

const rotation = marker.getRotation();

15、setRotationAlignment  设置标记的rotationAlignment属性(旋转对齐)

参数:(string默认'auto')设置标记的rotationAlignment属性

marker.setRotationAlignment('viewport');

16、getRotationAlignment 返回标记的当前rotationAlignment属性 

const alignment = marker.getRotationAlignment();

17、setPitchAlignment 设置标记的pitchAlignment属性。

参数:对齐(string?)设置标记的pitchAlignment属性。如果对齐是“自动”,它将自动匹配rotationAlignment

marker.setPitchAlignment('map');

18、getPitchAlignment 返回标记的当前pitchAlignment行为。

const alignment = marker.getPitchAlignment();

19、setOccludedOpacity 设置标记的occludedOpacity属性。当标记被地形遮挡时,这种不透明度用于标记。

参数:opacity(number默认0.2)设置标记的occludedOpacity属性。

marker.setOccludedOpacity(0.3);

20、getOccludedOpacity 返回标记的当前occludedOpacity

const opacity = marker.getOccludedOpacity()

监听事件:on

1、dragstart 拖动开始时触发。

2、drag  拖动时触发

3、dragend 拖动结束触发

const marker = new mapboxgl.Marker({  
    draggable: true  
})  
.setLngLat([0, 0])  
.addTo(map);

function onDragEnd() {  
    const lngLat = marker.getLngLat();  
    coordinates.style.display = 'block';  
    coordinates.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;  
}  
  
marker.on('dragend', onDragEnd);