555 lines
14 KiB
HTML
555 lines
14 KiB
HTML
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8"/>
|
|||
|
|
<title>hello-jsmap</title>
|
|||
|
|
<script src="http://192.168.0.31:8089/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
|
|||
|
|
<link type="text/css" href="http://192.168.0.31:8089/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.0.31:8089/joysuch/LocalAssets/css/animation/pop.css">
|
|||
|
|
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/loading.css">
|
|||
|
|
<link rel="stylesheet" href="http://192.168.0.31:8089/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>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
//定义全局map变量
|
|||
|
|
var map = null;
|
|||
|
|
//定义地图ID变量
|
|||
|
|
var mapID = '100930';
|
|||
|
|
//定义循环的起始变量
|
|||
|
|
var i = 0;
|
|||
|
|
//创建存储标注的数组
|
|||
|
|
var markerArr = [];
|
|||
|
|
var markerIDArr = [];
|
|||
|
|
//记录当前所选的Marker
|
|||
|
|
var currentMarker = null;
|
|||
|
|
|
|||
|
|
//定义点标注全局变量
|
|||
|
|
var circleMarker = null;
|
|||
|
|
|
|||
|
|
//空间查询对象
|
|||
|
|
var spatialQuery = null;
|
|||
|
|
|
|||
|
|
window.onload = function () {
|
|||
|
|
window.addEventListener('message', function (e) {
|
|||
|
|
//加载地图
|
|||
|
|
// console.info('地图加载完成')
|
|||
|
|
// console.info(mapData)
|
|||
|
|
openMap(e.data);
|
|||
|
|
add(e.data);
|
|||
|
|
// addBox(e.data);
|
|||
|
|
addWall(e.data);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.addEventListener('unload', function (e) {
|
|||
|
|
//销毁地图
|
|||
|
|
map.destroy();
|
|||
|
|
map = null;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//打开地图
|
|||
|
|
function openMap(mapData) {
|
|||
|
|
//初始化参数
|
|||
|
|
var mapOptions = {
|
|||
|
|
//必要，地图容器
|
|||
|
|
container: 'mapContainer',
|
|||
|
|
//必要，地图类型
|
|||
|
|
mapType: jsmap.JSMapType.MAP_3D,
|
|||
|
|
//必要，地图路径
|
|||
|
|
// mapServerURL: 'http://mapdemo.joysuch.com',
|
|||
|
|
mapServerURL: 'http://192.168.0.31:8089/joysuch/jsmap/data/map',
|
|||
|
|
mapScaleLevelRange: [15,20], //地图缩放范围，默认[1,24]
|
|||
|
|
openingAnimation: false,
|
|||
|
|
enableLighting: true,
|
|||
|
|
enableShadows: true,
|
|||
|
|
viewOptions: {
|
|||
|
|
center: {
|
|||
|
|
x: mapData.LONGITUDE,
|
|||
|
|
y: mapData.LATITUDE,
|
|||
|
|
z: 0
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
distance: mapData.distance,
|
|||
|
|
rotate: mapData.rotate,
|
|||
|
|
tilt: mapData.tilt
|
|||
|
|
},
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
spatialQuery = new jsmap.JSSpatialQuery(map);
|
|||
|
|
|
|||
|
|
map.on('mapClickNode', event => {
|
|||
|
|
console.info(event)
|
|||
|
|
if(event.properties){
|
|||
|
|
window.parent.postMessage(event.properties,'*')
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
map.on('mapRightClickNode', function(event) {
|
|||
|
|
if (validStr(event.properties) && event.properties.get('type') === 'majordangersource') {
|
|||
|
|
if (validStr(circleMarker)) {
|
|||
|
|
map.removeAllCircleMarker();
|
|||
|
|
}
|
|||
|
|
map.highlightMarker([]);
|
|||
|
|
circleMarker = new jsmap.JSCircleMarker({
|
|||
|
|
id: 'circleMarker',
|
|||
|
|
position: new jsmap.JSPoint(event.x, event.y, 0),
|
|||
|
|
floorId: 0,
|
|||
|
|
color: 'rgba(0,255,255,0.3)',
|
|||
|
|
radius: 100,
|
|||
|
|
clampToGround: true,
|
|||
|
|
circleType: jsmap.JSCircleType.FILL,
|
|||
|
|
depthTest: false,
|
|||
|
|
show: true,
|
|||
|
|
allowPicking: false,
|
|||
|
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
|||
|
|
properties: {
|
|||
|
|
test: 'circleMarker'
|
|||
|
|
},
|
|||
|
|
callback: (marker) => {
|
|||
|
|
console.log(marker);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
map.addMarker(circleMarker);
|
|||
|
|
let circle = new jsmap.JSCircle({x:event.x,y:event.y,z:2},100);
|
|||
|
|
var result = spatialQuery.query({
|
|||
|
|
geometry: circle,
|
|||
|
|
spatialQueryMode:jsmap.JSSpatialQueryMode.CONTAIN,//定义空间查询模式：包含关系
|
|||
|
|
markerType:[jsmap.JSMarkerType.ICON_TEXT_MARKER],//查询标注类型
|
|||
|
|
propertiesFilter: (properties) => {//属性过滤条件
|
|||
|
|
return properties && properties.get('type') === 'video';
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
console.log('result',result);
|
|||
|
|
for (let j = 0; j < result.length; j++) {
|
|||
|
|
map.highlightMarker(result[j]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// console.log('mapRightClickNode', event);
|
|||
|
|
// event.FID: 点击的nodeID
|
|||
|
|
// event.centroid: 点击的node的质心
|
|||
|
|
// event.eventInfo:{coord: 地图坐标, eventID:event事件ID}
|
|||
|
|
// event.floorId:点击楼层ID
|
|||
|
|
// event.mapCoord:地图坐标
|
|||
|
|
// event.node:点击的node
|
|||
|
|
// event.nodeType:node的类型，见JSNodeType枚举
|
|||
|
|
// event.properties:node的属性信息
|
|||
|
|
// event.x:地图坐标x
|
|||
|
|
// event.y:地图坐标y
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function validStr(str) {
|
|||
|
|
if (str != null && str != '' && typeof (str) != 'undefined' && str != 'undefined' && str != 0) { return true }
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
//添加标注
|
|||
|
|
function add(data) {
|
|||
|
|
for (let j = 0; j < data.varList.length; j++) {
|
|||
|
|
let mapData = data.varList[j];
|
|||
|
|
if (!(validStr(mapData.LONGITUDE) && validStr(mapData.LONGITUDE))){
|
|||
|
|
continue
|
|||
|
|
}
|
|||
|
|
markerIDArr.push(mapData.id)
|
|||
|
|
let iconTextMarker = new jsmap.JSIconTextMarker({
|
|||
|
|
id: j,
|
|||
|
|
position: {
|
|||
|
|
x: Number(mapData.LONGITUDE),
|
|||
|
|
y: Number(mapData.LATITUDE),
|
|||
|
|
z: 2
|
|||
|
|
}, //坐标
|
|||
|
|
floorId: 1, //楼层id,默认为1（地面）
|
|||
|
|
image: mapData.IMAGE_FILE,
|
|||
|
|
imageHeight: validStr(data.imageHeight) ? data.imageHeight : 35, //图片高度
|
|||
|
|
imageWidth: validStr(data.imageWidth) ? data.imageWidth : 35, //图片宽度
|
|||
|
|
offset: jsmap.JSControlPosition.RIGHT_BOTTOM,
|
|||
|
|
text: mapData.NAME,//文字
|
|||
|
|
font: 'bold 12px 微软雅黑',//字体
|
|||
|
|
fontColor: '#ff7744',//文字颜色
|
|||
|
|
fontStrokeColor: '#77ddff', //字体描边颜色
|
|||
|
|
fontStrokeWidth: 1, //字体描边宽度
|
|||
|
|
backgroundColor: '#409EFF', //背景色颜色
|
|||
|
|
backgroundRadius: 1, // 背景圆角
|
|||
|
|
backgroundStrokeColor: '#CD5C5C', //背景边线颜色
|
|||
|
|
backgroundStrokeWidth: 1, //背景边线宽度
|
|||
|
|
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
|||
|
|
depthTest: false,//是否开启深度检测
|
|||
|
|
properties: {
|
|||
|
|
id: mapData.id,
|
|||
|
|
type: mapData.TYPE
|
|||
|
|
}, //属性设置
|
|||
|
|
callback: (node) => {
|
|||
|
|
// console.log(node);
|
|||
|
|
} //回调事件
|
|||
|
|
});
|
|||
|
|
map.addMarker(iconTextMarker);
|
|||
|
|
markerArr.push(iconTextMarker);
|
|||
|
|
}
|
|||
|
|
console.log('markerArr',markerArr)
|
|||
|
|
console.log('markerIDArr',markerIDArr)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//添加标注
|
|||
|
|
function addBox(data) {
|
|||
|
|
for (let j = 0; j < data.boxList.length; j++) {
|
|||
|
|
let mapData = data.boxList[j];
|
|||
|
|
let boxMarker = new jsmap.JSBoxMarker({
|
|||
|
|
id: j,
|
|||
|
|
position: mapData.position, //坐标
|
|||
|
|
floorId: 1, //楼层id,默认为1（地面）
|
|||
|
|
color: mapData.color, //颜色
|
|||
|
|
height: 0, //基底高度
|
|||
|
|
stretchHeight: mapData.stretchHeight, //拉伸高度
|
|||
|
|
strokeColor: mapData.strokeColor, //边线颜色
|
|||
|
|
strokeWidth: 4, //边线宽度
|
|||
|
|
// properties: {
|
|||
|
|
// id: mapData.id
|
|||
|
|
// }, //属性设置
|
|||
|
|
callback: (node) => {
|
|||
|
|
// console.log(node);
|
|||
|
|
} //回调事件
|
|||
|
|
});
|
|||
|
|
map.addMarker(boxMarker);
|
|||
|
|
markerArr.push(boxMarker)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//添加标注
|
|||
|
|
function addWall(data) {
|
|||
|
|
let mapData = data.wallMap;
|
|||
|
|
let wallMarker = new jsmap.JSWallMarker({
|
|||
|
|
id: 'wallMarker',
|
|||
|
|
position: mapData.position, //坐标
|
|||
|
|
floorId: 1, //楼层id,默认为1（地面）
|
|||
|
|
color: 'rgb(139,71,137)', //颜色
|
|||
|
|
closed: true, //墙是否闭合
|
|||
|
|
baseHeight: 0, //基底高度
|
|||
|
|
height: 20, //高度
|
|||
|
|
wallType: jsmap.JSWallType.WAVE, //墙类型
|
|||
|
|
callback: (node) => {
|
|||
|
|
// console.log(node);
|
|||
|
|
} //回调事件
|
|||
|
|
});
|
|||
|
|
map.addMarker(wallMarker);
|
|||
|
|
markerArr.push(wallMarker)
|
|||
|
|
}
|
|||
|
|
function showCurrentMarker(id){
|
|||
|
|
// console.info("我是html页面的方法,传给我的Id：" + id)
|
|||
|
|
currentMarker = markerArr.find( item => item._id === id);
|
|||
|
|
if(currentMarker !== undefined){
|
|||
|
|
map.flyToMarker(currentMarker);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|