JavaScript API GL / 参考手册 / 自定义图层

ImageTileLayer

    用于创建自定义栅格瓦片图层。

构造函数
TMap.ImageTileLayer(options:ImageTileLayerOptions)
方法 返回值 说明
getId() string 获取图层的id。
setMap(map:Map/Null) this 设置展示图层的地图对象。
setVisible(visible: Boolean) this 设置图层是否可见。
setZIndex(zIndex: Number) this 设置图层绘制顺序。
setOpacity(opacity: Number) this 设置图层透明度。
destroy() void 销毁图层
静态方法 返回值                     说明
createCustomLayer(options: CustomLayerOptions) Promise 创建个性化图层平台配置的个性化图层。Promise处于fulfilled状态时传递ImageTileLayer图层对象给then方法绑定的处理方法，若鉴权失败则传递null。



ImageTileLayerOptions

    ImageTileLayer 配置参数。

属性名称                             类型                             说明
getTileUrl Function （必填）通过传入的瓦片坐标(x,y)以及zoom级别返回瓦片的URL(string类型)。该方法形式如下：Function(x: Number, y: Number, z: Number):string。
map Map 展示图层的地图对象。
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3。
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为18。
visible Boolean 是否可见，默认为true。
zIndex Number 图层绘制顺序，默认为1，有效范围为[1, 9999]。
opacity Number 图层透明度，默认为1。



CustomLayerOptions

    创建个性化图层时的配置参数。

属性名称                             类型                             说明
layerId String （必填）个性化图层的id。
map Map 展示图层的地图对象。
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示。
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示。
visible Boolean 是否可见，默认为true。
zIndex Number 图层绘制顺序，默认为1，有效范围为[1, 9999]。
opacity Number 图层透明度，默认为1。



WMSLayer

    用于创建基于OGC标准的WMS地图服务的图层类，仅支持EPSG3857坐标系统的WMS图层。

构造函数
new TMap.WMSLayer(options: WMSLayerOptions);
方法名 返回值 说明
setMap(map: Map/Null) this 设置展示图层的地图对象
setVisible(visible: Boolean) this 设置图层是否可见
setZIndex(zIndex: Number) this 设置图层绘制顺序
setOpacity(opacity: Number) this 设置图层透明度

WMSLayerOptions

    WMSLayer配置参数。

名称                                     类型                                 说明
url String 地图服务地址
map Map 展示图层的地图对象
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20
maxDataZoom Number 最大数据层级，当缩放层级大于该值时不再加载新数据，而是以此层级数据拉伸进行展示，默认与maxZoom相同
visible Boolean 是否可见，默认为true
zIndex Number 图层绘制顺序，默认为1，有效范围为[1, 9999]
opacity Number 图层透明度，默认为1
params WMSParams OGC标准的WMS地图服务的GetMap接口的参数

WMSParams 对象规范

名称 类型 说明
layers String 请求的图层名称（必填）
version String 请求的WMS的版本号



WMTSLayer

    用于创建基于OGC标准的WMTS地图服务的图层类，仅支持EPSG3857坐标系统的WMTS图层。

构造函数
new TMap.WMTSLayer(options: WMTSLayerOptions);
方法名 返回值                            说明                                                                                                            
setMap(map: Map/Null) this 设置展示图层的地图对象
setVisible(visible: Boolean) this 设置图层是否可见
setZIndex(zIndex: Number) this 设置图层绘制顺序
setOpacity(opacity: Number) this 设置图层透明度

WMTSLayerOptions 对象

    WMTSLayer配置参数。

名称                               类型                                说明
url String 地图服务地址
map Map 展示图层的地图对象
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20
maxDataZoom Number 最大数据层级，当缩放层级大于该值时不再加载新数据，而是以此层级数据拉伸进行展示，默认与maxZoom相同
visible Boolean 是否可见，默认为true
zIndex Number 图层绘制顺序，默认为1，有效范围为[1, 9999]
opacity Number 图层透明度，默认为1
params WMTSParams OGC标准的WMTS地图服务的GetTile接口的参数

WMTSParams

名称 类型            说明                                                
layer String 请求的图层名称（必填）
tileMatrixSet String 瓦片矩阵数据集（必填）
version String 请求的WMTS的版本号



ImageGroundLayer

    用于创建自定义图片图层，图片会随着地图缩放而缩放。

构造函数
new TMap.ImageGroundLayer(options);
参数说明 类型 说明
options ImageGroundLayerOptions 自定义图片图层参数
方法 返回值                             说明
setMap(map:Map) this 设置展示图层的地图对象。
setBounds(bounds: LatLngBounds) this 设置展示图层的地理范围。
setVisible(visible: Boolean) this 设置图层是否可见。
setZIndex(zIndex: Number) this 设置图层绘制顺序。
setOpacity(opacity: Number) this 设置图层透明度。
setSrc(src:String) this 更新图层资源路径，相同的url不会被更新。
getMap() Map 获取地图对象，若无返回null。
getId() string 获取图层的id。
getBounds() LatLngBounds 获取展示图层的地理范围。



ImageGroundLayerOptions

    ImageGroundLayer配置参数。

属性名称                             类型                             说明
bounds LatLngBounds （必填）图片覆盖的经纬度范围
src String （必填）图片url或base64，如果图片为url格式，图片服务器必须允许跨域访问
map Map 展示图层的地图对象
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20
visible Boolean 是否可见，默认为true
zIndex Boolean 图层绘制顺序，默认为1
opacity Number 图层透明度，默认为1



CanvasGroundLayer

    用于创建自定义图片图层，图片会随着地图缩放而缩放。

构造函数
new TMap.CanvasGroundLayer(options);
参数说明 类型 说明
options CanvasGroundLayerOptions 自定义Canvas图层参数
方法 返回值                             说明
setMap(map:Map) this 设置展示图层的地图对象。
setBounds(bounds: LatLngBounds) this 设置展示图层的地理范围。
setVisible(visible: Boolean) this 设置图层是否可见。
setZIndex(zIndex: Number) this 设置图层绘制顺序。
setOpacity(opacity: Number) this 设置图层透明度。
setCanvas(canvas: HTMLCanvasElement) this 更新canvas元素，同一个canvas不会被重复更新。
refresh() null 刷新canvas，当canvas图像内容改变时调用，否则canvas的内容不会更新到地图上。
getMap() Map 获取地图对象，若无返回null。
getId() string 获取图层的id。
getBounds() LatLngBounds 获取展示图层的地理范围。



CanvasGroundLayerOptions

    CanvasGroundLayer配置参数。

属性名称                             类型                             说明
bounds LatLngBounds （必填）纹理覆盖的经纬度范围。
canvas HTMLCanvasElement （必填）Canvas元素，如果canvas中有图片，必须保证原始的图片服务允许跨域访问。
map Map 展示图层的地图对象。
minZoom Number 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3。
maxZoom Number 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20。
visible Boolean 是否可见，默认为true。
zIndex Boolean 图层绘制顺序，默认为1。
opacity Number 图层透明度，默认为1。



MaskLayer

    用于创建遮罩图层，其覆盖区域内3D建筑及POI将不显示，可配合自定义图层进行使用。

构造函数
new TMap.MaskLayer(options:MaskLayerOptions)
方法 返回值                             说明
add(geometries: MaskGeometry[]) this 新增遮罩区域，可批量添加。
update(geometries: MaskGeometry[]) this 更新遮罩区域数据，已存在id则更新已有数据，若不存在则添加数据。
get(id: String) MaskGeometry 获取指定遮罩区域。
getAll() MaskGeometry[] 获取图层内所有遮罩区域。
remove(ids: String[]) this 删除指定遮罩区域。
clear() this 清除所有遮罩区域。
setMap(map: Map I null) this 设置图层绑定的地图对象，若为null则将其从地图中移除。
getMap() Map 获取地图对象，若为空则返回null。



MaskLayerOptions

    MaskLayer 配置参数。

属性名称 类型 说明
map Map 绑定的地图对象。
geometries MaskGeometry[] 遮罩区域数据。



MaskGeometry

    单个遮罩区域数据。

属性名称 类型 说明
id String 唯一标识。
paths LatLng[] 遮罩轮廓线坐标点串。



GLCustomLayer

    GLCustomLayer 用于创建自定义GL图层，可配合threejs实现自定义覆盖物效果 使用该接口需要引入model附加库。

构造函数
new TMap.GLCustomLayer(options:GLCustomLayerOptions)
参数名 类型 说明
options GLCustomLayerOptions GL自定义图层参数
方法名 返回值 说明
setKeepFps(keepFps：Boolean) this 设置是否保持帧率渲染
show() this 显示图层
hide() this 隐藏图层
destroy() this 销毁图层对象
setRender(render: Function) this 设置render方法
setZIndex(zIndex: Number) this 设置图层渲染层级
setMinZoom(minZoom: Number) this 设置图层最小缩放倍数
getMinZoom(minZoom: Number) this 获取图层最小缩放倍数
setMaxZoom(maxZoom: Number) this 设置图层最大缩放倍数
getMaxZoom(maxZoom: Number) this 获取图层最大缩放倍数



GLCustomLayerOptions 对象规范

GLCustomLayer配置参数。

属性名称 类型 说明
id String 唯一标识
zIndex Number 图层渲染层级
minZoom Number 图层最小缩放倍数，默认为3
maxZoom Number 图层最大缩放倍数，默认为20
map Map 绑定的地图对象
visible Boolean 图层是否可见
keepFps Boolean 是否保持恒定帧率渲染,当渲染存在动画时需设置为true，默认为false
init Function 自定义的初始化方法
render Function 自定义的渲染方法

示例：

// 定义THREE相关项
let renderer, camera, scene, group;
let mapCamera; // 地图相机
const glCustomLayer = new TMap.GLCustomLayer({
    id: 'glCustomLayer',
    map,
    keepFps: true, // 是否保持恒定帧率渲染,当渲染存在动画时设置为true
    // visible: false,
    init: (gl) => {
        // 初始化THREE

        renderer = new THREE.WebGLRenderer({
            context: gl,
            antialias: true
        });
        renderer.autoClear = false;
        renderer.outputEncoding = THREE.sRGBEncoding;

        // 创建THREE.js中的相机
        let mapCamera = map.getCamera(); // 获取地图相机
        const { fovy, view, near, far, distance } = mapCamera;
        const aspect = (view.right - view.left) / (view.top - view.bottom);
        camera = new THREE.PerspectiveCamera(fovy, aspect, near, far);
        camera.position.z = distance;
        scene = new THREE.Scene();
        
        group = new THREE.Group();
        scene.add(group);

        // THREE.js生成自定义模型 以立方体为例
        const geometry = new THREE.BoxGeometry(200, 200, 200);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
        const cube = new THREE.Mesh(geometry, material);
        const position = new TMap.LatLng(39.7946, 116.526, 0);
        // 坐标转换 经纬度转THREE中的世界坐标
        const coord = map.glLatLngToPosition(position);
        cube.position.set(coord.x, coord.y, coord.z);
        // 用group添加
        group.add(cube);

        // 需将构建的Three相关项返回
        return { renderer, camera, scene, group };
    },
    render: () => {
        renderer.render(scene, camera);
    }
});

这篇文章对您解决问题是否有帮助？

已解决
未解决