Fengmap JavaScript SDK

地图显示 本模块将介绍各个初始化地图显示配置,如单/多楼层显示、显示级别、地图朝向、两楼层地图显示间距、二三维状态、指北针、点击高亮、动画开关等操作说明。

单/多楼层显示

地图初始化时可配置楼层显示数量,当地图为多层时,地图数据的楼层ID从groupID =1开始依次向上加1,默认显示第一层即groupID = 1的地图数据。如需自定义配置,可参照如下代码设置:

//代码中未配置主题服务器地址,将默认读取Fengmap服务器上的2001主题。
var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
    defaultVisibleGroups:[3],           //设置初始显示楼层,数组格式,可单个,可多个
    defaultFocusGroup: 3               //初始聚焦楼层
});
显示级别

Fengmap JavaScript SDK v2.0.0新增比例尺级别显示。一种是Fengmap JavaScript SDK v2.0.0 内部创建的1-29级的比例尺级别设置MapScaleLevel。第二种是Fengmap JavaScript SDK v2.0.0 提供的供用户自定义比例尺级别设置MapScale,此比例尺级别设置优先级高于其他级别设置。您可以根据需求设置地图初始级别,以及地图能显示的最大和最小级别。参考代码如下:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    mapScaleLevelRange: [16, 23],       // 比例尺级别范围, 16级到23级
    // mapScaleRange: [200, 4000]      // 自定义比例尺范围,单位(厘米)
    defaultMapScaleLevel: 19,          // 默认比例尺级别设置为19级
    // defaultMapScale: 1000,          // 默认自定义比例尺为 1:1000(厘米)

});
地图朝向

您可以自定义地图的初始朝向,如正南、正北或自定义角度等。参考设置如下所示:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    //设置地图默认状态。defaultControlsPose值可为方向枚举、角度值、或特定角度的Json对象的任意一种。
    //如设置二维模式下正北显示:
    //方向枚举型。可设置正南、正北、正东、正西、东南、西南等方向值。具体可参考fengmap.FMDirection类。
    defaultControlsPose: fengmap.FMDirection.NORTH,
    //defaultControlsPose: 90,     //角度值。
});
楼层显示间距

Fengmap JavaScript SDK 支持初始化设置两个楼层之间地图显示的间距,默认的间距为50,可自定义配置。参考设置如下:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    defaultGroupSpace:40 //两楼层间的高度
});
二三维状态

Fengmap JavaScript SDK 支持初始化设置地图的显示模式,二维或三维模式。参考设置如下:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    defaultViewMode:fengmap.FMViewMode.MODE_2D //初始二维还是三维状态,三维状态为MODE_3D
});
点击高亮

Fengmap JavaScript SDK 默认点击地图会高亮被选中的模型,如不需要点击地图时高亮模型,可修改配置modelSelectedEffect即可达到目的。参考设置如下:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    modelSelectedEffect:false          //支持单击模型高亮,false为单击时模型不高亮
});
动画开关

Fengmap JavaScript SDK 内置多种功能动画,如聚焦楼层切换动画、二三维切换动画、moveTo跳转动画等。默认开启状态。参考设置如下:

var map = new fengmap.FMMap({
    container : document.getElementById("map"), //设置显示地图容器
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key

    focusAnimateMode: false,            //开启聚焦层切换的动画显示
    viewModeAnimateMode:false,          //开启2维,3维切换的动画显示
    moveToAnimateMode:false,           //地图定位跳转动画设置
});