449 lines
11 KiB
HTML
449 lines
11 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>hello-jsmap</title>
|
||
<script src="http://192.168.0.31:8089/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
|
||
<link type="text/css" href="http://192.168.0.31:8089/joysuch/jsmap/jsmap.css" rel="stylesheet"/>
|
||
<!-- <script src="http://mapdemo.joysuch.com/lib/jsmap/jsmap.js" type="text/javascript"></script>-->
|
||
<!-- <link type="text/css" href="http://mapdemo.joysuch.com/lib/jsmap/jsmap.css" rel="stylesheet"/>-->
|
||
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/pop.css">
|
||
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/loading.css">
|
||
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/dom.css">
|
||
<style>
|
||
.jsmap-animation-point,
|
||
.jsmap-animation-point:after,
|
||
.jsmap-animation-point:before,
|
||
.jsmap-animation-point p,
|
||
.jsmap-animation-point p:after,
|
||
.jsmap-animation-point p:before {
|
||
margin: 0;
|
||
padding: 0;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
-o-box-sizing: border-box;
|
||
-ms-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.jsmap-animation-point {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
border: 1px solid hsla(0, 0%, 100%, 0.5);
|
||
cursor: pointer;
|
||
color: #0ff;
|
||
background: currentColor;
|
||
z-index: 3;
|
||
left: 50%;
|
||
top: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
-moz-transform: translate(-50%, -50%);
|
||
-o-transform: translate(-50%, -50%);
|
||
-ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
box-shadow: 0 0 2em currentColor, 0 0 0.5em currentColor;
|
||
position: absolute;
|
||
}
|
||
|
||
.jsmap-animation-point:after,
|
||
.jsmap-animation-point:before,
|
||
.jsmap-animation-point p:after,
|
||
.jsmap-animation-point p:before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 50%;
|
||
top: 50%;
|
||
border-radius: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
-moz-transform: translate(-50%, -50%);
|
||
-o-transform: translate(-50%, -50%);
|
||
-ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.jsmap-animation-point:after,
|
||
.jsmap-animation-point:before {
|
||
border: 1px solid;
|
||
-webkit-animation: jsmap-mapAni 1s ease infinite;
|
||
-moz-animation: jsmap-mapAni 1s ease infinite;
|
||
-o-animation: jsmap-mapAni 1s ease infinite;
|
||
-ms-animation: jsmap-mapAni 1s ease infinite;
|
||
animation: jsmap-mapAni 1s ease infinite;
|
||
}
|
||
|
||
.jsmap-animation-point p:before {
|
||
border: 1px solid;
|
||
}
|
||
|
||
.jsmap-animation-point p {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border-radius: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
-moz-transform: translate(-50%, -50%);
|
||
-o-transform: translate(-50%, -50%);
|
||
-ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
-webkit-animation: jsmap-mapAni 2s ease infinite;
|
||
-moz-animation: jsmap-mapAni 2s ease infinite;
|
||
-o-animation: jsmap-mapAni 2s ease infinite;
|
||
-ms-animation: jsmap-mapAni 2s ease infinite;
|
||
animation: jsmap-mapAni 2s ease infinite;
|
||
}
|
||
|
||
@-webkit-keyframes jsmap-mapAni {
|
||
0% {
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 1;
|
||
filter: alpha(opacity=1);
|
||
}
|
||
|
||
25% {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
}
|
||
|
||
50% {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.5;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
|
||
75% {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0.2;
|
||
filter: alpha(opacity=20);
|
||
}
|
||
|
||
to {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 0;
|
||
filter: alpha(opacity=0);
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes jsmap-mapAni {
|
||
0% {
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 1;
|
||
filter: alpha(opacity=1);
|
||
}
|
||
|
||
25% {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
}
|
||
|
||
50% {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.5;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
|
||
75% {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0.2;
|
||
filter: alpha(opacity=20);
|
||
}
|
||
|
||
to {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 0;
|
||
filter: alpha(opacity=0);
|
||
}
|
||
}
|
||
|
||
@-o-keyframes jsmap-mapAni {
|
||
0% {
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 1;
|
||
filter: alpha(opacity=1);
|
||
}
|
||
|
||
25% {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
}
|
||
|
||
50% {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.5;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
|
||
75% {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0.2;
|
||
filter: alpha(opacity=20);
|
||
}
|
||
|
||
to {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 0;
|
||
filter: alpha(opacity=0);
|
||
}
|
||
}
|
||
|
||
@-ms-keyframes jsmap-mapAni {
|
||
0% {
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 1;
|
||
filter: alpha(opacity=1);
|
||
}
|
||
|
||
25% {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
}
|
||
|
||
50% {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.5;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
|
||
75% {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0.2;
|
||
filter: alpha(opacity=20);
|
||
}
|
||
|
||
to {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 0;
|
||
filter: alpha(opacity=0);
|
||
}
|
||
}
|
||
|
||
@keyframes jsmap-mapAni {
|
||
0% {
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 1;
|
||
filter: alpha(opacity=1);
|
||
}
|
||
|
||
25% {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
}
|
||
|
||
50% {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.5;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
|
||
75% {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0.2;
|
||
filter: alpha(opacity=20);
|
||
}
|
||
|
||
to {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 0;
|
||
filter: alpha(opacity=0);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id='mapContainer'></div>
|
||
<script type="text/javascript">
|
||
|
||
//定义全局map变量
|
||
var map = null;
|
||
//定义地图ID变量
|
||
var mapID = '100930';
|
||
//定义循环的起始变量
|
||
var i = 0;
|
||
//创建存储标注的数组
|
||
var markerArr = [];
|
||
|
||
//定义点标注全局变量
|
||
var jsMarker = null;
|
||
|
||
window.onload = function () {
|
||
window.addEventListener('message', function (e) {
|
||
//加载地图
|
||
// console.info('地图加载完成')
|
||
// console.info(mapData)
|
||
openMap(e.data);
|
||
addBox(e.data);
|
||
addWall(e.data);
|
||
});
|
||
};
|
||
|
||
window.addEventListener('unload', function (e) {
|
||
//销毁地图
|
||
map.destroy();
|
||
map = null;
|
||
});
|
||
|
||
//打开地图
|
||
function openMap(mapData) {
|
||
//初始化参数
|
||
var mapOptions = {
|
||
//必要，地图容器
|
||
container: 'mapContainer',
|
||
//必要，地图类型
|
||
mapType: jsmap.JSMapType.MAP_3D,
|
||
//必要，地图路径
|
||
// mapServerURL: 'http://mapdemo.joysuch.com',
|
||
mapServerURL: 'http://192.168.0.31:8089/joysuch/jsmap/data/map',
|
||
mapScaleLevelRange: [15,20], //地图缩放范围，默认[1,24]
|
||
openingAnimation: false, // 是否开启开场动画，默认true
|
||
lightingColor: '#3C4040', // 光照颜色,修改3D地图以外地图的遮罩颜色
|
||
enableLighting: true, // 是否开启光照效果，默认false
|
||
enableShadows: true, // 是否开启阴影效果，默认false
|
||
showGlobe: true, // 是否显示地球，默认true(显示3D地图以外的地图)
|
||
showLoading: false, // 是否显示地图加载动画，默认true
|
||
viewOptions: {
|
||
center: {
|
||
x: mapData.LONGITUDE,
|
||
y: mapData.LATITUDE,
|
||
z: 0.016594102424956802
|
||
|
||
},
|
||
distance: 1600.01629618875734,
|
||
rotate: 270.01698302043945,
|
||
tilt: 60.002892467352007
|
||
},
|
||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||
};
|
||
//初始化地图对象
|
||
map = new jsmap.JSMap(mapOptions);
|
||
|
||
//打开map服务器的地图数据和主题
|
||
map.openMapById(mapID);
|
||
|
||
//地图加载完成事件
|
||
map.on("loadComplete", e => {
|
||
var compassControl = new jsmap.JSCompassControl({
|
||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||
offset: {
|
||
x: 10,
|
||
y: 20
|
||
}
|
||
});
|
||
|
||
var zoomControl = new jsmap.JSZoomControl({
|
||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||
offset: {
|
||
x: 40,
|
||
y: 10
|
||
}
|
||
});
|
||
|
||
if (document.documentElement.clientWidth >= 600) {
|
||
map.addControl(compassControl);
|
||
map.addControl(zoomControl);
|
||
}
|
||
});
|
||
|
||
map.on('mapClickNode', event => {
|
||
if(event.properties){
|
||
var id = ''
|
||
for (const [name,value] of event.properties) {
|
||
id = value
|
||
}
|
||
if(id){
|
||
window.parent.postMessage({
|
||
params:{
|
||
id
|
||
}
|
||
},'*')
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
//添加标注
|
||
function addBox(data) {
|
||
for (let j = 0; j < data.boxList.length; j++) {
|
||
let mapData = data.boxList[j];
|
||
jsMarker = new jsmap.JSBoxMarker({
|
||
id: j,
|
||
position: mapData.position, //坐标
|
||
floorId: 1, //楼层id,默认为1（地面）
|
||
color: mapData.color, //颜色
|
||
height: 0, //基底高度
|
||
stretchHeight: mapData.stretchHeight, //拉伸高度
|
||
strokeColor: mapData.strokeColor, //边线颜色
|
||
strokeWidth: 4, //边线宽度
|
||
// properties: {
|
||
// id: mapData.id
|
||
// }, //属性设置
|
||
callback: (node) => {
|
||
// console.log(node);
|
||
} //回调事件
|
||
});
|
||
map.addMarker(jsMarker);
|
||
markerArr.push(jsMarker)
|
||
}
|
||
}
|
||
|
||
//添加标注
|
||
function addWall(data) {
|
||
let mapData = data.wallMap;
|
||
jsMarker = new jsmap.JSWallMarker({
|
||
id: 'wallMarker',
|
||
position: mapData.position, //坐标
|
||
floorId: 1, //楼层id,默认为1（地面）
|
||
color: 'rgb(139,71,137)', //颜色
|
||
closed: true, //墙是否闭合
|
||
baseHeight: 0, //基底高度
|
||
height: 20, //高度
|
||
wallType: jsmap.JSWallType.WAVE, //墙类型
|
||
callback: (node) => {
|
||
// console.log(node);
|
||
} //回调事件
|
||
});
|
||
map.addMarker(jsMarker);
|
||
markerArr.push(jsMarker)
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|