【免费】cesium多边形渐变颜色canvas方式+图片方式

共1个文件

html：1个

cesium

需积分: 0 3 浏览量 2024-02-02 11:06:37 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

多边形渐变颜色.zip （1个子文件）

多边形渐变颜色

多边形渐变颜色.html 3KB

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>多边形渐变颜色</title> <link rel="stylesheet" type="text/css" href="Cesium/Widgets/widgets.css" /> <script type="text/javascript" src="Cesium/Cesium.js"></script> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .d { z-index: 9999; position: absolute; top: 20px; left: 20px; } .d2 { left: 220px; } </style> </head> <body onload="onload()"> <div id="cesiumContainer"></div> <script> function onload() { Cesium.Ion.defaultAccessToken = "你的token" viewer = new Cesium.Viewer('cesiumContainer', { }); viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(115.0, 37.0, 280), orientation: { heading: Cesium.Math.toRadians(0), // 正北 } }) viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 115.000454, 37.000292, 114.999768, 37.00046, 114.999322, 37.000266, 114.999351, 36.999761, 115.000598, 36.999793, ]), // canvas方式 // material: new Cesium.ImageMaterialProperty({ // image: drawImage(0) // }), // 具体图片方式 material: new Cesium.ImageMaterialProperty({ image: './image/polygon.png', color: Cesium.Color.fromCssColorString('#f00') }), } }); } function drawImage(rotate) { var canvas = document.createElement("canvas"); canvas.width = 256; canvas.height = 256; let ctx = canvas.getContext("2d"); var grad = ctx.createLinearGradient(0, 0, 0, 256) grad.addColorStop(0, `rgba(255,0,0,0)`); grad.addColorStop(1, `rgba(255,0,0,1)`); ctx.fillStyle = grad; ctx.fillRect(0, 0, 256, 256); return canvas; } </script> </body> </html>

评论收藏

内容反馈