539 lines
14 KiB
HTML
539 lines
14 KiB
HTML
|
||
<!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>
|