mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 01:04:17 +00:00
102 lines
3.7 KiB
HTML
102 lines
3.7 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
|
<script src="./turf.min.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
<script type="text/javascript">
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'
|
|
const viewer = new Cesium.Viewer('map', {});
|
|
const colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
|
|
const breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 99] // 等值面的级数
|
|
|
|
axios.get('./windpoint.json')
|
|
.then((response) => {
|
|
showWindLine(response.data.data)
|
|
})
|
|
|
|
function showWindLine(arr) {
|
|
const pointGrid = []
|
|
for (let i = 0, len = arr.length; i < len; i++) {
|
|
const item = arr[i]
|
|
|
|
pointGrid.push({
|
|
type: "Feature",
|
|
properties: item,
|
|
geometry: {
|
|
type: "Point",
|
|
coordinates: [item.x, item.y]
|
|
}
|
|
})
|
|
}
|
|
|
|
const points = {
|
|
type: "FeatureCollection",
|
|
features: pointGrid
|
|
}
|
|
|
|
// 等值面
|
|
const geojsonPoly = turf.isobands(points, breaks, {
|
|
zProperty: "speed"
|
|
})
|
|
var promise = Cesium.GeoJsonDataSource.load(geojsonPoly, {
|
|
clampToGround: true,
|
|
});
|
|
promise.then(function (dataSource) {
|
|
viewer.dataSources.add(dataSource);
|
|
var entities = dataSource.entities.values;
|
|
for (var o = 0; o < entities.length; o++) {
|
|
var r = entities[o];
|
|
const val = Number(r._properties.speed._value.split("-")[0] || 0)
|
|
const color = getColor(val)
|
|
r.polygon.material = Cesium.Color.fromCssColorString(color)
|
|
}
|
|
});
|
|
|
|
// 等值线
|
|
const geojsonLine = turf.isolines(points, breaks, {
|
|
zProperty: "speed"
|
|
})
|
|
|
|
var promise1 = Cesium.GeoJsonDataSource.load(geojsonLine, {
|
|
clampToGround: true,
|
|
});
|
|
promise1.then(function (dataSource) {
|
|
viewer.dataSources.add(dataSource);
|
|
var entities = dataSource.entities.values;
|
|
for (var o = 0; o < entities.length; o++) {
|
|
var r = entities[o];
|
|
r.polyline.material = Cesium.Color.fromCssColorString("#000000")
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function getColor(value) {
|
|
for (let i = 0; i < breaks.length; i++) {
|
|
if (breaks[i] === value) {
|
|
return colors[i]
|
|
}
|
|
}
|
|
return colors[0]
|
|
}
|
|
|
|
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(100, 30, 4025692.0)
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |