webgis开发12138-优快云博客

原创 cesium自定义材质-发光线

本文介绍了在Cesium中创建和使用自定义发光线条材质的方法。首先定义了一个GlowLineMaterial类，通过fabric材质系统实现了发光特效，支持设置线条颜色(color)、发光颜色(glowColor)和发光强度(power)参数。使用时只需实例化该材质并应用到polyline实体上即可。代码包含完整的材质定义和使用示例，可将经纬度坐标转换为Cartesian3坐标，并展示了如何将发光线条添加到Cesium场景中。该发光材质具有半透明效果，可根据需求调整发光强度

2025-05-26 10:13:39 214

原创 cesium自定义材质-渐变面（从中间往外渐变）

本文介绍了在Cesium中创建自定义渐变面材质的方法。通过定义GradientPolygonMaterial类，实现了从中心向外渐变的彩色多边形效果。关键点包括：创建自定义材质类，设置默认参数和材质定义使用GLSL着色器代码计算颜色插值，基于点与中心的距离确定渐变比例提供使用方法，包括参数说明(color/toColor)和坐标转换函数

2025-05-26 09:23:30 194

原创 cesium自定义材质-渐变墙

本文介绍了如何在Cesium中创建和使用自定义渐变墙材质。首先，通过gradientWall.js文件定义了一个GradientWallMaterial类，该类继承自Cesium的材质系统，允许用户设置颜色等参数，并实现了材质的渐变效果。接着，文章详细说明了如何在Cesium Viewer中使用该自定义材质，包括如何设置墙体的位置、高度以及应用渐变材质。通过这种方式，开发者可以轻松地在Cesium中创建具有渐变效果的墙体，增强三维场景的视觉效果。

2025-05-23 17:10:55 191

原创 cesium自定义材质-动态墙

本文介绍了如何在Cesium中创建和使用自定义动态墙材质。首先，通过dynamicWall.js文件定义了一个DynamicWallMaterial类，该类继承自Cesium的材质系统，允许用户自定义墙体的颜色、动画持续时间等属性。材质通过GLSL着色器实现动态效果，支持多种动画模式（如上下、顺时针、逆时针等）。接着，文章详细说明了如何在Cesium场景中使用该自定义材质，包括如何设置墙体的位置、高度以及如何将地理坐标转换为Cesium的Cartesian3坐标。

2025-05-23 17:04:32 195

原创 cesium自定义材质-扩散圆

本文介绍了如何在Cesium中创建和使用自定义的扩散圆材质（DiffusionEllipseMaterial）。首先，通过编写diffusionEllipse.js文件，定义了一个名为DiffusionEllipseMaterial的类，该类继承自Cesium的材质系统，允许用户自定义扩散圆的颜色、扩散速度以及是否显示中心点。材质通过GLSL着色器实现，利用帧号和距离计算来实现动态扩散效果。接着，文章展示了如何在Cesium的Viewer中使用这个自定义材质，通过创建一个实体并应用该材质，实现在地图上显示动

2025-05-23 10:50:57 286

原创 cesium实现自定义div图层（实现复杂标注效果、地图弹出框）

customDiv.js 文件定义了一个 CustomDiv 类，用于在 Cesium 地图上创建并管理自定义的 div 元素。该类通过构造函数接收地图视图、ID、名称、位置和样式等参数，并初始化 div 元素。init 方法负责创建 div 并将其绑定到地图容器中，同时监听地图渲染事件，使 div 能够随地图移动。createDivDom 方法用于创建并配置 div 元素，而 setPosition 方法允许动态更新 div 的位置。使用该类时，只需导入 CustomDiv 并传入包含必要参数的对象即可在

2025-05-23 09:53:23 309

原创 Cesium加载各种来源的wms和wmts服务

使用WebMapTileServiceImageryProvider加载，加载方法如下，除了实现方法，针对不同平台发布的wmts服务的配置地址也很重要。使用WebMapServiceImageryProvider加载，加载方法如下，除了实现方法，针对不同平台发布的wms服务的配置地址也很重要。选中所需图层，点击进入下面页面。基础地址 + 各个参数。

2024-05-10 17:11:17 5756

原创 ArcGIS API for Javascript解决html2canvas、domtoimage截图地图出现空白问题

是因为map元素本身就是canvas，canvas无法被截图的原因是其上的WebGL context的preserveDrawingBuffer为false，所以我们应该想办法把这个值设置为true就可以了。

2024-03-01 11:10:22 1456 3

原创 ArcGIS API for Javascript自定义BaseTileLayer加载wmts服务

各gis平台的wmts服务url配置地址，参考该文章。

2024-03-01 10:40:39 913

原创 vue3+js+vite学习之使用svg图标，并且支持svg图标渐变色

使用vite-plugin-svg-icons。

2024-01-18 09:40:39 1289

原创 ArcGIS API for Javascript GraphicsLayer实现带背景色的标注

TextSymbol的backgroundColor属性：标签边界框的背景颜色，仅支持。本文章使用SimpleMarkerSymbol的path属性实现文字的背景色。给path赋值一个长方形的svg路径，根据文字内容设置宽度和高度。

2023-12-29 17:09:29 884

原创 vue3+js+vite学习之页面动态缓存

2、使用router-view时，如果遇到多层嵌套的问题，只需要在最里层的router-view中加上keep-alive缓存即可。在需要进行缓存的页面中，meta参数中增加keepAlive配置项，需要缓存的配置成true，不需要缓存的配置成false或者不设置都行。3、在router-view中使用keep-alive，include是缓存的页面name数组，读取pinia中的值。2、将缓存的页面name数组存储在pinia中，根据打开的标签页列表动态变化。1、首选在路由列表中进行是否需要缓存配置。

2023-11-13 10:29:57 1163