<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
<html lang="en">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
|
<title>华星智控</title>
|
|
<link href="/hxzkoa/hxzk/assets/img/favicon.ico" rel="icon" type="image/x-icon" />
|
<link href="/hxzkoa/hxzk/layui/css/layui.css" rel="stylesheet" type="text/css" />
|
<link rel="stylesheet" href="/hxzkoa/hxzk/fengmap/css/fengmap.css">
|
<link rel="stylesheet" href="/hxzkoa/hxzk/fengmap/css/toolBarStyle.css">
|
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script src="/hxzkoa/hxzk/layui/layui.js"></script>
|
<script src="/hxzkoa/hxzk/fengmap/js/fengmap.map.min.js"></script>
|
<script src="/hxzkoa/hxzk/fengmap/js/fengmap.plugin.min.js"></script>
|
<script src="/hxzkoa/hxzk/fengmap/js/fengmap.plugins-mapedit.min.js"></script>
|
|
|
<style>
|
body {
|
height: 100%;
|
width: 100%;
|
}
|
|
.layui-layout-admin .layui-body {
|
padding-bottom: 0px;
|
}
|
|
.fm-view {
|
margin-bottom: 0px;
|
}
|
|
.layui-layout-admin .layui-side {
|
top: 0px;
|
}
|
|
.layui-layout-admin .layui-body {
|
top: 0px;
|
}
|
|
a {
|
cursor:pointer;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-layout layui-layout-admin">
|
<!-- <div class="layui-header">
|
</div> -->
|
|
<div class="layui-side layui-bg-black">
|
<div class="layui-side-scroll">
|
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
<li class="layui-nav-item layui-this"><a
|
onclick="onClick('1573200407934201857')">天津海晶化工厂一车间</a></li>
|
<li class="layui-nav-item"><a onclick="onClick('1573194681635500034')">天津海晶化工厂二车间</a>
|
</li>
|
<li class="layui-nav-item"><a onclick="onClick('1573188594433716225')">天津海晶化工厂800吨车间</a>
|
</li>
|
<li class="layui-nav-item"><a onclick="onClick('1555389045543792642')">天津瑞福鑫化工厂</a></li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="layui-body">
|
<div id="mapId" style="width:100%;height: 100%;cursor: pointer;"></div>
|
</div>
|
</div>
|
<script>
|
layui.use(['element', 'layer', 'util'], function () {
|
var element = layui.element
|
, layer = layui.layer
|
, util = layui.util
|
, $ = layui.$;
|
});
|
|
var map;
|
var options = {
|
container: document.getElementById("mapId"),
|
appName: 'map1',
|
key: '09facc4ee52d1844bc1e561dad5abf59',
|
mapID: '1573200407934201857',
|
themeID: '1580455989846306817',
|
minTiltAngle: 0,
|
mapZoom: 19.5,
|
}
|
|
map = new fengmap.FMMap(options);
|
|
map.on('loaded', function () {
|
var scrollFloorCtlOpt = {
|
position: fengmap.FMControlPosition.RIGHT_TOP,
|
floorButtonCount: 0,
|
offset: {
|
x: -25,
|
y: 120
|
},
|
viewModeControl: true,
|
floorModeControl: false,
|
needAllLayerBtn: false
|
};
|
scrollFloorControl = new fengmap.FMToolbar(scrollFloorCtlOpt);
|
scrollFloorControl.addTo(map)
|
var scrollScaleBarCtlOpt = {
|
fontSize:18,
|
height: 30,
|
position: fengmap.FMControlPosition.LEFT_BOTTOM,
|
offset: {
|
x: 20,
|
y: -20
|
},
|
|
};
|
var scaleBar = new fengmap.FMScaleBar(scrollScaleBarCtlOpt);
|
scaleBar.addTo(map)
|
var compass = new fengmap.FMCompass({ pointerImageURL:'/hxzkoa/hxzk/fengmap/data/pic-zbz@2x.png',position: fengmap.FMControlPosition.RIGHT_TOP, offset: { x: -20, y: 50 } });
|
compass.addTo(map);
|
|
compass.on('click', function () {
|
map.setRotation({
|
rotation: 0,
|
animate: true,
|
duration: 0.3,
|
finish: function () { console.log('setRotation'); }
|
})
|
});
|
});
|
|
function onClick(value) {
|
// 切换地图前先销毁地图
|
map.dispose();
|
var mapOptions = {
|
container: document.getElementById("mapId"),
|
appName: 'map1',
|
key: '09facc4ee52d1844bc1e561dad5abf59',
|
mapID: value,
|
themeID: '1580455989846306817',
|
minTiltAngle: 0,
|
mapZoom: 19.5,
|
}
|
map = new fengmap.FMMap(mapOptions);
|
map.on('loaded', () => {
|
var scrollFloorCtlOpt = {
|
position: fengmap.FMControlPosition.RIGHT_TOP,
|
floorButtonCount: 0,
|
offset: {
|
x: -25,
|
y: 120
|
},
|
viewModeControl: true,
|
floorModeControl: false,
|
needAllLayerBtn: false
|
};
|
scrollFloorControl = new fengmap.FMToolbar(scrollFloorCtlOpt);
|
scrollFloorControl.addTo(map);
|
var scrollScaleBarCtlOpt = {
|
fontSize:18,
|
height: 30,
|
position: fengmap.FMControlPosition.LEFT_BOTTOM,
|
offset: {
|
x: 20,
|
y: -20
|
},
|
|
};
|
var scaleBar = new fengmap.FMScaleBar(scrollScaleBarCtlOpt);
|
scaleBar.addTo(map)
|
var compass = new fengmap.FMCompass({ pointerImageURL:'/hxzkoa/hxzk/fengmap/data/pic-zbz@2x.png',position: fengmap.FMControlPosition.RIGHT_TOP, offset: { x: -20, y: 50 } });
|
compass.addTo(map);
|
|
compass.on('click', function () {
|
map.setRotation({
|
rotation: 0,
|
animate: true,
|
duration: 0.3,
|
finish: function () { console.log('setRotation'); }
|
})
|
});
|
FitView(map);
|
})
|
}
|
|
function FitView(map) {
|
map.setFitView(map.getBound())
|
}
|
</script>
|
</body>
|
|
</html>
|
