@@ -0,0 +1,150 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<title>楼层控件</title> | |||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |||||
<script src="./lib/fengmap.map.min.js"></script> | |||||
<script src="./lib/fengmap.plugin.min.js"></script> | |||||
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script> | |||||
<link rel="stylesheet" href="./style/fengmap.css"> | |||||
</head> | |||||
<body> | |||||
<div id="fengmap"></div> | |||||
</body> | |||||
<script> | |||||
document.write("<s"+"cript type='text/javascript' src='./common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>"); | |||||
var map; | |||||
// let baseUrl='https://ctest.malls.iformall.com/C'; | |||||
let baseUrl='/C'; | |||||
$.ajax({ | |||||
url:baseUrl + "/api/fengniaomap/getConfig", | |||||
type:"GET", | |||||
dataType: "json", //返回数据格式为json | |||||
headers: { | |||||
'content-type':'application/json', | |||||
"token":"c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser", | |||||
// "token":getQueryString('token') | |||||
}, | |||||
success:function(res){ | |||||
const data = res.data; | |||||
let mapOptions = { | |||||
appName: data.appName, | |||||
key: data.appKey, | |||||
mapID: data.mapId, | |||||
container: document.getElementById("fengmap"), | |||||
// mapURL: `/api/mapfile/${data.tenantId}/`, | |||||
// themeURL: `/api/mapfile/${data.tenantId}/theme/`, | |||||
mapURL:"./data/", | |||||
themeURL:"./data/theme/", | |||||
themeID: data.themeId, | |||||
level: data.defaultFloor | |||||
} | |||||
let map = new fengmap.FMMap(mapOptions); | |||||
// let mapOptions = { | |||||
// appName: "金茂泊悦地图", | |||||
// key: "cb54a3aa3a7066ec99b565363f63cb8c", | |||||
// mapID: "1412326198669561858", | |||||
// container: document.getElementById("fengmap"), | |||||
// // mapURL: `/api/mapfile/${data.tenantId}/`, | |||||
// // themeURL: `/api/mapfile/${data.tenantId}/theme/`, | |||||
// mapURL:"../../data/", | |||||
// themeURL:"../../data/theme/", | |||||
// themeID: '2001', | |||||
// level: 1 | |||||
// } | |||||
let toolbarOptions = { | |||||
//控件产生 | |||||
floorButtonCount: 3, | |||||
viewModeControl: true, //是否显示2、3D切换按钮,默认为true | |||||
floorModeControl: true, // 是否显示楼层控件,默认为true | |||||
needAllLayerBtn: true, //是否显示单多层按钮,默认为true | |||||
position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。 | |||||
offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
}; | |||||
let zoomOptions = { | |||||
position: 3, //分为左上 1、左下2、右上3、右下4。 | |||||
offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
}; | |||||
let compassOptions = { | |||||
position: 2 //分为左上 1、左下2、右上3、右下4。 | |||||
}; | |||||
map.on("loaded", function() { | |||||
let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件 | |||||
let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件 | |||||
let compass = new fengmap.FMCompass(compassOptions); //指南针控件 | |||||
toolbar.addTo(map); | |||||
zoomToolbar.addTo(map); | |||||
compass.addTo(map); | |||||
compass.on("click", function() { | |||||
map.setRotation({ | |||||
rotation: 0, | |||||
animate: true, | |||||
duration: 0.3, | |||||
finish: function() { | |||||
// console.log("setRotation"); | |||||
} | |||||
}); | |||||
}); | |||||
}); | |||||
} | |||||
}) | |||||
// setTimeout(() => { | |||||
// var options = { | |||||
// appName: '金茂泊悦地图', | |||||
// key: 'cb54a3aa3a7066ec99b565363f63cb8c', | |||||
// mapID: '1412326198669561858', | |||||
// container: document.getElementById('fengmap'), | |||||
// mapURL: './data/', | |||||
// themeURL: './data/theme/', | |||||
// themeID: '2001', | |||||
// } | |||||
// let toolbarOptions = { | |||||
// //控件产生 | |||||
// floorButtonCount: 3, | |||||
// viewModeControl: true, //是否显示2、3D切换按钮,默认为true | |||||
// floorModeControl: true, // 是否显示楼层控件,默认为true | |||||
// needAllLayerBtn: true, //是否显示单多层按钮,默认为true | |||||
// position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。 | |||||
// offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
// }; | |||||
// let zoomOptions = { | |||||
// position: 3, //分为左上 1、左下2、右上3、右下4。 | |||||
// offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
// }; | |||||
// let compassOptions = { | |||||
// position: 2 //分为左上 1、左下2、右上3、右下4。 | |||||
// }; | |||||
// map = new fengmap.FMMap(options); | |||||
// map.on('loaded', function () { | |||||
// let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件 | |||||
// let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件 | |||||
// let compass = new fengmap.FMCompass(compassOptions); //指南针控件 | |||||
// toolbar.addTo(map); | |||||
// zoomToolbar.addTo(map); | |||||
// compass.addTo(map); | |||||
// compass.on("click", function () { | |||||
// map.setRotation({ | |||||
// rotation: 0, | |||||
// animate: true, | |||||
// duration: 0.3, | |||||
// finish: function () { | |||||
// // console.log("setRotation"); | |||||
// } | |||||
// }); | |||||
// }); | |||||
// }); | |||||
// }, 2000); | |||||
</script> | |||||
</html> |
@@ -0,0 +1,33 @@ | |||||
function getRandomCoords(bound) { | |||||
let minX = bound.min.x; | |||||
let minY = bound.min.y; | |||||
let maxX = bound.max.x; | |||||
let maxY = bound.max.y; | |||||
var _x = Math.floor(Math.random() * (maxX - minX)) + minX; | |||||
var _y = Math.floor(Math.random() * (maxY - minY)) + minY; | |||||
return { x: _x, y: _y } | |||||
} | |||||
var _markers = [] | |||||
function _randomDomMarker(map, num) { | |||||
for (let index = 0; index < num; index++) { | |||||
var domMarker = new fengmap.FMDomMarker({ | |||||
x: getRandomCoords(map.getBound()).x, | |||||
y: getRandomCoords(map.getBound()).y, | |||||
content: '<p class="my-popup">' + getRandomCoords(map.getBound()).x + '</p>', | |||||
domWidth: 10, | |||||
domHeight: 10 | |||||
}); | |||||
var level = map.getLevel() | |||||
var floor = map.getFloor(level); | |||||
domMarker.addTo(floor); | |||||
_markers.push(domMarker) | |||||
} | |||||
} | |||||
function _clearAllDomMarker() { | |||||
_markers.forEach(marker => { | |||||
marker.remove(); | |||||
}); | |||||
} |
@@ -1,24 +0,0 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> | |||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||||
<link rel="stylesheet" href="./css/index.css"> | |||||
</head> | |||||
<body> | |||||
<div id="fengmap"></div> | |||||
</body> | |||||
</html> | |||||
<script src="../common/mapJsSDK/fengmap.map.min.js"></script> | |||||
<script src="../common/mapJsSDK/fengmap.analyser.min.js"></script> | |||||
<script src="../common/mapJsSDK/fengmap.plugin.min.js"></script> | |||||
<script src="../common/mapJsSDK/fengmap.effect.min.js"></script> | |||||
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script> | |||||
<script src="./js/index.js"></script> | |||||
<script> | |||||
document.write("<s"+"cript type='text/javascript' src='../common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>"); | |||||
document.write("<s"+"cript type='text/javascript' src='./js/index.js?version="+Math.random()+"'></scr"+"ipt>"); | |||||
</script> |
@@ -1,77 +0,0 @@ | |||||
$(function(){ | |||||
// let baseUrl='https://ctest.malls.iformall.com/C'; | |||||
let baseUrl='/C'; | |||||
// if(window.location.origin=='https://gametest.malls.iformall.com'){ | |||||
// baseUrl='https://ctest.malls.iformall.com/C' | |||||
// }else if(window.location.origin=='https://game.malls.iformall.com'){ | |||||
// baseUrl='https://c.malls.iformall.com/C' | |||||
// }else if(window.location.origin=='https://game.youlane.cn'){ | |||||
// baseUrl='https://ciformall.youlane.cn/C' | |||||
// } | |||||
init() | |||||
function init(){ | |||||
$.ajax({ | |||||
url:baseUrl + "/api/fengniaomap/getConfig", | |||||
type:"GET", | |||||
dataType: "json", //返回数据格式为json | |||||
headers: { | |||||
'content-type':'application/json', | |||||
"token":"c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser", | |||||
// "token":getQueryString('token') | |||||
}, | |||||
success:function(res){ | |||||
const data = res.data; | |||||
let mapOptions = { | |||||
appName: data.appName, | |||||
key: data.appKey, | |||||
mapID: data.mapId, | |||||
container: document.getElementById("fengmap"), | |||||
mapURL: `/api/mapfile/${data.tenantId}/`, | |||||
themeURL: `/api/mapfile/${data.tenantId}/theme/`, | |||||
// mapURL:"../../data/", | |||||
// themeURL:"../../data/theme/", | |||||
themeID: data.themeId, | |||||
} | |||||
let toolbarOptions = { | |||||
//控件产生 | |||||
floorButtonCount: 3, | |||||
viewModeControl: true, //是否显示2、3D切换按钮,默认为true | |||||
floorModeControl: true, // 是否显示楼层控件,默认为true | |||||
needAllLayerBtn: true, //是否显示单多层按钮,默认为true | |||||
position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。 | |||||
offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
}; | |||||
let zoomOptions = { | |||||
position: 3, //分为左上 1、左下2、右上3、右下4。 | |||||
offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。 | |||||
}; | |||||
let compassOptions = { | |||||
position: 2 //分为左上 1、左下2、右上3、右下4。 | |||||
}; | |||||
let map = new fengmap.FMMap(mapOptions); | |||||
map.on("loaded", function() { | |||||
let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件 | |||||
let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件 | |||||
let compass = new fengmap.FMCompass(compassOptions); //指南针控件 | |||||
toolbar.addTo(map); | |||||
zoomToolbar.addTo(map); | |||||
compass.addTo(map); | |||||
compass.on("click", function() { | |||||
map.setRotation({ | |||||
rotation: 0, | |||||
animate: true, | |||||
duration: 0.3, | |||||
finish: function() { | |||||
// console.log("setRotation"); | |||||
} | |||||
}); | |||||
}); | |||||
}); | |||||
} | |||||
}) | |||||
} | |||||
}) |