414 lines
38 KiB
HTML
414 lines
38 KiB
HTML
|
|
||
|
|
<!--
|
||
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
||
|
|
or more contributor license agreements. See the NOTICE file
|
||
|
|
distributed with this work for additional information
|
||
|
|
regarding copyright ownership. The ASF licenses this file
|
||
|
|
to you under the Apache License, Version 2.0 (the
|
||
|
|
"License"); you may not use this file except in compliance
|
||
|
|
with the License. You may obtain a copy of the License at
|
||
|
|
|
||
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
|
||
|
|
Unless required by applicable law or agreed to in writing,
|
||
|
|
software distributed under the License is distributed on an
|
||
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
|
|
KIND, either express or implied. See the License for the
|
||
|
|
specific language governing permissions and limitations
|
||
|
|
under the License.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<script src="lib/esl.js"></script>
|
||
|
|
<script src="lib/config.js"></script>
|
||
|
|
<script src="lib/testHelper.js"></script>
|
||
|
|
<script src="lib/jquery.min.js"></script>
|
||
|
|
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
|
||
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<style>
|
||
|
|
h1 {
|
||
|
|
line-height: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background: #ddd;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.chart {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#pens {
|
||
|
|
position: fixed;
|
||
|
|
right: 10px;
|
||
|
|
top: 10px;
|
||
|
|
z-index: 9999999;
|
||
|
|
border: 2px solid #aaa;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#pens div {
|
||
|
|
width: 40px;
|
||
|
|
height: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="pens">
|
||
|
|
<span>free</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart" id="grid"></div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];
|
||
|
|
|
||
|
|
function initPens(echarts, chart, data) {
|
||
|
|
|
||
|
|
var currColorIndex = 0;
|
||
|
|
var pens = $('#pens');
|
||
|
|
|
||
|
|
COLORS.forEach(function (color, index) {
|
||
|
|
var penEl = $('<div></div>').css('background', color);
|
||
|
|
pens.append(penEl);
|
||
|
|
penEl.on('click', function () {
|
||
|
|
currColorIndex = index;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
var drawing;
|
||
|
|
var downing;
|
||
|
|
chart.getZr().on('mousedown', function (e) {
|
||
|
|
downing = [e.offsetX, e.offsetY];
|
||
|
|
});
|
||
|
|
chart.getZr().on('mouseup', function (e) {
|
||
|
|
if (!downing) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (Math.pow(e.offsetX - downing[0], 2) + Math.pow(e.offsetY - downing[1], 2) > 4) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
drawing = !drawing;
|
||
|
|
$('#pens span')[0].innerHTML = !!drawing ? 'draw' : 'free';
|
||
|
|
downing = null;
|
||
|
|
});
|
||
|
|
chart.on('mousemove', function (params) {
|
||
|
|
if (!drawing) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var dataIndex = params.dataIndex;
|
||
|
|
var value = params.value;
|
||
|
|
data[dataIndex][2] = currColorIndex;
|
||
|
|
|
||
|
|
update();
|
||
|
|
});
|
||
|
|
|
||
|
|
var update = echarts.throttle(function () {
|
||
|
|
chart.setOption({
|
||
|
|
series: {
|
||
|
|
data: data
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var data;
|
||
|
|
|
||
|
|
require([
|
||
|
|
'echarts',
|
||
|
|
// 'echarts/chart/custom',
|
||
|
|
// 'echarts/chart/scatter',
|
||
|
|
// 'echarts/chart/effectScatter',
|
||
|
|
// 'echarts/component/legend',
|
||
|
|
// 'echarts/component/tooltip',
|
||
|
|
// 'echarts/component/visualMap',
|
||
|
|
'extension/bmap'
|
||
|
|
], function (echarts) {
|
||
|
|
|
||
|
|
var lngExtent = [39.5, 40.6];
|
||
|
|
var latExtent = [115.9, 116.8];
|
||
|
|
var cellCount = [50, 50];
|
||
|
|
var cellSizeCoord = [
|
||
|
|
(lngExtent[1] - lngExtent[0]) / cellCount[0],
|
||
|
|
(latExtent[1] - latExtent[0]) / cellCount[1]
|
||
|
|
];
|
||
|
|
var gapSize = 0;
|
||
|
|
data = [[0,0,5],[1,0,5],[2,0,5],[3,0,5],[4,0,5],[5,0,5],[6,0,5],[7,0,5],[8,0,5],[9,0,5],[10,0,5],[11,0,5],[12,0,5],[13,0,5],[14,0,5],[15,0,5],[16,0,5],[17,0,5],[18,0,5],[19,0,5],[20,0,5],[21,0,5],[22,0,5],[23,0,5],[24,0,5],[25,0,5],[26,0,5],[27,0,5],[28,0,5],[29,0,5],[30,0,5],[31,0,5],[32,0,5],[33,0,5],[34,0,5],[35,0,5],[36,0,5],[37,0,5],[38,0,5],[39,0,5],[40,0,5],[41,0,5],[42,0,5],[43,0,5],[44,0,5],[45,0,5],[46,0,5],[47,0,5],[48,0,5],[49,0,5],[0,1,5],[1,1,5],[2,1,5],[3,1,5],[4,1,5],[5,1,5],[6,1,5],[7,1,5],[8,1,5],[9,1,5],[10,1,5],[11,1,5],[12,1,5],[13,1,5],[14,1,5],[15,1,5],[16,1,5],[17,1,5],[18,1,5],[19,1,5],[20,1,5],[21,1,5],[22,1,5],[23,1,5],[24,1,5],[25,1,5],[26,1,5],[27,1,5],[28,1,5],[29,1,5],[30,1,5],[31,1,5],[32,1,5],[33,1,5],[34,1,5],[35,1,5],[36,1,5],[37,1,5],[38,1,5],[39,1,5],[40,1,5],[41,1,5],[42,1,5],[43,1,5],[44,1,5],[45,1,5],[46,1,5],[47,1,5],[48,1,5],[49,1,5],[0,2,5],[1,2,5],[2,2,5],[3,2,5],[4,2,5],[5,2,5],[6,2,5],[7,2,5],[8,2,5],[9,2,5],[10,2,5],[11,2,5],[12,2,5],[13,2,5],[14,2,5],[15,2,5],[16,2,5],[17,2,5],[18,2,5],[19,2,5],[20,2,5],[21,2,5],[22,2,5],[23,2,5],[24,2,4],[25,2,5],[26,2,5],[27,2,5],[28,2,5],[29,2,5],[30,2,5],[31,2,5],[32,2,5],[33,2,5],[34,2,4],[35,2,5],[36,2,5],[37,2,5],[38,2,5],[39,2,5],[40,2,5],[41,2,5],[42,2,5],[43,2,5],[44,2,5],[45,2,5],[46,2,5],[47,2,5],[48,2,5],[49,2,5],[0,3,5],[1,3,5],[2,3,5],[3,3,5],[4,3,5],[5,3,5],[6,3,5],[7,3,5],[8,3,5],[9,3,5],[10,3,5],[11,3,5],[12,3,5],[13,3,5],[14,3,5],[15,3,5],[16,3,5],[17,3,5],[18,3,5],[19,3,5],[20,3,5],[21,3,5],[22,3,5],[23,3,5],[24,3,5],[25,3,5],[26,3,5],[27,3,5],[28,3,5],[29,3,5],[30,3,5],[31,3,5],[32,3,5],[33,3,4],[34,3,5],[35,3,5],[36,3,5],[37,3,5],[38,3,5],[39,3,5],[40,3,5],[41,3,5],[42,3,5],[43,3,5],[44,3,5],[45,3,5],[46,3,5],[47,3,5],[48,3,5],[49,3,5],[0,4,5],[1,4,5],[2,4,5],[3,4,5],[4,4,5],[5,4,5],[6,4,5],[7,4,5],[8,4,5],[9,4,5],[10,4,5],[11,4,5],[12,4,5],[13,4,5],[14,4,5],[15,4,5],[16,4,5],[17,4,4],[18,4,5],[19,4,5],[20,4,5],[21,4,5],[22,4,5],[23,4,5],[24,4,5],[25,4,5],[26,4,5],[27,4,5],[28,4,5],[29,4,5],[30,4,5],[31,4,5],[32,4,5],[33,4,4],[34,4,5],[35,4,5],[36,4,5],[37,4,5],[38,4,5],[39,4,5],[40,4,5],[41,4,5],[42,4,5],[43,4,5],[44,4,5],[45,4,5],[46,4,5],[47,4,5],[48,4,5],[49,4,5],[0,5,5],[1,5,5],[2,5,5],[3,5,5],[4,5,5],[5,5,5],[6,5,5],[7,5,5],[8,5,5],[9,5,5],[10,5,5],[11,5,5],[12,5,5],[13,5,5],[14,5,5],[15,5,5],[16,5,5],[17,5,5],[18,5,5],[19,5,5],[20,5,5],[21,5,5],[22,5,5],[23,5,5],[24,5,5],[25,5,5],[26,5,5],[27,5,5],[28,5,5],[29,5,5],[30,5,5],[31,5,5],[32,5,5],[33,5,5],[34,5,5],[35,5,5],[36,5,5],[37,5,5],[38,5,5],[39,5,5],[40,5,5],[41,5,5],[42,5,5],[43,5,5],[44,5,5],[45,5,5],[46,5,5],[47,5,5],[48,5,5],[49,5,5],[0,6,5],[1,6,5],[2,6,5],[3,6,5],[4,6,5],[5,6,5],[6,6,5],[7,6,5],[8,6,5],[9,6,5],[10,6,5],[11,6,5],[12,6,5],[13,6,5],[14,6,5],[15,6,5],[16,6,5],[17,6,5],[18,6,5],[19,6,5],[20,6,5],[21,6,5],[22,6,5],[23,6,5],[24,6,5],[25,6,5],[26,6,4],[27,6,5],[28,6,5],[29,6,4],[30,6,5],[31,6,5],[32,6,5],[33,6,5],[34,6,5],[35,6,5],[36,6,5],[37,6,5],[38,6,5],[39,6,5],[40,6,5],[41,6,5],[42,6,5],[43,6,5],[44,6,5],[45,6,5],[46,6,5],[47,6,5],[48,6,5],[49,6,5],[0,7,5],[1,7,5],[2,7,5],[3,7,5],[4,7,5],[5,7,5],[6,7,5],[7,7,5],[8,7,5],[9,7,5],[10,7,5],[11,7,5],[12,7,5],[13,7,5],[14,7,5],[15,7,5],[16,7,5],[17,7,4],[18,7,5],[19,7,4],[20,7,4],[21,7,5],[22,7,5],[23,7,5],[24,7,5],[25,7,5],[26,7,5],[27,7,5],[28,7,5],[29,7,5],[30,7,5],[31,7,5],[32,7,5],[33,7,5],[34,7,5],[35,7,5],[36,7,5],[37,7,5],[38,7,5],[39,7,5],[40,7,5],[41,7,5],[42,7,5],[43,7,5],[44,7,5],[45,7,5],[46,7,5],[47,7,5],[48,7,5],[49,7,5],[0,8,5],[1,8,5],[2,8,5],[3,8,5],[4,8,5],[5,8,4],[6,8,5],[7,8,4],[8,8,5],[9,8,5],[10,8,5],[11,8,5],[12,8,5],[13,8,5],[14,8,5],[15,8,4],[16,8,5],[17,8,5],[18,8,5],[19,8,5],[20,8,5],[21,8,5],[22,8,4],[23,8,4],[24,8,4],[25,8,5],[26,8,5],[27,8,5],[28,8,4],[29,8,4],[30,8,5],[31,8,5],[32,8,4],[33,8,4],[34,8,5],[35,8,5],[36,8,5],[37,8,5],[38,8,5],[39,8,5],[40,8,5],[41,8,5],[42,8,5],[43,8,5],[44,8,5],[45,8,5],[46,8,5],[47,8,5],[48,8,5],[49,8,5],[0,9,5],[1,9,5],[2,9,5],[3,9,5],[4,9,5],[5,9,5],[6,9,5],[7,9,5],[8,9,4],[9,9,5],[10,9,5],[11,9,4],[12,9,5],[13,
|
||
|
|
|
||
|
|
data.sort(function (a, b) {
|
||
|
|
var dist0 = (a[0] - 25) * (a[0] - 25) + (a[1] - 25) * (a[1] - 25);
|
||
|
|
var dist1 = (b[0] - 25) * (b[0] - 25) + (b[1] - 25) * (b[1] - 25);
|
||
|
|
|
||
|
|
return dist0 - dist1;
|
||
|
|
});
|
||
|
|
|
||
|
|
function renderItem(params, api) {
|
||
|
|
var context = params.context;
|
||
|
|
var lngIndex = api.value(0);
|
||
|
|
var latIndex = api.value(1);
|
||
|
|
var coordLeftTop = [
|
||
|
|
+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
|
||
|
|
+(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
|
||
|
|
];
|
||
|
|
var lngIndex = api.value(0);
|
||
|
|
var latIndex = api.value(1);
|
||
|
|
var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
|
||
|
|
var 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.1)'
|
||
|
|
}),
|
||
|
|
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)
|
||
|
|
]));
|
||
|
|
}
|
||
|
|
|
||
|
|
option = {
|
||
|
|
tooltip: {},
|
||
|
|
visualMap: {
|
||
|
|
type: 'piecewise',
|
||
|
|
inverse: true,
|
||
|
|
top: 10,
|
||
|
|
left: 10,
|
||
|
|
pieces: [{
|
||
|
|
value: 0, color: COLORS[0]
|
||
|
|
}, {
|
||
|
|
value: 1, color: COLORS[1]
|
||
|
|
}, {
|
||
|
|
value: 2, color: COLORS[2]
|
||
|
|
}, {
|
||
|
|
value: 3, color: COLORS[3]
|
||
|
|
}, {
|
||
|
|
value: 4, color: COLORS[4]
|
||
|
|
}, {
|
||
|
|
value: 5, color: COLORS[5]
|
||
|
|
}],
|
||
|
|
borderColor: '#aaa',
|
||
|
|
borderWidth: 2,
|
||
|
|
backgroundColor: '#eee',
|
||
|
|
dimension: 2,
|
||
|
|
inRange: {
|
||
|
|
// color: [
|
||
|
|
// '#00b358', '#5dffa6', '#b8f4f4', '#f6d791',
|
||
|
|
// '#f8d782', '#f8c600', '#f3b387', '#f78b3f'
|
||
|
|
// ],
|
||
|
|
color: COLORS,
|
||
|
|
opacity: 0.7
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'custom',
|
||
|
|
coordinateSystem: 'bmap',
|
||
|
|
renderItem: renderItem,
|
||
|
|
animation: false,
|
||
|
|
itemStyle: {
|
||
|
|
emphasis: {
|
||
|
|
color: 'yellow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
encode: {
|
||
|
|
tooltip: 2
|
||
|
|
},
|
||
|
|
data: data,
|
||
|
|
progressiveThreshold: 1000
|
||
|
|
}
|
||
|
|
],
|
||
|
|
bmap: {
|
||
|
|
center: [116.46, 39.92],
|
||
|
|
zoom: 11.8,
|
||
|
|
roam: true,
|
||
|
|
mapStyle: {
|
||
|
|
styleJson: [{
|
||
|
|
'featureType': 'water',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#d1d1d1'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'land',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#f3f3f3'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'railway',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'highway',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#999999'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'highway',
|
||
|
|
'elementType': 'labels',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'arterial',
|
||
|
|
'elementType': 'geometry',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#fefefe'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'arterial',
|
||
|
|
'elementType': 'geometry.fill',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#fefefe'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'poi',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'green',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'subway',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'manmade',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#d1d1d1'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'local',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#d1d1d1'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'arterial',
|
||
|
|
'elementType': 'labels',
|
||
|
|
'stylers': {
|
||
|
|
'visibility': 'off'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'boundary',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#fefefe'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'building',
|
||
|
|
'elementType': 'all',
|
||
|
|
'stylers': {
|
||
|
|
'color': '#d1d1d1'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
'featureType': 'label',
|
||
|
|
'elementType': 'labels.text.fill',
|
||
|
|
'stylers': {
|
||
|
|
'color': 'rgba(0,0,0,0)'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = testHelper.createChart(echarts, 'grid', option);
|
||
|
|
|
||
|
|
|
||
|
|
function generateData() {
|
||
|
|
var data = [];
|
||
|
|
for (var i = 0; i < cellCount[1]; i++) {
|
||
|
|
for (var j = 0; j < cellCount[0]; j++) {
|
||
|
|
data.push([j, i, COLORS.length - 1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateData3() {
|
||
|
|
var data = [];
|
||
|
|
var min = Infinity;
|
||
|
|
var max = -Infinity;
|
||
|
|
var center = [
|
||
|
|
Math.floor(cellCount[0] * 0.45),
|
||
|
|
Math.floor(cellCount[1] * 0.45)
|
||
|
|
];
|
||
|
|
|
||
|
|
for (var i = 0; i < cellCount[1]; i++) {
|
||
|
|
for (var j = 0; j < cellCount[0]; j++) {
|
||
|
|
var x = (j - center[0]);
|
||
|
|
var y = (i - center[1]);
|
||
|
|
var value = Math.cos(
|
||
|
|
Math.pow(x / center[0] * Math.PI, 2)
|
||
|
|
+ Math.pow(y / center[1] * Math.PI, 2)
|
||
|
|
);
|
||
|
|
|
||
|
|
min = Math.min(min, value);
|
||
|
|
max = Math.max(max, value);
|
||
|
|
data.push([j, i, value]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
data: data,
|
||
|
|
min: min,
|
||
|
|
max: max
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
initPens(echarts, chart, data);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|