- 博客(11)
- 收藏
- 关注
RSS订阅原创 【Cesium】卷帘对比
（2）由于设计中分割线的不同状态是不同的样式，因此仅利用原生鼠标监听事件不足以完成需求，还需要使用Cesium的事件监听。其中：鼠标左键动作：LEFT_UP、LEFT_DOWN；由于本次需求是在目录树中勾选方案一/方案二图层资源，因此需判断是将图层加载到分割线的左侧还是右侧。以上就是基于Cesium卷帘对比的实现， ^-^ 在进行卷帘对比功能的开发时，还需注意一些细节部分，如分割线拖拽到视图边缘时的处理。卷帘对比，是在同一个三维场景里通过拖拽分割线查看左右/上下两边图层的效果。
2023-09-07 18:37:09
897
原创 【微前端】使用无界嵌入子应用
所谓微前端，就是把一个应用当成vue组件嵌入到另一个应用。将一个页面拆分成独立的小型应用，各个应用间相互独立，可以随意组合，更加灵活。原生比较常用的方案是使用iframe，但是这种方案存在一些缺点，如：dom隔离严重、路由无法保活、父子应用通讯困难等。本文将介绍一种基于iframe的全新微前端方案 --【无界】，解决了上述问题外还具有成本低、速度快、原生隔离、功能强等优点。使用iframe作为天然的js沙箱，不会污染主应用环境使用 Web Components 来隔离htmlcss。
2023-06-24 16:10:47
3246
1
原创 【可视化开发】仪表盘的绘制
不同于可视化开发中常见的饼状图、折线图、柱状图，仪表盘所用的例子相对比较少。当我们遇到需要用仪表盘的形式展示数据的需求时，应该怎么配置ECharts的选项数据呢？其实实现思路也是大同小异的，我们可以在series一个个配置所需绘制的图形。
2023-05-20 15:37:59
278
1
原创 【高德地图】自定义覆盖物点的样式
我们可以写一个方法设置点的样式，在初始化渲染点时，调用该设置样式方法。注意 marker.setOffset 设置值的大小，需要跟图片匹配，否则地图在缩放的时候，点会出现飘移的情况。为了跟系统的风格统一，有更丰富美观的呈现效果，有时我们需要自定义高德地图覆盖物点的样式，那么需要如何设置呢？初始化地图，渲染覆盖物点。
2023-05-20 13:16:15
569
原创 【高德地图】点的分组聚合
但是有时我们希望可以看到不同类型点，聚合后分别的统计数据，参考网上的很多方法，基本都是在渲染点的时候监听pointRender方法返回的marker，根据marker的不同类型再做聚合效果，这样就会特别麻烦。其实我们可以先将点分好类，重写点渲染的方法，再创建多个点聚合实例去解决这个问题，方便又高效。有的时候我们需要在地图上渲染大量的点，为了让视觉上的效果更美观，我们需要用到点聚合，也就是地图随着缩放层级的不同，某区域的点聚合到一起，并且显示该区域点的统计数量，如下图。至此便解决点的分组聚合问题^-^
2023-05-20 12:44:40
1324
1
原创 【Cesium】鼠标点击底图拾取坐标、图层
Cesium常用的鼠标事件包括左击、右击，左键双击等，分别对应Cesium.ScreenSpaceEventType.LEFT_CLICK、Cesium.ScreenSpaceEventType.RIGHT_CLICK、Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK。当进入页面，添加鼠标的点击事件监听，以鼠标左击为例。该事件返回鼠标在屏幕点击的位置，再调用 pickPosition 方法即可转为笛卡尔坐标，通过笛卡尔坐标可以转换成经纬度坐标。
2023-05-20 11:56:45
872
原创 【高德地图】地址关键词模糊检索，重写原生效果
首先在template写好输入框，请注意需要给该元素标识唯一id（tipinput），监听回车事件，调用以下api。若需要结合系统的数据，请注意需处理经纬度问题，因为高德是火星坐标系，不一致的话会出现定位不准确的问题。由于地图跟检索结果的渲染不在同一个组件，我使用Pinia更新检索结果数据。如果你不想使用JS API的结果面板，panel可以缺省或者赋值false，然后可以在search()的回调中处理自己的逻辑。目前高德地图地址检索的模式有两种，一种仅显示文字结果，一种返回面板，如下图。
2023-05-20 11:06:37
781
原创 【可视化开发】模拟ECharts图例，但效果更丰富！
想要更丰富效果的ECharts图例但是原生配置项legend不满足需求？使用HTML显示但又不能割舍鼠标在图例上的交互？莫急，我们完全可以像写HTML一样，但是仍然有鼠标移上去后的图表交互。当鼠标进来，关键代码：chart.dispatchAction，注意：seriesIndex是你想要出现交互效果的饼状图，对应series数据。首先我们像平常写HTML一样渲染图例的数据，添加你希望展示的样式效果。然后在元素上监听鼠标的移入移出。至此完成我们的需求^-^
2023-05-19 23:46:57
105
1
原创 【可视化开发】ECharts绘制复杂环形图
当遇到用ECharts绘制复杂环形图的需求时，你的解决方案是什么？直接用图片当背景图？nonono，分辨率不够遇到大屏岂不糊掉？别急，我们可以到相关网站去查找类似的环形图再加以改进，达到UI设计稿的效果。我的思路是将复杂的环形图拆分成一个个饼状图，再一一绘制。
2023-05-19 23:26:57
618
1
原创 【可视化开发】鼠标移到ECharts地图显示酷炫效果
在可视化的开发过程中，有时我们需要利用ECharts绘制地图，当鼠标移上去时显示一些酷炫的效果，如统计结果需要好看的背景图。需要怎么配置ECharts的api呢？鼠标移向地图显示效果对应的是tooltip这个属性，当我们想要自定义显示效果，那么重写tooltip对象的formatter属性即可。引入背景图片，注意返回的HTML模板使用的是原生img标签，需要先引入图片（@xxx方式），这样项目打包部署才能正常显示图片。
2023-05-19 22:52:57
890
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人