1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
| //克里金插值数据封装
| let paramsK={
| mapCenter:[114.360456, 30.538622],
| maxValue:100,
| krigingModel:'exponential',//model还可选'gaussian','spherical'
| krigingSigma2:0,
| krigingAlpha:100,
| canvasAlpha:0.5,//canvas图层透明度
| colors:["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"],
| };
| //亳州 //六安 //合肥 //阜阳
| let points=[[115.78919,33.863132],[116.515884,31.765982],[117.228779,31.826871],[115.807588,32.915904],[116.396301,32.877101]]
| //逆时针,左 下 右 上 (观测点最边缘的经纬度)
| let extent = [115.68919,31.665982,117.328779,33.963132]
| let values=[3,20,28,8,23],lngs=[],lats=[];
| let maxValue = getMaxMin(values,'max');
| let minValue = getMaxMin(values,'min');
| points.forEach(function(v){
| lngs.push(v[0])
| lats.push(v[1])
| })
| //变差图;取样间隔有关的变分量 //"exponential", 0, 100
| let variogram=kriging.train(values,lngs,lats, paramsK.krigingModel,paramsK.krigingSigma2,paramsK.krigingAlpha);
| //绘制多边形
| let polygons=[];
| polygons.push([[extent[0],extent[1]],[extent[0],extent[3]],[extent[2],extent[3]],[extent[2],extent[1]]]);
| //范围经度右-范围经纬左
| let grid=kriging.grid(polygons,variogram,(extent[2]-extent[0])/80);
|
| let myChart = echarts.init(document.getElementById("container"));
| let COLORS = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
| let lngExtent = [extent[1], extent[3]];
| let latExtent = [extent[0], extent[2]];
| let cellCount = [grid[0].length, grid.length];
| //单元格坐标
| let cellSizeCoord = [(latExtent[1] - latExtent[0]) / cellCount[1],(lngExtent[1] - lngExtent[0]) / cellCount[0]];
| let data = []
| for(let i=0;i<grid[0].length-1;i++){ //宽
| for(let j=0;j<grid.length-1;j++){ //高
| let d = [j,i,grid[j][i].toFixed(0)]
| // let d = [j,i,grid[i][j].toFixed(0)]
| data.push(d);
| }
| }
| /**
| * 获取数组中的最大值和最小值函数
| * */
| function getMaxMin(arr,param) {
| try {
| if (param == 'max') {
| if(typeof( Math.max.apply(null, arr))!='number'){
| return "Error:element in arr is not a number!";
| }else{
| return Math.max.apply(null, arr);
| }
| }else if (param == 'min') {
| if(typeof( Math.min.apply(null, arr))!='number'){
| return "Error:element in arr is not a number!";
| }else{
| return Math.min.apply(null, arr);
| }
| }else{
| return "Error:param is unsupported!";
| }
| } catch (e) {
| return "Error:"+e;
| }
| }
| function renderItem(params, api) {
| let lngIndex = api.value(0);
| let latIndex = api.value(1);
| let pointLeftTop = getCoord(params, api, lngIndex, latIndex);
| let pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);
| return {
| type: 'rect',
| shape: {
| x: pointLeftTop[0],
| y: pointLeftTop[1],
| width: pointRightBottom[0] - pointLeftTop[0],
| height: pointRightBottom[1] - pointLeftTop[1]
| },
| style: api.style({
| stroke: 'rgba(0,0,0,0)' //笔画,网格线
| }),
| styleEmphasis: api.styleEmphasis() //风格强调
| };
| }
|
| function getCoord(params, api, lngIndex, latIndex) {
| var coords = params.context.coords || (params.context.coords = []);
| var key = lngIndex + '-' + latIndex;
|
| // bmap returns point in integer, which makes cell width unstable.
| //返回整数形式的点，这使得单元格宽度不稳定。
| // So we have to use right bottom point. 所以我们必须使用正确的底线
| return coords[key] || (coords[key] = api.coord([+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),+(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
| ]));
| }
| let map = null
| $.ajaxSettings.async = false; //(同步执行) 获取地图样式
| //$.get('lib/custom_map_config.json', function (data) {
| // mapStyle = data
| //})
| $.ajaxSettings.async = true; //(异步执行)
| option = {
| tooltip: {},
| visualMap: {
| inverse: true,
| top: 10,
| left: 10,
| min: minValue,
| max: maxValue,
| inRange: {
| color: COLORS,
| opacity: 0.7
| }
| },
| bmap: {
| center: [117.283042, 31.86119],
| zoom: 8,
| roam: true,
| mapStyle: {styleJson:mapStyle}
| },
| series: [
| {
| type: 'custom',
| coordinateSystem: 'bmap',
| renderItem: renderItem,
| animation: false,
| emphasis: {//强调
| itemStyle: {
| color: 'yellow'
| }
| },
| encode: {
| tooltip: 2
| },
| data: data
| }
| ],
| };
| myChart.setOption(option)
|
|
