Fengmap JavaScript SDK

下载SDK 配置SDK 版本升级
三维室内地图 JavaScript SDK v2.7.0版本发布!
indoormaps

为您的web应用加入3D室内地图Fengmap JavaScript SDK是一套基于WebGL和HTML5技术的浏览器应用程序接口。您可以使用该SDK开发适用于web端的地图应用,通过调用地图接口,您可以轻松访问蜂鸟公开地图资源、私有云端地图资源、离线地图数据,快速构建功能丰富、交互性强、适用于各个行业的室内地图类应用程序,或者快速将室内地图集成到您的应用程序中。
如果您有移动端webapp开发需要,Fengmap JavaScript SDK还可以帮助您方便快速的开发适用于移动端浏览器、微信、QQ的应用程序,或者将室内地图完美的集成到您的webapp中。

map
地图显示与操作
map
覆盖物
map
查询与分析
map
路径与导航

功能体验

<!-- 地图容器 -->
<div id="fengMap"></div>

<!-- 地图显示js部分 -->
<script type="text/javascript">
    //定义全局map变量
    var fmapID = '10347'; //mapId
    var map = new fengmap.FMMap({
        container: document.getElementById('fengMap'), //渲染dom
        appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
        key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
    });

    //打开fengMap服务器上的地图数据和主题
    map.openMapById(fmapID);
</script>
//定义全局map变量
var map;
var fmapID = '10347';
//定义按钮型楼层切换控件
var btnFloorControl;
//定义滚动型楼层切换控件
var scrollFloorControl;

window.onload=function(){
    map = new fengmap.FMMap({
        container : document.getElementById('fengMap'),     //渲染dom
        mapServerURL:'./data/' + fmapID,      //地图数据位置
        mapThemeURL : './data/theme',        //主题数据位置
        defaultThemeName: '2001',       //设置主题
        appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
        key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
        focusAlphaMode: true,   //开启非聚焦层的透明显示模式
        focusAlpha:0.3          //非聚焦层的透明度,当focusAlphaMode = true时有效
    });

    //打开地图数据
    map.openMapById(fmapID);

    //地图加载完回调事件
    map.on('loadComplete', function() {
        //加载按钮型楼层切换控件
        loadBtnFloorCtrl();

        //加载滚动型楼层切换控件
        //loadScrollFloorCtrl();
    });

    //聚焦楼层改变事件
    map.on('focusGroupIDChanged', function (event) {
        console.log('地图聚焦楼层改变!', map.focusGroupID);
    });
};

//加载按钮型楼层切换控件
function loadBtnFloorCtrl() {
    //楼层控制控件配置参数
    var btnFloorCtlOpt = new fengmap.controlOptions({
        //默认在右下角
        position: fengmap.controlPositon.RIGHT_TOP,
        //初始楼层按钮显示个数配置。默认显示5层,其他的隐藏,可滚动查看
        showBtnCount: 6,
        //初始是否是多层显示,默认单层显示
        allLayer: false,
        //位置x,y的偏移量
        offset: {
            x: -20,
            y: 20
        }
    });
    //不带单/双层楼层控制按钮,初始时只有1个按钮,点击后可弹出其他楼层按钮
    btnFloorControl = new fengmap.buttonGroupsControl(map, btnFloorCtlOpt);
    //楼层切换
    btnFloorControl.onChange(function (groups, allLayer) {
        //groups 表示当前要切换的楼层ID数组,
        //allLayer表示当前楼层是单层状态还是多层状态。
        console.log('当前切换楼层:' + groups);
    });
    //切换楼层,changeFocusGroup(目标层groupID,是否多层状态)
    //btnFloorControl.changeFocusGroup(2, true);
    //默认是否展开楼层列表,true为展开,false为不展开
    btnFloorControl.expand = true;
    //楼层控件是否可点击,默认为true
    btnFloorControl.enableExpand = true;
}

//加载滚动行楼层切换控件
function loadScrollFloorCtrl() {
    var scrollFloorCtlOpt = new fengmap.controlOptions({
        //默认在右上角
        position: fengmap.controlPositon.RIGHT_TOP,
        //默认显示楼层的个数
        showBtnCount: 6,
        //初始是否是多层显示,默认单层显示false
        allLayer: false,
        //是否显示多层/单层切换按钮
        needAllLayerBtn: true,
        //位置x,y的偏移量
        offset: {
            x: -20,
            y: 20
        }
    });
    scrollFloorControl = new fengmap.scrollGroupsControl(map, scrollFloorCtlOpt);
    //楼层切换
    scrollFloorControl.onChange(function (groups, allLayer) {
        //groups 表示当前要切换的楼层ID数组,
        //allLayer表示当前楼层是单层状态还是多层状态。
        console.log(groups);
    });
    //切换楼层方法,changeFocusGroup(目标层groupID)
    //scrollFloorControl.changeFocusGroup(2);
    //切换单、多层方法,changeGroupsSelect(ture表示多层/false表示单层)
    //scrollFloorControl.changeGroupsSelect(true);
}
//定义全局map变量
var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('fengMap'), //渲染dom
    mapServerURL: './data/' + fmapID,  //地图数据位置
    mapThemeURL: './data/theme',  //主题数据位置
    defaultThemeName: '2001',
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
});

//打开Fengmap服务器上的地图数据和主题
map.openMapById(fmapID);

//地图加载完成回掉方法
map.on('loadComplete', function () {
    addImageMarker();  //添加图片标注imageMarker
    addTextMarker();   //添加文字标注textMarker
    addLineMarker();   //添加线标注lineMarker
    drawPolygon();  //绘制多边形
});

//1.添加图片标注ImageMarker
function addImageMarker() {
    var groupLayer = map.getFMGroup(map.focusGroupID);  //获取当前楼层

    //实例化方法1:自定义图片标注层
    //var layer = new fengmap.FMImageMarkerLayer();
    //添加图片标注层到模型层。否则地图上不会显示
    //groupLayer.addLayer(layer);

    //实例化方法2:
    //返回当前层中第一个imageMarkerLayer,如果没有,则自动创建
    var layer = groupLayer.getOrCreateLayer('imageMarker');

    //图标标注对象,默认位置为该楼层中心点
    var gpos = groupLayer.mapCoord;
    var im = new fengmap.FMImageMarker({
        //标注x坐标点
        x: gpos.x,
        //标注y坐标点
        y: gpos.y,
        //设置图片路径
        url: 'images/blueImageMarker.png',
        //设置图片显示尺寸
        size: 32,
        //标注高度,大于model的高度
        height: 4,
        callback: function () {
            // 在图片载入完成后,设置 "一直可见",不被其他层遮挡
            im.alwaysShow();
        }
    });
    layer.addMarker(im);

    groupLayer.addLayer(layer);    //添加图片标注层到模型层。否则地图上不会显示

};
//2.添加文本标注
function addTextMarker() {
    var groupLayer = map.getFMGroup(map.focusGroupID);  //获取当前楼层
    //返回当前层中第一个textMarkerLayer,如果没有,则自动创建
    var layer = groupLayer.getOrCreateLayer('textMarker');

    //文字标注对象,默认位置为该楼层中心点
    var gpos = groupLayer.mapCoord;
    var tm = new fengmap.FMTextMarker({
        //标注x坐标点
        x: gpos.x,
        //标注y坐标点
        y: gpos.y,
        //标注值
        name: "这是一个文字标注",
        //文本标注填充色
        fillcolor: "255,0,0",
        //文本标注字体大小
        fontsize: 20,
        //文本标注边线颜色
        strokecolor: "255,255,0",
        //文本标注透明度
        alpha: 0.5,
        //textMarker加载完回调函数
        callback: function () {
            // 在marker载入完成后,设置 "一直可见",不被其他层遮挡
            tm.alwaysShow();
        }
    });
    //文本标注层添加文本Marker
    layer.addMarker(tm);
}

//3.添加线标注
function addLineMarker() {
    //配置路径线的线型、线宽、透明度等参数
    var lineStyle1 = {
        //设置线的宽度
        lineWidth: 8,
        //设置线的透明度
        alpha: 0.9,
        url: "images/arrow.png",
        //是否开启平滑线功能
        smooth: true,
        //设置线的颜色,十六进制颜色值
        //godColor: '#FF0000',
        //设置边线的颜色,十六进制颜色值
        //godEdgeColor: '#FF0000',
        //设置线的类型为导航线
        lineType: fengmap.FMLineType.FMARROW,
        //设置线动画,false为动画
        noAnimate: true,
    };
    //当前的路线
    var naviLines = [];
    //线标注线数据
    var naviResults = [{
        groupId: 1,
        points: [{x: 12961602.00,y: 4861851.50,z: 1},
                {x: 12961625.00,y: 4861850.50,z: 1},
                {x: 12961625.00,y: 4861825.00,z: 1}]
    }];
    //创建路径线图层
    var line = new fengmap.FMLineMarker();
    //循环naviResults中坐标点集合,通过坐标点绘制路径线
    for (var i = 0; i < naviResults.length; i++) {
        var result = naviResults[i];
        var gid = result.groupId;
        var points = result.points;
        //创建FMSegment点集,一个点集代表一条折线
        var seg = new fengmap.FMSegment();
        seg.groupId = gid;
        seg.points = points;
        //将FMSegment绘制到线图层上
        line.addSegment(seg);
        //绘制线
        var lineObject = map.drawLineMark(line, lineStyle);
        naviLines.push(line);
    }
}
//矩形标注
var rectangleMarker;
//圆形标注
var circleMaker;
//自定义形状标注
var polygonMarker;
//4.绘制多边形
function drawPolygon() {
    var groupLayer = map.getFMGroup(map.focusGroupID);  //获取当前楼层
    //返回当前层中第一个polygonMarker,如果没有,则自动创建
    var layer = groupLayer.getOrCreateLayer('polygonMarker');

    //创建矩形标注
    createRectangleMaker();
    layer.addMarker(rectangleMarker);

    //创建圆形标注
    createCircleMaker();
    layer.addMarker(circleMaker);

    //创建自定义形状标注
    createPolygonMaker(coords);
    layer.addMarker(polygonMarker);
}
//创建矩形标注
function createRectangleMaker() {
    rectangleMarker = new fengmap.FMPolygonMarker({
        //设置颜色
        color: '#9F35FF',
        //设置透明度
        alpha: .3,
        //设置边框线的宽度
        lineWidth: 1,
        //设置高度
        height: 8,
        //多边形的坐标点集数组
        points: {
            //设置为矩形
            type: 'rectangle',
            //设置此形状的中心坐标
            center: {
                x: 1.2961583E7,
                y: 4861865.0
            },
            /*startPoint: {
                x: 1.2961583E7,
                y: 4861865.0
            },*/
            //设置矩形的宽度
            width: 30,
            //设置矩形的高度
            height: 30
        }
    });
}
//创建圆形标注
function createCircleMaker() {
    circleMaker = new fengmap.FMPolygonMarker({
        //设置颜色
        color: '#3CF9DF',
        //设置透明度
        alpha: .3,
        //设置边框线的宽度
        lineWidth: 3,
        //设置高度
        height: 7,
        //多边形的坐标点集数组
        points: {
            //设置为圆形
            type: 'circle',
            //设置此形状的中心坐标
            center: {
                x: 1.2961644E7,
                y: 4861874.0
            },
            //设置半径
            radius: 30,
            //设置段数,默认为40段
            segments: 40
        }
    });
}
//创建自定义形状标注
function createPolygonMaker(coords) {
    //实例化polygonMarker
    polygonMarker = new fengmap.FMPolygonMarker({
        //设置透明度
        alpha: .5,
        //设置边框线的宽度
        lineWidth: 1,
        //设置高度
        height: 6,
        //多边形的坐标点集数组
        points: [{x: 12961583,y: 4861865,z: 56},
                {x: 12961644,y: 4861874,z: 56},
                {x: 12961680,y: 4861854,z: 56},
                {x: 12961637,y: 4861819,z: 56},
                {x: 12961590,y: 4861835,z: 56}]
    });
}
//定义全局map变量
var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('fengMap'), //渲染dom
    mapServerURL: './data/' + fmapID,  //地图数据位置
    mapThemeURL: './data/theme',  //主题数据位置
    defaultThemeName: '2001',    //设置主题
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
});

//打开fengMap服务器上的地图数据和主题
map.openMapById(fmapID);

//地图加载完成回调方法,执行测试搜索分析。
map.on('loadComplete', function () {
    //创建FMSearchAnalyser
    var searchAnalyser = new fengmap.FMSearchAnalyser(map, map.getCurrDecodeData());
    //创建FMSearchRequest
    var searchRequest = new fengmap.FMSearchRequest();
    //设置搜索参数
    searchRequest.keyword = "测试关键字";
    //搜索分析
    searchAnalyser.query(searchRequest, function (result) {
        //搜索结果
        console.log(result);
    });
});
//定义全局map变量
var fmapID = '10347'; //mapId

//定义路径规划对象
var naviAnalyser = null;
//起终点坐标
var coords = [{x:12961699.79823795,y:4861826.46384646,groupID:6},{x:12961587.6306147,y:4861844.85608228,groupID:5}];

//初始化地图对象
var map = new fengmap.FMMap({
    container: document.getElementById('fengMap'), //渲染dom
    mapServerURL: './data/' + fmapID, //地图数据位置
    mapThemeURL: './data/theme',  //主题数据位置
    defaultThemeName: '2001',  //设置主题
    appName:'蜂鸟研发SDK_2_0',           //开发者申请应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
});

//打开fengMap服务器上的地图数据和主题
map.openMapById(fmapID);

//地图加载完成回掉方法
map.on('loadComplete', function () {
    //初始化路径分析对象
    naviAnalyser = new fengmap.FMNaviAnalyser();
    naviAnalyser.init(map);
    drawNaviLine();
});
//画导航线
function drawNaviLine() {
    addMarker(coords[0], 'start');
    addMarker(coords[1], 'end');

    //根据已加载的fengmap.FMMap导航分析,判断路径规划是否成功
    var analyzeNaviResult = naviAnalyser.analyzeNavi(coords[0].groupID, coords[0], coords[1].groupID, coords[1], fengmap.FMNaviMode.MODULE_SHORTEST);
    if (fengmap.FMRouteCalcuResult.ROUTE_SUCCESS != analyzeNaviResult) {
        return;
    }
    //获取路径分析结果对象,所有路线集合
    var results = naviAnalyser.getNaviResults();
    //初始化线图层
    var line = new fengmap.FMLineMarker();
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        //楼层id
        var gid = result.groupId;
        //路径线点集合
        var points = result.getPointList();

        var points3d = [];
        points.forEach(function (point) {
            points3d.push({
                //x坐标点
                'x': point.x,
                //y坐标点
                'y': point.y,
                //线标注高度
                'z': 1
            });
        });
        //fengmap.FMSegment点集,一个点集代表一条折线
        var seg = new fengmap.FMSegment();
        seg.groupId = gid;
        seg.points = points3d;
        line.addSegment(seg);
    }
    //绘制线
    //配置线型、线宽、透明度等
    var lineStyle = {
        //设置线的宽度
        lineWidth: 6,
        //设置线的透明度
        alpha: 0.8,
        //设置线的类型为导航线
        lineType: fengmap.FMLineType.FMARROW,
        //设置线动画,false为动画
        noAnimate: false
    };
    map.drawLineMark(line, lineStyle);
}
//添加起点终点marker
function addMarker(coord, type) {
    //获取目标点层
    var group = map.getFMGroup(coord.groupID);
    //创建marker,返回当前层中第一个imageMarkerLayer,如果没有,则自动创建
    var layer = group.getOrCreateLayer('imageMarker');
    var markerUrl = '';
    if (type === 'start') {
        markerUrl = 'images/start.png';
    } else {
        markerUrl = 'images/end.png';
    }
    //图标标注对象,默认位置为该楼层中心点
    var im = new fengmap.FMImageMarker({
        x: coord.x,
        y: coord.y,
        //设置图片路径
        url: markerUrl,
        //设置图片显示尺寸
        size: 32,
        //marker标注高度
        height: 2,
        callback: function () {
            //设置 "一直可见",不参与避让
            //im.alwaysShow();
        }
    });
    //添加imageMarker
    layer.addMarker(im);
}

账号与Key 首先请注册成为蜂鸟云用户,成为平台用户您可以访问蜂鸟云控制台,并且创建您的JavaScript应用和Key。

获取密钥(Key)
注册蜂鸟云账户
创建您的应用项目
获取SDK Key

关于Fengmap JavaScript SDK 1、蜂鸟三维地图SDK永久免费,任何应用及网站都可以使用。您需要先申请Key,才能正常使用SDK,有关详情请参阅《蜂鸟云服务条款》
2、蜂鸟三维地图JavaScript SDK V2.0.0及以上版本与V1.2.0版本不兼容,建议升级为V2.0.0以上版本,有关详情请参考版本升级帮助。
3、JavaScript SDK 历史版本、开发手册请通过相关下载开发手册查看和下载。