效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>散点图</title>
<script src="/static/Cesium/Cesium.js"></script>
<script type="text/javascript" src="/static/Cesium/viewerCesiumNavigationMixin.js"></script>
<script src="/static/echarts/echarts-all-4.js"></script>
<link rel="stylesheet" href="/static/Cesium/Widgets/widgets.css">
<script type="text/javascript" src="/static/echarts/FlowEcharts.js"></script>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<style>
html,
body,
#csiumContain {
width: 100%;
height: 100%;
margin: 0px;
}
.cesium-widget-credits {
display: none !important;
}
.tool-bar {
position: absolute;
top: 1vh;
left: 2vw;
z-index: 999999;
}
.cesium-viewer-infoBoxContainer {
display: none !important;
}
</style>
</head>
<body>
<div id="csiumContain"></div>
</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
var viewer = new Cesium.Viewer("csiumContain", {
homeButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
baseLayerPicker: false,
sceneModePicker: true,
navigationHelpButton: false,
geocoder: false,
sceneModePicker: false,
})
tdtLayer = this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=key",
layer: "tdtCva",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
show: false
})
);
tdtLayer1 = this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=key",
layer: "tdtCva",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
maximumLevel: 18,
show: false
})
);
var workEcharts = {
layerWork: null,
create: function(e) {
this.viewer = e
this.path = ''
},
activate: function() {
this.showData()
},
disable: function() {
this.layerWork.dispose()
this.layerWork = null
},
showData: function(e) {
var a = this.getOption(e)
null == this.layerWork ? this.layerWork = new FlowEcharts(this.viewer, a) : this.layerWork.updateOverlay(a)
},
getOption: function(e) {
var o = {
'上海': [121.48, 31.22],
'珠海': [113.52, 22.3],
'三亚': [109.31, 18.14],
'惠州': [114.4, 23.09],
'海口': [110.35, 20.02],
'合肥': [117.27, 31.86],
'南京': [118.78, 32.04],
'杭州': [120.19, 30.26],
'苏州': [120.62, 31.32],
'无锡': [120.29, 31.59],
'昆山': [120.95, 31.39],
'广州': [113.23, 23.16],
'深圳': [114.07, 22.62],
'佛山': [113.11, 23.05],
'东莞': [113.75, 23.04],
'福州': [119.3, 26.08],
'厦门': [118.1, 24.46],
'南宁': [108.33, 22.84],
'郑州': [113.65, 34.76],
'武汉': [114.31, 30.52],
'长沙': [113, 28.21],
'南昌': [115.89, 28.68],
'北京': [116.46, 39.92],
'长春': [125.35, 43.88],
'大连': [121.62, 38.92],
'沈阳': [123.38, 41.8],
'哈尔滨': [126.63, 45.75],
'天津': [117.2, 39.13],
'济南': [117, 36.65],
'青岛': [120.33, 36.07],
'太原': [112.53, 37.87],
'石家庄': [114.48, 38.03],
'西安': [108.95, 34.27],
'成都': [104.06, 30.67],
'重庆': [106.54, 29.59],
'昆明': [102.73, 25.04]
}
var a = function(e) {
for (var a = [], t = 0; t < e.length; t++) {
var n = o[e[t].name]
n && a.push({ name: e[t].name, value: n.concat(e[t].value) })
}
return a
}
var t = [a(e = [{ name: '上海', value: 19780 }, { name: '珠海', value: 2186 }, {
name: '三亚',
value: 1135
}, { name: '惠州', value: 1973 }, { name: '海口', value: 2568 }, { name: '合肥', value: 4039 }, {
name: '南京',
value: 6959
}, { name: '杭州', value: 5632 }, { name: '苏州', value: 6707 }, { name: '无锡', value: 3393 }, {
name: '昆山',
value: 1894
}, { name: '广州', value: 15769 }, { name: '深圳', value: 8259 }, { name: '佛山', value: 5741 }, {
name: '东莞',
value: 3030
}, { name: '福州', value: 4542 }, { name: '厦门', value: 3329 }, { name: '南宁', value: 3157 }, {
name: '郑州',
value: 6690
}, { name: '武汉', value: 8678 }, { name: '长沙', value: 5303 }, { name: '南昌', value: 3025 }, {
name: '北京',
value: 20259
}, { name: '长春', value: 3016 }, { name: '大连', value: 3202 }, { name: '沈阳', value: 4540 }, {
name: '哈尔滨',
value: 3141
}, { name: '天津', value: 8626 }, { name: '济南', value: 4361 }, { name: '青岛', value: 6667 }, {
name: '太原',
value: 4080
}, { name: '石家庄', value: 6137 }, { name: '西安', value: 6991 }, { name: '成都', value: 13873 }, {
name: '重庆',
value: 13283
}, { name: '昆明', value: 4633 }]), a(e.sort(function(e, a) {
return a.value - e.value
}).slice(0, 6))]
e.sort(function(e, a) {
return e.value - a.value
})
for (var n = [], r = [], i = 0, l = e.length, s = 0; s < e.length; s++) {
n.push(e[s].name), r.push(e[s].value), i += e[s].value
}
var option = {
animation: !1,
backgroundColor: 'rgba(17, 19, 42, 0.3)',
title: [{
text: '散点图态势',
subtext: 'san dian tu taishi',
left: 'center',
textStyle: { color: '#fff' }
}, {
id: 'statistic',
text: l ? '平均: ' + parseInt((i / l).toFixed(4)) : '',
right: 120,
top: 40,
width: 100,
textStyle: { color: '#fff', fontSize: 16 }
}],
GLMap: {},
tooltip: { trigger: 'item' },
grid: { right: 40, top: 100, bottom: 40, width: '30%' },
xAxis: {
type: 'value',
scale: !0,
position: 'top',
boundaryGap: !1,
splitLine: { show: !1 },
axisLine: { show: !1 },
axisTick: { show: !1 },
axisLabel: { margin: 2, textStyle: { color: '#aaa' } }
},
yAxis: {
type: 'category',
nameGap: 16,
axisLine: { show: !0, lineStyle: { color: '#ddd' } },
axisTick: { show: !1, lineStyle: { color: '#ddd' } },
axisLabel: { interval: 0, textStyle: { color: '#ddd' } },
data: n
},
series: [{
type: 'scatter',
coordinateSystem: 'GLMap',
data: t[0],
symbolSize: function(e) {
var a = e[2] / 500 * 1.5
return Math.max(a, 8)
},
label: { normal: { formatter: '{b}', position: 'right', show: !1 }, emphasis: { show: !0 } },
itemStyle: { normal: { color: '#FF8C00', position: 'right', show: !0 } }
}, {
type: 'effectScatter',
coordinateSystem: 'GLMap',
data: t[0],
symbolSize: function(e) {
var a = e[2] / 500
return Math.max(a, 8)
},
showEffectOn: 'render',
rippleEffect: { brushType: 'stroke' },
hoverAnimation: !0,
label: { normal: { formatter: '{b}', position: 'right', show: !0 } },
itemStyle: { normal: { color: '#f4e925', shadowBlur: 50, shadowColor: '#EE0000' } },
zlevel: 1
}, {
id: 'bar',
zlevel: 2,
type: 'bar',
symbol: 'none',
itemStyle: { normal: { color: '#ddb926' } },
data: e
}]
}
console.log(option, 'option')
return option
}
}
function initWork() {
workEcharts.create(viewer)
workEcharts.activate()
}
initWork()
</script>
</html>
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
