389 lines
8.6 KiB
HTML
389 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>真趣一图通</title>
|
||
<script type="text/javascript" src="jsmap/2D/jsmap_light.js"></script>
|
||
<link type="text/css" rel="stylesheet" href="jsmap/2D/jsmap_light.css"></link>
|
||
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
||
<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>
|
||
</body>
|
||
|
||
<script>
|
||
//定义全局map变量
|
||
var map = null;
|
||
//定义地图ID变量
|
||
var mapID2D = '000000';
|
||
|
||
|
||
window.onload = function () {
|
||
//加载地图
|
||
initMap(JSON.parse(getUrlParam('covers').replaceAll('%22','"')));
|
||
window.document.title = getUrlParam('title')
|
||
};
|
||
|
||
window.addEventListener('unload', function (e) {
|
||
//销毁地图
|
||
map.destroy();
|
||
map = null;
|
||
});
|
||
// 获取url参数
|
||
function getUrlParam(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
||
if (r != null) return decodeURI(r[2]);
|
||
return ""; //返回参数值
|
||
}
|
||
|
||
function initMap(pointArr) {
|
||
openMap2D(pointArr);
|
||
}
|
||
//打开地图
|
||
function openMap2D(pointArr) {
|
||
//初始化参数
|
||
var mapOptions = {
|
||
//必要，地图容器
|
||
container: 'mapContainer',
|
||
//必要，地图路径
|
||
mapServerURL: 'jsmap/2D/data/map',
|
||
mapScaleLevelRange: [1, 24],
|
||
defaultMapScaleLevel: 19,
|
||
showGlobe: true,
|
||
imageryProvider: jsmaplight.JSImageryProviderType.IMAGE_TDT,
|
||
showLoading:false
|
||
};
|
||
//初始化地图对象
|
||
map = new jsmaplight.JSMap(mapOptions);
|
||
|
||
//打开map服务器的地图数据和主题
|
||
map.openMapById(mapID2D,{
|
||
focusFloorId: 0, //聚焦楼层，默认0
|
||
});
|
||
|
||
//地图加载完成事件
|
||
map.on("loadComplete", e => {
|
||
var zoomControl = new jsmaplight.JSZoomControl({
|
||
position: jsmaplight.JSControlPosition.LEFT_TOP,
|
||
offset: {
|
||
x: 10,
|
||
y: 10
|
||
}
|
||
});
|
||
|
||
if (document.documentElement.clientWidth >= 992) {
|
||
map.addControl(zoomControl);
|
||
}
|
||
addPointMarker2D(pointArr)
|
||
});
|
||
}
|
||
|
||
//添加标注
|
||
function addPointMarker2D(pointArr) {
|
||
for (let i = 0; i < pointArr.length; i++) {
|
||
var pointMarker = new jsmaplight.JSImageMarker({
|
||
id: 'point'+i,
|
||
image: pointArr[i].iconPath,//图片路径
|
||
position: new jsmaplight.JSPoint(Number(pointArr[i].longitude), Number(pointArr[i].latitude), 0), //坐标
|
||
floorId: 0,
|
||
offset: jsmaplight.JSControlPosition.LEFT_BOTTOM,
|
||
properties: {
|
||
type: 0
|
||
},//属性设置
|
||
callback: (node) => {
|
||
console.log(node);
|
||
} //回调事件
|
||
});
|
||
map.addMarker(pointMarker);
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style type="text/css">
|
||
html,
|
||
body,
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
</style>
|
||
</html>
|