Marker
Marker的样式与常规的css样式一致
常用方法
| 方法名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| addTo(map) | map | Marker.this | 将这个Marker标注添加到地图上 |
| remove() | 无 | Marker.this | 将这个Marker标注添加到地图上 |
| getLngLat() | 无 | Lnglat | 返回该标注的经纬度对象 |
| setLngLat(lnglat) | lnglat | Marker.this | 设置该标注的经纬度信息 |
| getElement() | 无 | HTML5 Element | 返回该标注的html信息 |
| setPopup(popup) | Popup | Marker.this | 针对该标注绑定一个Popup信息 |
| getPopup() | 无 | Popup | 返回该标注的Popup对象 |
| togglePopup() | 无 | Marker.this | 触发该标注的Popup对象 |
| getOffset() | 无 | Point | 返回该标注的偏移值 |
| setOffset(offset) | offset | Offset | 设置该标注的偏移值 |
示例代码
var marker = new vjmap.Marker();
marker.setLngLat(latLng).addTo(map);
根据CAD坐标增加Marker至地图
在地图sys_hello中，把此地图中一个CAD坐标为[725.32,18969.19]的点加进地图中
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addToMap()
在沙箱中运行，调用唯杰地图公共演示服务
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 0, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addTo(map)
let mousePositionControl = new vjmap.MousePositionControl({
showLatLng: true
});
map.addControl(mousePositionControl, "top-left");自定义标记样式
Marker的Picture样式主要还是通过HTML的方式来实现的，
核心代码
#marker {
background-image: url('../../images/myImg/diqiu.png');
background-size: cover;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
}
// 创建一个DOM element
var el = document.createElement('div');
el.id = 'marker';//将该div与marker的样式绑定
new vjmap.Marker(el);////绑定对应的HTML的元素
Marker的 Picture&Text 样式主要还是通过HTML的方式来实现的，不同之处在与是通过一个
父div动态添加子picture div和子text div来实现
核心代码
// 创建一个子picture DOM element
var icon = document.createElement('div');
icon.id = 'marker-icon';//绑定图片样式
// 创建一个子text DOM element
var text = document.createElement('div');
text.id = 'marker-text';//绑定文字样式
text.innerText = "测试注记";//添加文字样式
// 创建一个父 div DOM elemen
var el = document.createElement('div');
el.id = 'marker'; //将该div与marker的样式绑定
el.appendChild(icon);//整个父标注添加图片内容
el.appendChild(text);//整个父标注添加文字内容
new vjmap.Marker(el)
自定义Marker缩放时如何保持位置不动
marker是通过设置一个点位置进行显示，但是marker是一个div,范围是一个矩形,所以要设置marker的锚点和偏移量，也就是这个点在矩形的位置，缩放时这个位置就不会发生变化。
设置anchor属性：anchor属性定义了Marker相对于其位置的锚点。常用的锚点包括选项包括'center'，'top'，'bottom'，'left'，'right'，'top-left'，'top-right'，'bottom-left'，和'bottom-right'。（可选，默认'center'）。
使用offset属性：offset可以用来调整Marker的显示位置。通过指定偏移量，可以将Marker相对于其默认位置进行微调。以像素为单位的偏移量，作为要应用的点对象相对于元素的中心。负数表示向左和向上。
示例: 官网提供的默认markerdiv的高为28个像素, 默认marker地图放大时，底部中间的位置是不会变化的。所以需要把锚点设置为'bottom' 或者 锚点还是缺省的'center'但是offset需要往下移动高度的一半的像素值，也就是14个像素。所以offset应为[0,14]
const marker = new vjmap.Marker({
offset: [0, 14], // 自定义的偏移量
anchor: 'center' // 锚点设置为中心
})
.setLngLat([lng, lat]) // 设置经纬度
.addTo(map);
marker和symbol的区别
图文注记实现方式有两种，一种是采取marker的方式，另一种是采用symbol样式。
marker是用div的形式进行开发，优点是实现比较灵活，如可用vue进行开发查看示例。缺点是如果绘制的太多，会影响性能。
symbol 用基于webgl进行渲染，这种方式使用参数相对固定，扩展性差，但是显示效果速度极佳。
自定义的Marker设置动画为什么不生效
自定义的Marker通过marker.setAnimation("MAP_ANIMATION_BOUNCE"); 设置动画效果有时候不生效的原因是这个动画是针对默认marker的，通过访问marker.getElement().children[0] 来设置css动画效果的。所以如果自定义的Marker如果不是这个DOM结构，需要在外层用div对整个marker进行包一下。如
let elMarker = document.createElement('div');
let el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage =
'url("static/assets/images/nilt.png")';
el.style.width = '42px';
el.style.height = '68px';
el.style.backgroundSize = '100%';
el.addEventListener('click', function (e) {
message.info("you click a marker");
});
elMarker.appendChild(el)
// Add markers to the map.
let marker = new vjmap.Marker({
element: elMarker,
anchor: 'bottom',
draggable: true
})
marker.setAnimation("MAP_ANIMATION_BOUNCE");
marker.setLngLat(map.toLngLat(mapBounds.randomPoint()))
.addTo(map);
Maker相关示例
类型定义
export interface MarkerOptions {
/** 用作标记的DOM元素。默认值是淡蓝色、液滴形状的SVG标记 */
element?: HTMLElement | undefined;
/** 以像素为单位偏移为PointLike对象，以相对于元素的中心应用。负数表示向左和向上。*/
offset?: PointLike | undefined;
/** 一个字符串，指示标记中应通过Marker.setLngLat定位到最接近描点的部分。
* 选项有 `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
* The default value os `'center'`
*/
anchor?: Anchor | undefined;
/** 如果未提供options.element，则使用默认标记的颜色。默认值为浅蓝色（#3FB1CE） */
color?: string | undefined;
/** 一个布尔值，指示标记是否能够被拖动到地图上的新位置。默认值为false */
draggable?: boolean | undefined;
/**
* 用户在点击标记时可以移动鼠标指针以使其被视为有效点击的最大像素数
* （与标记拖动相反）。默认值（0）是继承地图的clickTolerance。
*/
clickTolerance?: number | null | undefined;
/** 标记相对于其“旋转对齐”设置的旋转角度（度）。正值将使标记顺时针旋转.
* The default value is 0.
*/
rotation?: number | undefined;
/** map 对齐 Marker 相对于地图的旋转，在地图旋转时保持方位。
*`viewport`使`Marker`的旋转相对于视口对齐，与地图旋转无关。
*`auto`相当于`viewport`。
*/
rotationAlignment?: Alignment | undefined;
/** map 将 Marker 与地图平面对齐.
* `viewport`将`Marker`与视口平面对齐.
* `auto`自动匹配`rotationAlignment`的值`
* The default value is `auto`.
*/
pitchAlignment?: Alignment | undefined;
/** 如果未提供options.element，则使用默认标记的比例.
* 默认比例（1）对应于高度“41px”和宽度“27px”`.
*/
scale?: number | undefined;
}
/**
* Marker
*/
export class Marker extends Evented {
constructor(options?: vjmap.MarkerOptions);
constructor(element?: HTMLElement, options?: vjmap.MarkerOptions);
/**
* 设置动画
* @param animationType
* MAP_ANIMATION_NONE 无动画
* MAP_ANIMATION_BOUNCE 弹跳
* MAP_ANIMATION_DROP 坠落
*/
setAnimation(animationType: string): void;
/**
* 设置颜色
* @param color 颜色
*/
setColor(color: string): void;
/**
* 显示
*/
show(): void;
/**
* 隐藏
*/
hide(): void;
/**
* 获取是否隐藏了，当设置了hide或缩放级别或视图范围外不可见时，返回true，否则返回false
*/
isHidden(): boolean;
/**
* 设置光标
* @param cur 光标名称
*/
setCursor(cur: string): void;
/**
* 设置高度
* @param height 高度值
*/
setHeight(height: number): Marker;
/**
* 设置显示的最小缩放级别
* @param zoom 缩放级别
*/
setMinZoom(zoom: number): Marker;
/**
* 设置显示的最大缩放级别
* @param zoom 缩放级别
*/
setMaxZoom(zoom: number): Marker;
/**
* 设置当marker不在当前地图视图范围内时，将自动移除。进入视图范围内时，将自动增加上，当自动移除或增加时，将触发`autoAdd`和`autoRemove`事件
* @param autoRemove true不在当前地图视图范围内时，将自动移除，false不会自动移除
* @param padding 范围向外扩的像素范围，默认500px，向视图范围往外扩些像素，在平移的时候，能看到marker，体验效果好些。
*/
setRemoveWhenNoInMapView(autoRemove: boolean, padding?: number): Marker;
/**
* 设置能缩放的最大级别。如果小于这个级别，div将根据缩小级别自动缩小比例。默认不会自动缩放，当自动移除或增加时，将触发`autoAdd`和`autoRemove`事件
* @param zoom 缩放级别
*/
setScaleMaxZoom(zoom: number): Marker;
/**
* 得到高度值
*/
getHeight(): number | undefined;
/**
* 得到显示的最小缩放级别
*/
getMinZoom(): number | undefined;
/**
* 得到显示的最大缩放级别
*/
getMaxZoom(): number | undefined;
/**
* 得到能缩放的最大级别。如果小于这个级别，div将根据缩小级别自动缩小比例。默认不会自动缩放
*/
getScaleMaxZoom(zoom: number): number | undefined;
/**
* 得到当marker不在当前地图视图范围内时，将自动移除。进入视图范围内时，将自动增加上
*/
getRemoveWhenNoInMapView(): boolean;
/**
* 设置是否显示隐藏
* @param visible 是否显示
* @param isDisplay true的话，表示用style的display去控制隐藏显示，dom还在文档中。false的话，会从文档动态清空增加
*/
setVisible(visible?: boolean, isDisplay?: boolean): Marker;
addTo(map: Map): this;
remove(): this;
getLngLat(): LngLat;
setLngLat(lngLat: LngLatLike): this;
getElement(): HTMLElement;
setPopup(popup?: Popup): this;
getPopup(): Popup;
togglePopup(): this;
getOffset(): PointLike;
setOffset(offset: PointLike): this;
setDraggable(shouldBeDraggable: boolean): this;
isDraggable(): boolean;
getRotation(): number;
setRotation(rotation: number): this;
getRotationAlignment(): Alignment;
setRotationAlignment(alignment: Alignment): this;
getPitchAlignment(): Alignment;
setPitchAlignment(alignment: Alignment): this;
}
这篇文档有帮助吗？感谢反馈！