文本

Text 用div的方式创建一个文本组件, 是里面引用的是Marker对象。

类型定义

/**
 * 创建文本组件.
 *
 * @param {Object} [options]
 * @param {object}  [options.text] 文字内容
 * @param {object}  [options.style] 文字样式
 * @param {HTMLElement} [options.element] 用作文本的 DOM 元素。
 * @param {string} [options.anchor='center'] 一个字符串，指示应该放置在最靠近坐标的标记部分。选项有“center”、“top”、“bottom”、“left”、“right”、“top-left”、“top-right”、“top-right” “左下”和“右下”.
 * @param {PointLike} [options.offset] 作为要应用的对象相对于元素中心的偏移量（以像素为单位）。负数表示向左和向上.
 * @param {string} [options.color='#3FB1CE'] 如果未提供`options.element`.
 * @param {number} [options.scale=1] 如果未提供`options.element`，则用于默认文本的比例。.
 * @param {boolean} [options.draggable=false] 一个布尔值，指示是否可以将文本拖动到地图上的新位置.
 * @param {number} [options.clickTolerance=0] 用户在单击文本期间可以移动鼠标指针以将其视为有效单击（与文本拖动相反）的最大像素数。默认是继承地图的`clickTolerance`.
 * @param {number} [options.rotation=0] 文本相对于其各自的“rotationAlignment”设置的旋转角度（以度为单位）。正值将顺时针旋转文本.
 * @param {string} [options.pitchAlignment='auto'] `map` 将 `Text` 与地图平面对齐。 `viewport` 将 `Text` 与视口平面对齐。 `auto` 自动匹配 `rotationAlignment` 的值.
 * @param {string} [options.rotationAlignment='auto'] `map` 对齐 `Text` 相对于地图的旋转，在地图旋转时保持方位。 `viewport` 对齐 `Text` 相对于视口的旋转，与地图旋转无关。 `auto` 等价于 `viewport`.
 * @example
 * // Create a new Text.
 * const text = new vjmap.Text({text: "abc“})
 *     .setLngLat([30.5, 50.5])
 *     .addTo(map);
 * @example
 * // Set text options.
 * const text = new vjmap.Text({
 *     text: "abc“,
 *     draggable: true
 * }).setLngLat([30.5, 50.5])
 *     .addTo(map);
 */
 class Text extends Evented {
    private readonly _marker;
    _textContainerDom: HTMLElement;
    _style: object;
    /**
     * 构造函数
     * @param options
     */
    constructor(options?: {
        /** 文本内容. */
        text?: string;
        /** 文本样式. */
        style?: object;
        /** 用作标记的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;
    });
    /**
     * 将 `Text` 附加到 `Map` 对象。
     *
     * @param {Map}  map to add the text to.
     * @returns {Text} Returns itself to allow for method chaining.
     * @example
     * const text = new vjmap.Text({text: "abc"})
     *     .setLngLat([30.5, 50.5])
     *     .addTo(map); // add the text to the map
     */
    addTo(map: Map): Text;
    /**
     * 从地图中删除文本。
     *
     * @example
     * const text = new vjmap.Text().addTo(map);
     * text.remove();
     * @returns {Text} Returns itself to allow for method chaining.
     */
    remove(): Text;
    /**
     * 得到经纬度
     * @return {any}
     */
    getLngLat(): LngLatLike;
    /**
     * 设置经纬度
     * @param lnglat
     * @return {this}
     */
    setLngLat(lnglat: LngLatLike): Text;
    /**
     * 返回 `Text` 的 HTML 元素。
     *
     * @returns {HTMLElement} Returns the text element.
     * @example
     * const element = text.getElement();
     */
    getElement(): HTMLElement;
    /**
     * 返回 `Text` 的 Marker 对象。
     */
    getMarker(): Marker;
    /**
     * Binds a `Popup` to the `Text`
     * @param popup
     * @return {this}
     */
    setPopup(popup?: Popup): Text;
    /**
     * 返回绑定到 `Text` 的 `Popup` 实例。
     *
     * @returns {Popup} Returns the popup.
     */
    getPopup(): Popup;
    /**
     * 根据 `Popup` 的当前状态打开或关闭绑定到 `Text` 的 `Popup` 实例.
     *
     * @returns {Text} Returns itself to allow for method chaining.
     */
    togglePopup(): Text;
    /**
     * 获取文本的偏移量.
     *
     * @returns {Point} The text's screen coordinates in pixels.
     */
    getOffset(): number;
    /**
     * 设置文本的偏移量.
     *
     * @param {PointLike} offset 以像素为单位的偏移量，作为 PointLike 对象相对于元素的中心应用。负数表示向左和向上。
     * @returns {Text} Returns itself to allow for method chaining.
     */
    setOffset(offset: PointLike): Text;
    /**
     * 设置文本的 `draggable` 属性和功能.
     *
     * @param {boolean} [shouldBeDraggable=false] Turns drag functionality on/off.
     * @returns {Text} Returns itself to allow for method chaining.
     */
    setDraggable(shouldBeDraggable: boolean): Text;
    /**
     * 如果可以拖动文本，则返回 true。
     *
     * @returns {boolean} True if the text is draggable.
     */
    isDraggable(): boolean;
    /**
     * Sets the `rotation` property of the text.
     *
     * @param {number} [rotation=0] 文本相对于其各自设置的旋转角度（顺时针，以度为单位）.
     * @returns {Text} Returns itself to allow for method chaining.
     */
    setRotation(rotation: number): Text;
    /**
     * 返回文本的当前旋转角度（以度为单位）.
     *
     * @returns {number} The current rotation angle of the text.
     */
    getRotation(): number;
    /**
     * 设置文本的 `rotationAlignment` 属性.
     *
     * @param {string} [alignment='auto'] 设置文本的 `rotationAlignment` 属性.
     * @returns {Text} Returns itself to allow for method chaining.
     */
    setRotationAlignment(alignment: string): this;
    /**
     * 返回文本的当前 `rotationAlignment` 属性.
     *
     * @returns {string} The current rotational alignment of the text.
     */
    getRotationAlignment(): string;
    /**
     * 设置文本的 `pitchAlignment` 属性.
     *
     * @param {string} [alignment] 设置文本的 `pitchAlignment` 属性。如果alignment是'auto'，它会自动匹配'rotationAlignment'.
     * @returns {Text} Returns itself to allow for method chaining.
     */
    setPitchAlignment(alignment: string): Text;
    /**
     * 返回文本的当前 `pitchAlignment` 属性.
     *
     * @returns {string} The current pitch alignment of the text in degrees.
     */
    getPitchAlignment(): string;
    /**
     * 设置动画
     * @param animationType
     * MAP_ANIMATION_NONE 无动画
     * MAP_ANIMATION_BOUNCE 弹跳
     * MAP_ANIMATION_DROP 坠落
     */
    setAnimation(animationType: string): void;
    /**
     * 显示
     */
    show(): void;
    /**
     * 隐藏
     */
    hide(): void;
    /**
     * 设置光标
     * @param cur 光标名称
     */
    setCursor(cur: string): void;
    /**
     * 设置文本内容
     * @param txt
     */
    setText(txt: string): Text;
    /**
     * 得到文本内容
     */
    getText(): string;
    /**
     * 设置文本样式
     * @param style
     */
    setStyle(style?: object): Text;
    /**
     * 得到文本样式
     */
    getStyle(): object;
}

用法

let text = new vjmap.Text({
    text: "中国ABC",
    anchor: "top",
    draggable: true,
    offset: [0, 0], // x,y 方向像素偏移量
    style:{     // 自定义样式
        'cursor': 'pointer',
        'opacity': 1,
        'padding': '12px',
        'border-radius': '4px',
        'background-color': '#0ff',
        'border-width': 0,
        'box-shadow': '0px 2px 6px 0px rgba(97,113,166,0.2)',
        'text-align': 'center',
        'font-size': '14px',
        'color': '#F33'
    }
});
text.setLngLat(map.getCenter()).addTo(map);

// --添加文本标记--这是基本dom的文本标记，如果数量多的文本，请用symbol来保证性能
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    message.error(res.error)
}
// 获取地图范围
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
    zoom: 2, // 设置地图缩放级别
    renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
// 根据地图本身范围缩放地图至全图显示
map.fitMapBounds();
let mapBounds = map.getGeoBounds();
await map.onLoad();
let marker = new vjmap.Marker();
marker.setLngLat(map.getCenter()).addTo(map);
let text = new vjmap.Text({
    text: "中国ABC",
    anchor: "top",
    draggable: true,
    offset: [0, 0], // x,y 方向像素偏移量
    style:{     // 自定义样式
        'cursor': 'pointer',
        'opacity': 1,
        'padding': '12px',
        'border-radius': '4px',
        'background-color': '#0ff',
        'border-width': 0,
        'box-shadow': '0px 2px 6px 0px rgba(97,113,166,0.2)',
        'text-align': 'center',
        'font-size': '14px',
        'color': '#F33'
    }
});
text.setLngLat(map.getCenter()).addTo(map);
// 设置一些自定义的属性
let customAttr = { "item": "test"};
text.customAttr = customAttr;
text.on('dragstart', (e) => {
    console.log("dragstart", e);
});
text.on('click', (e) => {
    // 获取自定义属性
    let txt = e.target;
    console.log("click", txt.customAttr.item);
});
text.on('mouseover', (e) => {
    console.log("mouseover", e);
});
text.on('mouseleave', (e) => {
    console.log("mouseleave", e);
});
text.on('dblclick', (e) => {
    console.log("dblclick", e);
});
text.on('contextmenu', (e) => {
    console.log("contextmenu", e);
});
text.on('mousedown', (e) => {
    console.log("mousedown", e);
});
text.on('mouseup', (e) => {
    console.log("mouseup", e);
});

示例

添加文本标记

能缩放的DIV文本

能缩放的符号文本

能缩放的文字多边形