1. MapLayer

Extends: Layer

1.1. 初始化 new MapLayer(options)

影像服务图层,可实现天地图、高德、Google、OpenStreetMap、MapBox、Bing等在线底图的添加、获取、移除和显隐等操作

Param Type Description
options Object

包含以下参数的Object对象：
[options.name] String

图层名称；
[options.show] Boolean

是否显示；
[options.customGroupId] String

若使用自定义分组，该图层所在分组的名称。

Example

//通过图层管理类统一创建
let imageryMapLayer = layerManager.createLayer(BOSGeo.LayerType.IMAGERY, "影像图层");

1.2. 属性

属性名 Type Default Description
show Boolean

是否显示图层
opacity Number

不透明度
color String

颜色
maps BaseMap 0

所有影像与地图服务图层
order Number 0

排序序号
customGroupId String

分组id

1.3. 方法

1.3.1. mapLayer.add(options)

添加一个影像服务

Returns : BaseMap -

基础地图类

Param Type Default Description
options Object

包含以下属性的对象
options.map ImageryMapType | BaseMap

影像与地图服务类型或基础地图类；
[options.baseMapKey] String

影像底图类型对应的key或token，如天地图、MapBox、BIYING底图等；若不填则默认使用内置Key
options.name String

若options.map为ImageryMapType.SIMPLEIMAGE时，需要填入简单影像图片名称；
options.url String

若options.map为ImageryMapType.SIMPLEIMAGE时，需要填入简单影像图片地址；
options.extent Array.<Number>

若options.map为ImageryMapType.SIMPLEIMAGE时，需要填入简单影像图片范围。
options.useCacheDB Object false

是否使用影像缓存

Example

//Example 1.*****************************添加TDT_IMAGERY***********************************
var layer = layerManager.createLayer(BOSGeo.LayerType.IMAGERY, "影像图层");
layer.add({ map: BOSGeo.ImageryMapType.TDT_IMAGERY });

Example 

//Example 2.****************************添加SIMPLEIMAGE *********************************
var layer = layerManager.createLayer(BOSGeo.LayerType.IMAGERY, "影像图层");
layer.add({
    map: BOSGeo.ImageryMapType.SIMPLEIMAGE,
    name: "图片a",
    url: "https://bosgeo.boswinner.com/geoData/images/europe_vir_2016_lrg.png",
    extent: [-180, -90, 0, 90]
});

Example 

//Example 3.***************************添加WMS_IMAGE***********************************
var layer = layerManager.createLayer(BOSGeo.LayerType.IMAGERY, "影像图层");
layer.add({
    map: BOSGeo.ImageryMapType.WMS_IMAGE,
    name: "wms",
    url: 'http://bosgeo.bimwinner.com/codex/topp/wms',
    layers: 'topp:tasmania_state_boundaries',
    rectangle: BOSGeo.Rectangle.fromDegrees(143.83482400000003, -43.648056, 148.47914100000003, -39.573891)
});

Example 

//Example 4.***************************添加WMTS_IMAGE**********************************
var layer = layerManager.createLayer(BOSGeo.LayerType.IMAGERY, "影像图层");
layer.add({
    map: BOSGeo.ImageryMapType.WMTS_IMAGE,
    name: "wmts",
    url: "http://bosgeo.bimwinner.com/codex/service/wmts?",
    layer: "RasterImages:fsqcDOM3",
    style: "raster",
    format: "image/png",
    tileMatrixSetID: "EPSG:4326", // 900913
    tileMatrixLabels: [
        "EPSG:4326:0",
        "EPSG:4326:1",
        "EPSG:4326:2",
        "EPSG:4326:3",
        "EPSG:4326:4",
        "EPSG:4326:5",
        "EPSG:4326:6",
        "EPSG:4326:7",
        "EPSG:4326:8",
        "EPSG:4326:9",
        "EPSG:4326:10",
        "EPSG:4326:11",
        "EPSG:4326:12",
        "EPSG:4326:13",
        "EPSG:4326:14",
        "EPSG:4326:15",
        "EPSG:4326:16",
        "EPSG:4326:17",
        "EPSG:4326:18",
        "EPSG:4326:19",
        "EPSG:4326:20",
        "EPSG:4326:21",
    ],
    tilingScheme: new BOSGeo.GeographicTilingScheme()
});

Example 

//Example 5.****************************添加URL_IMAGE***********************************
let imageryLayer = geomap.layerManager.createLayer(BOSGeo.LayerType.IMAGERY, '离线地图服务');
imageryLayer.add({
    map: BOSGeo.ImageryMapType.URL_IMAGE,
    url: './resource/gmaps/{z}/{x}/{y}.png',
    name: '某某离线地图服务'
});

Example 

//Example 6.*************************添加ArcGIS Mapserver服务***********************************
let layer=layerManager.createLayer(BOSGeo.LayerType.IMAGERY,"ArcGIS Mapserver服务图层");
layer.add({
    map: BOSGeo.ImageryMapType.ArcGisMapServerImageryProvider,
    name: "ArcGIS Mapserver服务1",
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",//ArcGIS自然地图
});

Example 

//Example 7.*************************添加MVT矢量切片服务***********************************
let imglayer=layerManager.createLayer(BOSGeo.LayerType.IMAGERY,"IMAGERY服务图层");
var styleUrl = "https://api.maptiler.com/maps/basic/style.json?key=pSHUA9sSkNny3iqoWG4P"; //Mapbox Streets v8样式json地址
fetch(styleUrl)
    .then((res) => res.json())
    .then((style) => {
        layer.add({
            map: BOSGeo.ImageryMapType.MVT,
            name: "mvt1",
            style: style,
        });
    });

Example 

//Example 8.*************************添加geoserver发布的MVT矢量切片服务***********************************
//加载geoserver发布的mvt矢量切片, 样式说明请参考http://www.mapbox.cn/mapbox-gl-js/style-spec/。
const mapStyle2  = {
    "version": 8,           //样式版本，当前必须设置8。
    "name": "OSM Liberty",  //样式名称
    "sources": {            //mapbox地图使用的地图服务资源定义。
    "openmaptiles": {
        "type": "vector",
        "tiles":["https://geoserver-alpha.boswinner.com/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=topp:states&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",
                'https://geoserver-alpha.boswinner.com/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=BOSGeo:futianFjson&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'], //服务地址
        "name":"OpenMapTiles",
        minzoom: 1,        //最小层级
        maxzoom: 18        //最大层级
    }
    },
    "glyphs": "https://somewhere.com/font-glyphs/glyphs/{fontstack}/{range}.pbf",//mapbox地图使用的标注字体。
    "layers": [             //mapbox地图使用的图层定义。
    {
    "id": "futianFjson", //图层名
    "type": "fill",      //面填充类型
    "source": "openmaptiles", //地图服务资源
    "source-layer": "futianFjson",//图层名
    "filter": [
    "all"
    ],
    "paint": {
    "fill-color": "#d8e8c8", //面填充颜色
    "fill-opacity": 0.7,     //面透明度
    "fill-outline-color": "rgba(95, 208, 100, 1)" //面外轮廓颜色
    }
} ,{
        "id": "states",//图层名
        "type": "line", //线
        "source": "openmaptiles",//地图服务资源
        "source-layer": "states",//图层名
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#3031ff", //线颜色
            "line-width": 1,         //线宽
            "line-dasharray": [1.5, 3]
        }
    }, ]
}
layer.add({
    map: BOSGeo.ImageryMapType.MVT,
    name: "mvt2",
    style: mapStyle2,
});

1.3.2. mapLayer.remove(map)

移除影像服务

Param Type Description
map ImageryMapType | BaseMap

影像与地图服务类型或基础地图类；

1.3.3. mapLayer.getMapByName(name)

根据名称获取map

Returns : BaseMap -

基础地图类

Param Type Description
name String

影像服务名称

1.3.4. mapLayer.zoomToLayer()

缩放至本图层

1.3.5. mapLayer.removeByName(name)

根据名称移除影像服务

Param Type Description
name String

影像服务名称

1.3.6. mapLayer.removeAll()

移除该图层所有影像

1.3.7. mapLayer.getMapsVisible([name])

获取图层的显隐信息

Param Type Description
[name] String

若不填则返回所有图层显隐信息

1.3.8. mapLayer.setMapsVisibleByName(name, visible)

设置影像显隐

Param Type Description
name String

影像服务名称
visible Boolean

是否显示

1.3.9. mapLayer.destroy()

销毁本图层

1.3.10. mapLayer.on(eventType, callBack)

绑定事件

Param Type Description
eventType String | LayerEventType

图层事件类型
callBack function

回调函数

Example

layer.on(BOSGeo.LayerEventType.ADD, (result) => {
    console.log(result);
});

1.3.11. mapLayer.fire(eventType, value)

触发事件

Param Type Description
eventType String | LayerEventType

监听事件
value *

触发事件时可传入任意值

1.3.12. mapLayer.hasOn(eventType, callBack)

判断该函数是否已绑定该事件

Returns : Boolean -

是否绑定了该事件

Param Type Description
eventType String | LayerEventType

监听事件
callBack function

回调函数

Example

var hasBind = layer.hasOn(BOSGeo.LayerEventType.ADD, callback);

1.3.13. mapLayer.once(eventType, callBack)

绑定后该函数只执行一次

Param Type Description
eventType String | LayerEventType

监听事件
callBack function

回调函数

1.3.14. mapLayer.off(eventType, callBack)

取消事件绑定

Param Type Description
eventType String

监听事件
callBack function

回调函数
版权所有@盈嘉互联（北京）科技有限公司 京ICP备15051988号-9 Copyright © 2022 all right reserved，powered by Gitbook该文件修订时间： 2022-07-19 11:34:25

results matching ""

    No results matching ""