Fengmap JavaScript SDK

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

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

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

功能体验

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

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

    //打开fengMap服务器上的地图数据和主题
    map.openMapById(fmapID);
</script>
<!-- 楼层按钮组界面部分 -->
<div class="btn-group-vertical group-layer" data-toggle="buttons">
    <label class="btn btn-primary btn-layer" ><i class="icon iconfont"></i></label>
</div>

<!-- 楼层按钮组js部分 -->
var gui = {};
gui.LayerGroup = function() {
    this.allLayer = true; //表示当前单层或多层显示状态。true为多层。
    this.change_ = null;
    this.inited = false; //是否已经初始化
};
gui.LayerGroup.prototype = {
    init: function(gs, focusGroupId) {
        var this_ = this;
        $('.layer-list').html('');
        for (i = gs.length - 1; i >= 0; i--) {
            var g = gs[i];
            $('.layer-list').append(
                this.createLayerButton_(g.gid, g.gname.toUpperCase(),
                    focusGroupId == g.gid
                ));
        }
        $('.group-layer .btn-primary').on('click', function(event) {
            if (this_.allLayer)
                this_.allLayer = false;
            else
                this_.allLayer = true;
                
            this_.triggerChange_();
        });
        this.inited = true;
    },
    onChange: function(change) {
        this.change_ = change;
    },
    createLayerButton_: function(gid, lbl, selected) {
        var this_ = this            .attr('data-gid', gid)
            .on('click', function() {
                if ($(".layer-list>label[class*='active']").text() === $(this).text()) return;
                $(".layer-list>label[class*='active']").removeClass('active');
                $(this).addClass('active');
                this_.triggerChange_();
            });
        if (selected) {
            ele.addClass('active');
        }
        return ele;
    },
    triggerChange_: function() {
        if (this.change_ !== null) {
            var groups = [];
            //var ele = $('.layer-list input[type="radio"]:checked');
            var ele = $(".layer-list>label[class*='active']");

            if (ele.length == 1) {
                groups.push(parseInt(ele.attr('data-gid')));
            }
            this.change_(groups);
            checkBtn();
        }
    }
};

var layerGroup = new gui.LayerGroup(); //实例化图层控制控件

//定义全局map变量
var map;
var fmapID = '10347';

window.onload=function(){
    map = new fengmap.FMMap({
        container : document.getElementById('fengMap'),     //渲染dom
        mapServerURL:'./data/' + fmapID,      //地图数据位置
        mapThemeURL : './data/theme',        //主题数据位置
        appName:'fmdemo',           //开发者申请应用名称
        key:'ac9a8a62f93648842203c09b24241425',  //开发者申请应用下web服务的key       
        focusAnimateMode: true,            //关闭聚焦层切换的动画显示
        focusAlphaMode: true,   //开启非聚焦层的透明显示模式
        focusAlpha:0.3          //非聚焦层的透明度
    });

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

    //地图加载完回调事件
    map.on('loadComplete', function() {
        //初始化显示楼层
        layerGroup.init(map.listGroups, map.focusGroupID);
    });
    //图层控制控件的按钮点击事件,单层和多层模式设置
    layerGroup.onChange(function(sg) {
        if (layerGroup.allLayer) {
            map.visibleGroupIDs = map.groupIDs;
        } else {
            map.visibleGroupIDs = sg;
        }
        map.focusGroupID = sg[0];
    });
};
//定义全局map变量
var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('map-container'), //渲染dom
    appName:'fmdemo',           //开发者申请应用名称
    key:'ac9a8a62f93648842203c09b24241425',  //开发者申请应用下web服务的key
});

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

//地图加载完成回掉方法
map.on('loadComplete', function () {
    addImageMarker();  //添加图片标注ImageMarker
    addTextMarker();   //添加文字标注TextMarker 
    addLocationMarker(); //添加定位标注
    drawLines();    //绘制折线
    drawPolygon();  //绘制多边形
    drawCircle();   //绘制圆形
    drawRectangle(); //绘制矩形
});

//1.添加图片标注ImageMarker
function addImageMarker() {
    var groupLayer = map.getFMGroup(map.focusGroupID);  //获取当前楼层
    var layer = new fengmap.FMImageMarkerLayer();  //实例化自定义图片标注层

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

    //图标标注对象,默认位置为该楼层中心点
    im = new fengmap.FMImageMarker({
        url:'image/blueImageMarker.png',        //设置图片路径
        size:64 ,                                  //设置图片显示尺寸
        callback: function() {
            // 在图片载入完成后,设置 "一直可见"
            im.alwaysShow();
        }
    });

    layer.addMarker(im);
};
//2.添加文本标注
function addTextMarker () {
    var groupLayer = map.getFMGroup(map.focusGroupID);  //获取当前楼层
    var layer = new fengmap.FMTextMarkerLayer();   //实例化TextMarkerLayer
    groupLayer.addLayer(layer);    //添加文本标注层到模型层。否则地图上不会显示
    //图标标注对象,默认位置为该楼层中心点
    var tm = new fengmap.FMTextMarker({
        name: "这是一个文字标注",
        x: x,
        y: y,
        //文字标注样式设置
        fillcolor: "255,0,0", //填充色
        fontsize:20, //字体大小
        strokecolor: "255,255,0", //边框色
        //文字标注添加完成后的回调事件
        callback: function() {
            // 在图片载入完成后,设置 "一直可见"
             tm.alwaysShow();
        }
    });

    layer.addMarker(tm);  //文本标注层添加文本Marker
}

//3.添加定位标注
function addLocationMarker = () {
    var locationMarker = new fengmap.FMLocationMarker({
        url:'image/pointer.png',
        size:86,  //设置图片显示尺寸
        height:10,  //设置图片高度,默认是5
    });
    map.addLocationMarker(locationMarker);
    locationMarker.setPosition({
        x:x,  //设置定位点的x坐标
        y:y,  //设置定位点的y坐标
        groupID:groupID,  //设置定位点所在楼层
        zOffset:1,  //设置定位点的高度偏移量
    });
}

//4.绘制线
function drawLines() {
    //添加线坐标点
    var naviResults=[{
        groupId:1,
        points:[{x: 12961602.000000,y: 4861851.500000,z: 56},
                {x: 12961625.000000,y: 4861850.500000,z: 56},
                {x: 12961625.000000,y: 4861825.000000,z: 56}]
    }];

    //绘制部分
    var line = new fengmap.FMLineMarker();
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var gid = result.groupId;
        var points = result.points;
        var seg = new fengmap.FMSegment();
        seg.groupId = gid;
        seg.points = points;

        line.addSegment(seg);

        //配置线型,颜色、线宽、透明度等
        var lineStyle = {
            color:'#FF0000',  //设置线的颜色
            lineWidth: 8,   //设置线的宽度
            alpha: 0.8,     //设置线的透明度
            lineType:fengmap.FMLineType.dotDash,
            dash: {
                size: 5,  //设置线的大小
                gap: 0,  //0为实线,大于0为虚线
            }
        };

        var lineObject = map.drawLineMark(line, lineStyle);        
    }
};

//5.绘制多边形
function drawPolygon() {
    //模拟点坐标
    var coords=[ {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}
    ];
    var groupLayer=map.getFMGroup(1); //获取第一层楼层
    //创建PolygonMarkerLayer
    var layer =new fengmap.FMPolygonMarkerLayer();
        groupLayer.addLayer(layer);
        var polygonMarker = new fengmap.FMPolygonMarker({
        alpha: .5,             //设置透明度
        lineWidth: 1,      //设置边框线的宽度
        height: 6,    //设置高度*/
        points: coords //多边形坐标点
    });

    layer.addMarker(polygonMarker);  //文本标注层添加文本Marker  
}

//6.绘制圆形
function drawCircle() {
    //模拟点坐标
    var centerPnt = {x: 1.2961644E7, y: 4861874.0}; //中心点
    var radius = 40; //半径
    var groupLayer = map.getFMGroup(1); //获取第一层楼层
    //创建PolygonMarkerLayer
    var layer =new fengmap.FMPolygonMarkerLayer();
    groupLayer.addLayer(layer);
    var circleMarker = new fengmap.FMPolygonMarker({
        color: '#3CF9DF',  //设置颜色
        alpha: .3,             //设置透明度
        lineWidth: 3,      //设置边框线的宽度
        height: 6,  //设置高度*/
        //设置为圆形
        points:{
            type:'circle', //设置为圆形
            center: {x: 1.2961644E7, y: 4861874.0}, //设置此形状的中心坐标
            radius: 30,//设置半径
            segments: 40,//设置段数,默认为40段
        }
    });

    layer.addMarker(circleMarker);  //文本标注层添加文本Marker
}
//7.绘制矩形
function drawRectangle() {
    var groupLayer = map.getFMGroup(1); //获取第一层楼层
    //创建PolygonMarkerLayer
    var layer =new fengmap.FMPolygonMarkerLayer();
    groupLayer.addLayer(layer);
    var rectangelMarker = rectangleMarker = new fengmap.FMPolygonMarker({
        color: '#9F35FF',  //设置颜色
        alpha: .3,             //设置透明度
        lineWidth: 1,      //设置边框线的宽度
        height: 6,  //设置高度
        points:{
            type: 'rectangle', //设置为矩形
            center: {x:1.2961583E7,y:4861865.0},  //设置此形状的中心坐标
            width: 30,  //宽度
            height: 30  //高度
        }
    });

    layer.addMarker(rectangelMarker);  //文本标注层添加文本Marker
}
//定义全局map变量
var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('map-container'), //渲染dom    
    appName:'fmdemo',           //开发者申请应用名称
    key:'ac9a8a62f93648842203c09b24241425',  //开发者申请应用下web服务的key
});

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

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

//初始化路径分析对象
var dijkstra = fengmap.FMNaviAnalyser.create({});

//初始化地图对象
var map = new fengmap.FMMap({
    container: document.getElementById('map-container'), //渲染dom
    appName:'fmdemo',           //开发者申请应用名称
    key:'ac9a8a62f93648842203c09b24241425',  //开发者申请应用下web服务的key
});

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

//地图加载完成回掉方法
map.on('loadComplete', function () {
    //初始化路径分析类
    dijkstra.init(map);
    //路径分析
    routeAnalyse();
});

//根据模拟的起始点路径分析
function routeAnalyse() {
    var naviCoords = [];  //存储起始点坐标
    var naviGids = [];    //存储起始楼层GroupID

    //起点坐标
    var coord = new fengmap.FMMapCoord();
    coord.x = 12961699.79823795;
    coord.y = 4861826.46384646;
    naviCoords.push(coord);
    naviGids.push(6);

    //终点坐标
    var coord1 = new fengmap.FMMapCoord();
    coord1.x = 12961587.6306147;
    coord1.y = 4861844.85608228;
    naviCoords.push(coord1);
    naviGids.push(5);

    //添加起始点图片标注
    var groupLayer = map.getFMGroup(6);
    var groupLayer1 = map.getFMGroup(5);
    var layer = new fengmap.FMImageMarkerLayer();
    var layer1 = new fengmap.FMImageMarkerLayer();
    layer.addMarker(new fengmap.FMImageMarker({
        x: naviCoords[0].x,
        y: naviCoords[0].y,
        url: '../static/lib/image/start.png',
        size: 64
    }));

    layer1.addMarker(new fengmap.FMImageMarker({
        x: naviCoords[1].x,
        y: naviCoords[1].y,
        url: '../static/lib/image/end.png',
        size: 64
    }));

    groupLayer.addLayer(layer);
    groupLayer1.addLayer(layer1);    

    //根据起始点坐标和楼层ID,路径分析,并根据结果绘制路径线。
    if (dijkstra.analyzeNavi(naviGids[0], naviCoords[0], naviGids[1], naviCoords[1],
        fengmap.FMNaviModule.MODULE_SHORTEST) == fengmap.FMRouteCalcuResult.ROUTE_SUCCESS) {
        //得到路径分析后的结果点
        var results = dijkstra.getNaviResults();
        if (results.length == 0)
            return;
        //var gids = dijkstra.getNaviGroupIds();
        //var pointarr = dijkstra.getNaviGroupPoints(gids[0]); //获取某一层中得到的路径点

        //获取路径分析后的文字描述
        var des = dijkstra.getRouteDescriptions(results);

        //绘制部分
        var line = new fengmap.FMLineMarker();

        for (var i = 0; i < results.length; i++) {
            var result = results[i];
            var gid = result.groupId;
            var points = result.pointList;

            var seg = new fengmap.FMSegment();
            seg.groupId = gid;
            seg.points = [];

            for (var j = 0; j < points.length; j++) {
                seg.points.push(points[j]);
            };
            line.addSegment(seg);            
        }

        //配置线型,颜色、线宽、透明度等
        var lineStyle = {
            color:'#FF0000',  //设置线的颜色
            lineWidth: 8,   //设置线的宽度
            alpha: 0.8,     //设置线的透明度
            lineType:fengmap.FMLineType.dotDash,
            dash: {
                size: 5,  //设置线的大小
                gap: 0,  //0为实线,大于0为虚线
            }
        };
        //画线
        var lineObject = map.drawLineMark(line, lineStyle);
    }
}

账号与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 历史版本、开发手册请通过相关下载开发手册查看和下载。