html5室内地图绘制,FengMapJavaScriptSDK三维室内地图引
擎-蜂鸟云
//定义全局map变量
var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
container: ElementById('fengMap'), //渲染dom
appName:'蜂鸟研发SDK_2_0', //开发者申请应⽤名称
key:'57c7f309aca507497d028a9c00207cf8', //开发者申请应⽤下web服务的key
});
//打开fengMap服务器上的地图数据和主题
map.openMapById(fmapID);
/
/定义全局map变量
var map;
var fmapID = '10347';
//定义按钮型楼层切换控件
var btnFloorControl;
//定义滚动型楼层切换控件
var scrollFloorControl;
window.οnlοad=function(){
map = new fengmap.FMMap({
container : ElementById('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);
//地图加载完回调事件
<('loadComplete', function() {
/
/加载按钮型楼层切换控件
loadBtnFloorCtrl();
//加载滚动型楼层切换控件
//loadScrollFloorCtrl();
});
//聚焦楼层改变事件
<('focusGroupIDChanged', function (event) {
console.log('地图聚焦楼层改变！', map.focusGroupID);
});
};
//加载按钮型楼层切换控件
function loadBtnFloorCtrl() {
//楼层控制控件配置参数
var btnFloorCtlOpt = lOptions({
//默认在右下⾓
position: lPositon.RIGHT_TOP,
//初始楼层按钮显⽰个数配置。默认显⽰5层，其他的隐藏，可滚动查看showBtnCount: 6,
//初始是否是多层显⽰，默认单层显⽰
allLayer: false,
//位置x,y的偏移量
offset: {
x: -20,
y: 20
}
});
//不带单/双层楼层控制按钮，初始时只有1个按钮，点击后可弹出其他楼层按钮btnFloorControl = new fengmap.buttonGroupsControl(map, btnFloorCtlOpt); //楼层切换
//groups 表⽰当前要切换的楼层ID数组,
//allLayer表⽰当前楼层是单层状态还是多层状态。
console.log('当前切换楼层：' + groups);
});
//切换楼层,changeFocusGroup(⽬标层groupID，是否多层状态)
//btnFloorControl.changeFocusGroup(2, true);
//默认是否展开楼层列表，true为展开，false为不展开
//楼层控件是否可点击，默认为true
}
//加载滚动⾏楼层切换控件
function loadScrollFloorCtrl() {
var scrollFloorCtlOpt = lOptions({
//默认在右上⾓
position: lPositon.RIGHT_TOP,
//默认显⽰楼层的个数
showBtnCount: 6,
//初始是否是多层显⽰，默认单层显⽰false
allLayer: false,
//是否显⽰多层/单层切换按钮
needAllLayerBtn: true,
//位置x,y的偏移量
offset: {
javascript全局数组
x: -20,
y: 20
}
});
scrollFloorControl = new fengmap.scrollGroupsControl(map, scrollFloorCtlOpt); //楼层切换
//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: ElementById('fengMap'), //渲染dom
mapServerURL: './data/' + fmapID, //地图数据位置
mapThemeURL: './data/theme', //主题数据位置
defaultThemeName: '2001',
appName:'蜂鸟研发SDK_2_0', //开发者申请应⽤名称
key:'57c7f309aca507497d028a9c00207cf8', //开发者申请应⽤下web服务的key });
//打开Fengmap服务器上的地图数据和主题
map.openMapById(fmapID);
/
/地图加载完成回掉⽅法
<('loadComplete', function () {
addImageMarker(); //添加图⽚标注imageMarker
addTextMarker(); //添加⽂字标注textMarker
addLineMarker(); //添加线标注lineMarker
drawPolygon(); //绘制多边形
});
//1.添加图⽚标注ImageMarker
function addImageMarker() {
var groupLayer = FMGroup(map.focusGroupID); //获取当前楼层
//实例化⽅法1：⾃定义图⽚标注层
/
/var layer = new fengmap.FMImageMarkerLayer();
//添加图⽚标注层到模型层。否则地图上不会显⽰
//groupLayer.addLayer(layer);
//实例化⽅法2：
//返回当前层中第⼀个imageMarkerLayer，如果没有，则⾃动创建
var layer = OrCreateLayer('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 = FMGroup(map.focusGroupID); //获取当前楼层
//返回当前层中第⼀个textMarkerLayer，如果没有，则⾃动创建
var layer = OrCreateLayer('textMarker');
//⽂字标注对象，默认位置为该楼层中⼼点
var gpos = groupLayer.mapCoord;
var tm = new fengmap.FMTextMarker({
//标注x坐标点
x: gpos.x,
//标注y坐标点
y: gpos.y,
//标注值
name: "这是⼀个⽂字标注",
//⽂本标注填充⾊
fillcolor: "255,0,0",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。