<!--******************************************************************** * 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.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI' 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>