505 lines
11 KiB
HTML
505 lines
11 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="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.addEventListener('unload', function (e) {
|
||
|
|
//销毁地图
|
||
|
|
map.destroy();
|
||
|
|
map = null;
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|