113 lines
3.4 KiB
HTML
113 lines
3.4 KiB
HTML
|
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
|
|||
|
|
<script src="~/Scripts/echarts4.js"></script>
|
|||
|
|
<script src="~/Scripts/echarts-gl.js"></script>
|
|||
|
|
1
|
|||
|
|
2
|
|||
|
|
3
|
|||
|
|
2、html代码
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="mapBox"></div>
|
|||
|
|
</body 1 2 3 3、js代码 <script type="text/javascript">
|
|||
|
|
//从json文件中取出地图信息
|
|||
|
|
$.get('/guangdong.json', function (chinaJson) {
|
|||
|
|
echarts.registerMap('jiangmen', chinaJson);
|
|||
|
|
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
|
|||
|
|
mapBoxEchart.setOption({
|
|||
|
|
geo3D: {
|
|||
|
|
map: 'jiangmen',
|
|||
|
|
type: 'map',
|
|||
|
|
boxHeight: 2.2,
|
|||
|
|
regionHeight: 2,
|
|||
|
|
roam: true,
|
|||
|
|
label: {
|
|||
|
|
//地图上是否显示市区名称
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#FFF76D"
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#FFF76D"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
//color: '#00287A',
|
|||
|
|
color: "#2E55FC",
|
|||
|
|
borderColor: '#00287A', //省份的边框颜色 330867
|
|||
|
|
borderWidth: 1.5, //省份的边框宽度
|
|||
|
|
opacity: 0.5
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
color: 'rgba(10, 21, 67, 0.3)',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: '#3fdaff',
|
|||
|
|
//areaColor: "#7DC3DE",
|
|||
|
|
shadowColor: '#fff',
|
|||
|
|
opacity: 0.5,
|
|||
|
|
shadowBlur: 30
|
|||
|
|
},
|
|||
|
|
light: { //光照阴影
|
|||
|
|
main: {
|
|||
|
|
color: '#2F85DC', //光照颜色
|
|||
|
|
intensity: 2, //光照强度
|
|||
|
|
shadowQuality: 'high', //阴影亮度
|
|||
|
|
shadow: true, //是否显示阴影
|
|||
|
|
alpha: 50,
|
|||
|
|
beta: 10
|
|||
|
|
},
|
|||
|
|
ambient: {
|
|||
|
|
intensity: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
postEffect: {
|
|||
|
|
enable: true,
|
|||
|
|
bloom: {
|
|||
|
|
enable: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
groundPlane: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
shading: 'realistic',
|
|||
|
|
zoomSensitivity: 10 //缩放灵敏度
|
|||
|
|
}，
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
//配置位置标记点
|
|||
|
|
type: 'scatter3D',
|
|||
|
|
coordinateSystem: 'geo3D',
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 15,
|
|||
|
|
blendMode: 'lighter',
|
|||
|
|
zlevel: 11,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
formatter: '{b}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000',
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#a8edea' //标记颜色
|
|||
|
|
},
|
|||
|
|
data: [{ name: '测试一', value: [113.149649, 22.617641, 100] },
|
|||
|
|
{ name: '测试二', value: [112.316858, 22.186088, 100] }]
|
|||
|
|
}, {
|
|||
|
|
//配置攻击点
|
|||
|
|
type: 'scatter3D',
|
|||
|
|
coordinateSystem: 'geo3D',
|
|||
|
|
symbol: 'pin', symbolSize: function (val) {
|
|||
|
|
var ret;
|
|||
|
|
if ((val[2] >= 0) && (val[2] < 1000)) { ret = 50; } else { ret = 65; } return ret;
|
|||
|
|
}, blendMode: 'lighter', zlevel: 11,
|
|||
|
|
label: {
|
|||
|
|
show: true, position: 'top', //formatter: '{b}' , formatter: function (params) { var ret=params.value[2];
|
|||
|
|
return ret;
|
|||
|
|
}, textStyle: { color: '#000', fontFamily: "Microsoft YaHei", fontWeight: 'bold' }
|
|||
|
|
}, itemStyle: {
|
|||
|
|
show:
|
|||
|
|
true, color: '#eb4f38'
|
|||
|
|
}, data: [{ name: '中心', value: [112.88089, 22.583612, 200] }] } ] }); }); </script>
|