<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<title>map3d</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${ctxStatic}/echartsx/css/common.css">
<link rel="stylesheet" href="${ctxStatic}/echartsx/css/example.css">
<link rel="stylesheet" href="${ctxStatic}/echartsx/css/codemirror.css">
<link rel="stylesheet" href="${ctxStatic}/echartsx/css/monokai.css">
<link rel="stylesheet" href="${ctxStatic}/echartsx/css/twilight.css">
<style>
#main { position:relative; top:0; bottom:0; width:100%; height:100%;}
</style>
</head>
<body>
<div id="main"></div>
<script src="${ctxStatic}/echartsx/lib/echarts/echarts.js"></script>
<script src="${ctxStatic}/echartsx/lib/echarts-x/echarts-x.js"></script>
<script type="text/javascript">
require.config({
paths: {
'echarts': '${ctxStatic}/echartsx/lib/echarts/',
'echarts-x': '${ctxStatic}/echartsx/lib/echarts-x'
}
});
require([
'echarts',
'echarts-x',
'echarts/chart/map',
'echarts-x/chart/map3d'
],function(ec){
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '目标沙盘',
x: 'center',
textStyle: {
color: 'white'
}
},
tooltip: {
formatter: '{b}'
},
series: [{
type: 'map3d',
mapType: 'world',
baseLayer: {
backgroundColor: '',
backgroundImage: '${ctxStatic}/echartsx/asset/earth.jpg',
quality: 'high',
},
surfaceLayers: [{
type: 'texture',
distance: 3,
image: '${ctxStatic}/echartsx/asset/clouds.png'
}],
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
},
borderWidth: 1,
borderColor: 'yellow',
areaStyle: {
color: 'rgba(0, 0, 0, 0)'
}
}
},
data: [{}]
}]
});
})
</script>
</body>
</html>
