<!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="jsmap/3D/jsmap.js"></script>-->
<!-- <link type="text/css" rel="stylesheet" href="jsmap/3D/jsmap.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';
var mapID3D = '9999';
let maxFloors = 5;
window.onload = function () {
//加载地图
initMap();
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() {
openMap2D();
// openMap3D();
}
//打开地图
function openMap2D() {
//初始化参数
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);
//地图加载完成事件
map.on("loadComplete", e => {
var zoomControl = new jsmaplight.JSZoomControl({
position: jsmaplight.JSControlPosition.LEFT_TOP,
offset: {
x: 10,
y: 10
}
});
var floorControl = new jsmaplight.JSFloorControl({
position: jsmaplight.JSControlPosition.RIGHT_TOP,
showBtnCount: 7,
offset: {
x: 20,
y: 20
}
});
if (document.documentElement.clientWidth >= 992) {
map.addControl(floorControl);
map.addControl(zoomControl);
}
});
map.on('mapClickNode', event => {
addPointMarker2D(event);
backWithResult(event);
});
}
function openMap3D() {
//初始化参数
var mapOptions = {
//必要，地图容器
container: 'mapContainer',
//必要，地图类型
mapType: jsmap.JSMapType.MAP_3D,
//必要，地图路径
mapServerURL: "jsmap/3D/data/map",
viewOptions: {
center: {
x: 119.65549893659012,
y: 39.9351098623569,
z: 0.016594102424956802
},
distance: 370.01629618875734,
rotate: 0,
tilt: 90
},
openingAnimation: false,
showGlobe: true,
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
showLoading:false
};
//初始化地图对象
map = new jsmap.JSMap(mapOptions);
//打开map服务器的地图数据和主题
map.openMapById(mapID3D);
//地图加载完成事件
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 >= 992) {
map.addControl(compassControl);
map.addControl(zoomControl);
}
});
map.on('mapClickNode', event => {
addPointMarker3D(event);
backWithResult(event);
});
}
//添加标注
function addPointMarker2D(event) {
map.removeAllDomMarker(); //移除全部标注
var pointMarker = new jsmaplight.JSDomMarker({
id: 0,
position: {
x: event.eventInfo.coord.x,
y: event.eventInfo.coord.y,
z: 1
}, //坐标
pointerEvents: 'none',
content: '<div class="jsmap-animation-point" style="color: blue"><p></p></div>',
offset: jsmaplight.JSControlPosition.LEFT_BOTTOM,
marginOffset: {
x: 0,
y: 0
},
properties: {
type: 0
},
callback: (node) => {
console.log(node);
}
});
map.addMarker(pointMarker);
}
//添加标注
function addPointMarker3D(event) {
map.removeAllDomMarker(); //移除全部标注
var pointMarker = new jsmap.JSDomMarker({
id: 0,
position: {
x: event.eventInfo.coord.x,
y: event.eventInfo.coord.y,
z: 1
}, //坐标
pointerEvents: 'none',
content: '<div class="jsmap-animation-point" style="color: blue"><p></p></div>',
offset: jsmap.JSControlPosition.LEFT_BOTTOM,
marginOffset: {
x: 0,
y: 0
},
properties: {
type: 0
},
callback: (node) => {
console.log(node);
}
});
map.addMarker(pointMarker);
}
function backWithResult(event){
uni.postMessage({
data:{
"longitue":event.x,
"latitude":event.y,
"floorId" :event.floorId
}
})
}
</script>
<style type="text/css">
html,
body,
#mapContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</html>