Ver código fonte

【c端地图初始化】

master
chenshengle 3 anos atrás
pai
commit
d1356d7c3f
9 arquivos alterados com 184 adições e 103 exclusões
  1. +0
    -1
      common/mapJsSDK/fengmap.effect.min.js
  2. +150
    -0
      index.html
  3. +0
    -0
      lib/fengmap.analyser.min.js
  4. +1
    -1
      lib/fengmap.map.min.js
  5. +0
    -0
      lib/fengmap.plugin.min.js
  6. +33
    -0
      lib/util.js
  7. +0
    -24
      squareMap/index.html
  8. +0
    -77
      squareMap/js/index.js
  9. +0
    -0
      style/fengmap.css

+ 0
- 1
common/mapJsSDK/fengmap.effect.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 150
- 0
index.html Ver arquivo

@@ -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>

common/mapJsSDK/fengmap.analyser.min.js → lib/fengmap.analyser.min.js Ver arquivo


lib/fengmap.map.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


common/mapJsSDK/fengmap.plugin.min.js → lib/fengmap.plugin.min.js Ver arquivo


+ 33
- 0
lib/util.js Ver arquivo

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

+ 0
- 24
squareMap/index.html Ver arquivo

@@ -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>

+ 0
- 77
squareMap/js/index.js Ver arquivo

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

squareMap/css/index.css → style/fengmap.css Ver arquivo


Carregando…
Cancelar
Salvar