qa-regulatory-gwj-vue/static/maplocation.html

538 lines
14 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>hello-jsmap</title>
<script src="http://192.168.192.201:7024/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
<link type="text/css" href="http://192.168.192.201:7024/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.192.201:7024/joysuch/LocalAssets/css/animation/pop.css">
<link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/animation/loading.css">
<link rel="stylesheet" href="http://192.168.192.201:7024/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>
<!--<button id="addMarker" onclick="add()">添加DOM标注</button>-->
<!--<button id="removeMarker" onclick="remove()">移除DOM标注</button>-->
<select name="markerArea" id="markerArea" style="display: none;" onclick="changeMarker()"></select>
<div id="setProperty" style="display: none;" onclick="property()">
<form oninput="handleInput()">
<p>图标ID<input type="text" class="ID" readonly/></p>
<p>楼层:<input type="text" class="floor" readonly/></p>
<p>坐标位置:<input type="text" class="position" readonly/></p>
<div id="gradient">偏移:
<p>x<input type="number" id="x轴"/></p>
<p>y<input type="number" id="y轴"/></p>
</div>
<p>是否显示:
<label for="show">
显示:<input type="radio" id="show" name="toggle"/>
</label>
<label for="hide">
隐藏:<input type="radio" id="hide" name="toggle"/>
</label>
</p>
<p>深度检测:
<label for="on">
开:<input type="radio" id="on" name="depth"/>
</label>
<label for="off">
关:<input type="radio" id="off" name="depth"/>
</label>
</p>
<div id="close">x</div>
<p><span id="changeImg">更换内容</span></p>
</form>
</div>
<script type="text/javascript">
//定义全局map变量
var map = null;
//定义地图ID变量
var mapID = '100930';
//定义循环的起始变量
var i = 0;
//创建循环的终止变量
var max = 0;
//创建存储标注的数组
var markerArr = [];
//获取各个属性标签
var propertyInput = document.querySelectorAll('#setProperty>form input');
//记录当前所选的Marker
var currentMarker = null;
//创建文档碎片
var fragment = document.createDocumentFragment();
//定义点标注全局变量
var domMarker = null;
window.onload = function () {
//加载地图
openMap();
};
window.addEventListener('unload', function (e) {
//销毁地图
map.destroy();
map = null;
});
//打开地图
function openMap() {
//初始化参数
var mapOptions = {
//必要,地图容器
container: 'mapContainer',
//必要,地图类型
mapType: jsmap.JSMapType.MAP_3D,
//必要,地图路径
// mapServerURL: 'http://mapdemo.joysuch.com',
mapServerURL: 'http://192.168.192.201:7024/joysuch/jsmap/data/map',
openingAnimation: false,
enableLighting: true,
enableShadows: true,
viewOptions: {
center: {
x: 119.65057611465456,
y: 39.93527621050255,
z: 0.016594102424956802
},
distance: 370.01629618875734,
rotate: 0,
tilt: 90
},
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 => {
addPointMarker(event);
});
}
//添加标注
function addPointMarker(event) {
remove()
setProperty.style.display = "none";
// //标注的X轴坐标取值范围
// var x = Math.random() * (105.20001908346316 - 105.19474256905414) + 105.19474256905414;
// //标注的Y轴坐标取值范围
// var y = Math.random() * (37.65154533433473 - 37.649024581292366) + 37.649024581292366;
// console.info(event)
var x = event.eventInfo.coord.x;
var y = event.eventInfo.coord.y;
var z = event.eventInfo.coord.z;
domMarker = new jsmap.JSDomMarker({
id: i,
position: {
x,
y,
z: 1
}, //坐标
floorId: 1, //楼层id,默认为1地面
pointerEvents: 'none',
content: '<div>' +
'<div class="wrapper">' +
'<div class="row cf">' +
'<div class="span">' +
'<div class="location_indicator"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
offset: jsmap.JSControlPosition.LEFT_BOTTOM,
marginOffset: {
x: 0,
y: 0
},
properties: {
type: 0,
},//属性设置
callback: (node) => {
// console.log(node);
} //回调事件
});
map.addMarker(domMarker);
// //创建option标签
// var option = document.createElement('option');
// option.value = i;
// option.innerText = `第${i}个DOM标注`;
// fragment.appendChild(option);
// markerArr.push(domMarker);
// markerArea.appendChild(fragment);
// markerArea.style.display = 'block';
i -= 1;
window.parent.postMessage({'LONGITUDE': x, 'LATITUDE': y}, '*');
}
//移除全部标注
function remove() {
setProperty.style.display = "none";
markerArea.style.display = 'none';
markerArea.innerHTML = '';
map.removeAllDomMarker();
markerArr = [];
i = 0;
max = 0;
}
//选择标注
function changeMarker(e) {
e = e || window.event;
currentMarker = markerArr.find(item => item._id === e.target.value);
if (currentMarker !== undefined) {
map.flyToMarker(currentMarker);
setProperty.style.display = "block";
propertyInput.forEach(item => {
if (item.className === 'ID') item.value = currentMarker._id;
if (item.className === 'floor') item.value = currentMarker.floorId;
if (item.className === 'position') item.value = 'x:' + currentMarker.position.x + ';' + 'y:' + currentMarker.position.y;
if (item.id === "show" && currentMarker.show === true) item.checked = true;
if (item.id === "x轴") item.value = currentMarker.marginOffset.x;
if (item.id === "y轴") item.value = currentMarker.marginOffset.y;
if (item.id === "on" && currentMarker.depthTest === true) item.checked = true;
if (item.id === "off" && currentMarker.depthTest === false) item.checked = true;
})
}
}
//设置属性事件
function property(e) {
e = e || window.event;
let {id} = e.target;
//设置显隐
if (id === 'show') currentMarker.show = true;
if (id === 'hide') currentMarker.show = false;
//是否开启深度检测
if (id === 'on') currentMarker.depthTest = true;
if (id === 'off') currentMarker.depthTest = false;
if (id === "changeImg") currentMarker.content = 'DOMMarker';
;
if (id === 'close') setProperty.style.display = "none";
}
//实时修改属性
function handleInput(e) {
e = e || window.event;
let {id, className, value} = e.target;
//修改偏移
currentMarker.marginOffset = {
x: id === 'x轴' ? Number(value) : currentMarker.marginOffset.x,
y: id === 'y轴' ? Number(value) : currentMarker.marginOffset.y,
}
}
</script>
</body>
</html>