@@ -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"); | |||
} | |||
}); | |||
}); | |||
}); | |||
} | |||
}) | |||
} | |||
}) |