|
|
@@ -5,146 +5,102 @@ |
|
|
|
|
|
|
|
<title>地图</title> |
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
|
<!-- <script src="./js/flexible.js"></script> --> |
|
|
|
<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> |
|
|
|
<!-- <div class="aabb">11231231</div> --> |
|
|
|
</body> |
|
|
|
<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='./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); |
|
|
|
let baseUrl = 'https://ctest.malls.iformall.com/C'; |
|
|
|
|
|
|
|
|
|
|
|
compass.on("click", function() { |
|
|
|
map.setRotation({ |
|
|
|
|
|
|
|
// 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"); |
|
|
|
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> |