好久没写博文了，今天出来冒个泡。 最近一直在考虑一件事情，那就是openlayers中自定义wms的图层控制。...用过openlayers的人都知道，在openlayers中有自带的图层控制的控件，调用方法也很简单： map.addControl(new OpenLayers.Control.LayerSwitcher...({'ascending':true}));//图层控制 但是，不论是从操作的方便程度还是美观性方面考虑，自带的图层控制是无法满足需求的，考虑了一段时间，今天终于有时间实现了，下面就说说我的实现思路...接着，说说实现的环境。地图服务我用的是geoserver，图层控制用jquery的zTree，下面详细说说我的实现步骤。 1、在geoserver中发布wms图层，发布的图层包括以下。...，如果有子节点被选中，在地图中将wms图层移除，再定义wms的图层为选中的子节点，并设置其可见为true，并将wms添加到地图中，这时选中的涂层就会在地图中显示；如果没有节点被选中，在地图中将wms图层移除
概述 在前文中，有一篇文章讲述了Openlayers2结合Echart实现地图统计图，还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示。...在本文，书接前文，讲述Openlayers如何结合Echart实现热力图。 效果 ? 全图效果 ?...放大效果 实现 1、关键点 echart实现heatmap的关键点在与屏幕坐标，所以，在地图中，应通过地理坐标到屏幕坐标的转换函数，将地理坐标转换为屏幕坐标。...2、实现代码 我将热力图扩展成为了一个openlayers的layer扩展，实现代码如下： OpenLayers.Layer.EchartHeatmap = OpenLayers.Class(OpenLayers.Layer...(this, arguments); }, CLASS_NAME : "OpenLayers.Layer.EchartHeatmap" } ); 前台调用的代码如下
圆环图必须有8个切片，每个切片的颜色必须与工作表中的值对应，如下图1所示。 ? 图1 每个切片的颜色显示在图表左侧的工作表单元格区域内。...然后，插入一个圆环图，如下图3所示。可以看到，“切片”列和“颜色”列用于类别和标签，而“一”列用于圆环切片值。图例中显示了类别标签，圆环切片大小相同，均为圆环周长的1/24。 ?...我们需要另一个公式来让我们只显示可见的切片编号。...此时，无关的标签消失了，我们只能看到切片编号。如下图11所示。 ? 图11 这就是我们创建的条件圆环图。...图12 当在工作表中更改每个切片的颜色时，图表也相应地反映了该变化，如下图13所示。 ? 图13 再次修改工作表中的颜色，图表也相应更新，如下图14、图15所示 ? 图14 ?
我在声明类的时候传了一个 options 参数，通过在定义类的时候设置控件的容器元素并且将控件渲染到 GIS 地图的 viewport 之外： var view = graphView.getView(..._graphView = new ht.graph.GraphView();// 拓扑图组件 我在控件中还给 graphView 拓扑组件添加了一些事件的监听，由于 OpenLayers 和 HT 是两款不同的...这里我在子类 GraphViewControl 中重载了父类 ol.control.Control 的 setMap 方法，在此方法中将 HT 的拓扑组件 graphView 添加到 OpenLayers...OpenLayers 的 Map 部分做好了，接下来就是将它放进场景中了~但是从上面的截图中能看到，除了地图，顶部有工具条（但是我是用 formPane 表单组件做的），左侧有一个可供拖拽的 Palette...为了让我想显示的部分显示在工具栏的正中央，所以我在第一项和最后一项都设置了一个空，占 0.1 的相对宽度，并且比例相同，所以中间的部分才会显示在正中央。
概述： 前面的有篇文章介绍了Openlayers 2.X下加载天地图，本节介绍Openlayers 2.X下加载高德地图。 实现效果： ? 高德地图 ?...高德影像 图中：蓝色的省市边界为我本机发布的，能够与高德地图很好地结合在一起。...实现： 实现很简单的，主要是要获取地图的url，在Arcgis for js加载百度地图一文（http://blog.csdn.net/gisshixisheng/article/details/44853709...-2.12/OpenLayers.js"> var map; function...()); map.addControl(new OpenLayers.Control.MousePosition()); var wms = new OpenLayers.Layer.WMS
本文以一个简单的示例讲解如何绘制如下图1所示的多级圆环图。 图1 上图1中，有两个起始角度，为此，使用了次坐标轴。...图2 选择单元格区域A1:D9，单击功能区“插入”选项卡“图表”中的“圆环图”，得到的图表如下图3所示。 图3 选择圆环系列，单击鼠标右键，选择“更改图表类型”命令。...图5 我们看到，图表中只显示了两个系列，我们需要进行一些设置和调整，使图表的3个系列显示完整。...在《Excel图表技巧11：使用箭头方向键选择图表元素》，我们介绍了一种使用方向箭头选择图表元素的方法，你可以使用此方法来选择系列3。 这里介绍另一种简单的方法。...选择图表后，在“图表工具——格式”选项卡“当前所选内容”组中，单击顶部组合框，从列表中选择“系列3”，如下图6所示。 图6 这样，选中了在图表中暂时的“看不到的”系列3，如下图7所示。
在前面《百度地图、ECharts整合HT for Web网络拓扑图应用》我们有介绍百度地图和 HT for Web 的整合，我们今天来谈谈 OpenLayers 和 HT for Web 的整合。...HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出...以上交互设计似乎很完美了，结果运行时发现了几处折腾了我很久才找到解决方案的坑： 设置map.events.fallThrough = true;否则map不会将事件透传到HT的GraphView组件 graphView.getView...设置ht.Default.baseZIndex: 1000 否则ToolTip会被遮挡 为了让这个例子用户体验更友好，我还用心折腾了些技术点供参考： 采用开源免费的http://llllll.li/randomColor.../随机颜色类库，该类库还有很多非常棒的颜色获取函数，我只是简单的为每个省份显示不一样的颜色 重载了isVisible、isNoteVisible和isLabelVisible仅在缩放达到一定级别才显示更详细的内容
http://www.weatherbug.com/ 技术选择 有许多商业产品能够近乎实时地显示地理空间数据。...性能 一次在地图上显示数十万个点在技术上具有挑战性，并且可能不是很有用。人们发现很难以原始格式解释这些数据。 为了解决这些问题，通常使用热图或点集合来聚合点。...通过一些试验和错误，发现这些层的性能可以根据它们的实现而有很大不同。过滤器也很有用，在信用卡交易的情况下，只显示高风险交易。...使用three.js的2D WebGL热图 Leaflet.heat插件：这可以在不到1秒的时间内下载并渲染超过10K的点数。...虽然Google Maps API与此功能的集成度最高，但可以将其构建到几乎所有基于浏览器的地图中，如此PoC所示。 结论 地理空间可视化数据可以解锁可能会错过的有价值的见解。
就相当于是openlayer和geoserver之间的中介，首先，geowebcache会根据你的配置信息，把相应的地图图层切好图，存放在磁盘中，然后在使用openlayer加载地图服务的时候，把地图服务的地址指向...geowebcache，geowebcache接收到这些请求后，会根据请求的位置和比例尺在切片目录中找到对应的瓦片，然后返回给你，省去了动态生成地图的过程，速度大幅度提高，而且由于请求的图片资源是事先生成好的...如果配置信息没错，你会发现，你所配置的图层信息已经显示在这个页面上了，点击“Seed this layer”，然后你需要输入下面这些信息： ? 设置好，点submit就开始切图了。...配置完成以后，就是如何在地图中显示了，下面是显示的源代码： <html xmlns="http://www.w3.org/1999/xhtml...附件： geowebcache-1.5.3-war.zip 或者<em>我</em><em>的</em>百度网盘，地址：http://pan.baidu.com/s/1kTJt91l
UE4，是因为UE4提供了现成的编辑器，可以方便地编辑预览shader代码。...这里Base Size即方形的边长的一半，要和动画中的世界位置偏移保持一致，这样才能模拟正下方的pivot point。...然后图标的化我们准备一张透明png就可以了，四周trim以下，这张图主要记录了哪些像素是透明的。...可以选择任何应景的图标哦~ 然后在材质中定义一下Opacity Mask为png的alpha值，Emissive Color设置为任意的发光色都可以。...同心圆算法在上一次的雷达图生成算法中也有提及，所以直接贴代码。 注意，Opacity Mask Clip Value决定了圆环的宽度，所以要设定为一个合适的值。
下面我就来简单说一下几个 SDK 的区别，同时也借鉴了一些网上的资源。 先说下很多人不熟悉的 OpenLayers。...更好地了解每个 API 的真实效果。 除了要图文结合学习 SDK，还需要了解一些地图的基本的基础知识，不然你无法将你功能上的点无法映射到地图中的某个对象。...应该还有其他更好的方法，比如使用添加一个图层，将 Marker 的坐标在拖动地图时，相对于浏览器视口位置不动，始终垂直居中。如果有大佬出来指教，我将不耻下问。...lat=34.433988&lng=115.61957 展示省份的图层 有时候我们不需要根据展示地图的河流、街道、地点，只需要显示省份的轮廓，这个时候我们就可以行政区图了，主要用到的是这个类 AMap.DistrictLayer...显示一个城市的地铁线 如果要显示一个城市的地铁图，官方也是提供了不一样的 API，与地图 SDK 是不一样的。
OpenLayers简介 OpenLayers（https://openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求...、TopoJSON、KML、GML和其他格式的矢量数据 支持OGC制定的WMS、WFS等GIS网络服务规范 支持在移动设备上运行 可以通过css来为地图控件设置样式 面向对象开发方式，在OpenLayers...中万物皆对象 和另一个流行的地图库leaflet不同，openLayers完全是用面向对象的方式开发的，且几乎内置了所有地图开发需要的功能，而leaflet核心库只提供基本功能，其他功能都是通过第三方插件进行扩展...就可以了，比如绘制不规则多边形为POLYGON，具体类型可以查看文档：https://openlayers.org/en/latest/apidoc/module-ol_geom_GeometryType.html...获取地图当前区域的范围 为了性能考虑，如果是在地图上显示要素的话最好是只显示当前显示区域内的要素，要显示的数据一般从后端进行请求，那么可以把当前区域的范围发送给后端，后端只返回这个区域内的数据就好了，那么就需要获取当前的范围
其实就是 4 个部分 每个颜色划出来的区域代表一个部分，所以最后是：1/4圆环 + 半圆 + 长条矩形 + 半径略大一些的1/4圆环 制作思路 回到本文标题，有人要说我标题党了，这 logo 都划分成四个部分了...一定是你的方法不对，超详细地讲解了如何解读CSS的语法（带实战的） 什么是渐变函数呢？根据它们的单词名字可以知道，支持了 线性、径向（其实就是圆）、锥形 的颜色渐变。...因此 100px / 0.87 拿到的就是整体的高度，再乘以 0.13 拿到的就是宽高的差值，因为要平均分到两边，所以还要除以 2 现在妥妥是个正方形了，当前的效果： 这里为了让等会的音符只在图中的那块儿区域绘制...这里怕大家看不出来，我把 transparent 改成 blue，放效果图给大家看： red 50% 100% 原理同上一个，从半径为 50% 的位置一直到半径为 100% 的部分，显示红色 效果图为...画半圆 原理都相似，就放一个半圆的生成以及位移过程图吧： 代码如下，也不过多解释各种数值的意义了，因为我全是微调的： .douyin::before, .douyin::after { content
theme: smartblue highlight: a11y-light 一、本文简介 本文案例使用 Vite 搭建项目，在 Vue 3 的基础上使用 OpenLayers 。...OpenLayers简介 OpenLayers 可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。...ol 其实非常使用内网环境，我的工作方向是政务系统开发，开发的很多项目都是在内网运行（无法访问互联网），而 ol 作为一款免费的地图渲染库，很适合我的项目。...Project name: ol-demo 选择要使用的框架，这里选择 vue 即可（我选的是不使用 ts）。...View：是地图视图，控制地图缩放等基础交互，以及地图投影坐标系、地图中心、分辨率、旋转角度等。 Tile： 翻译成中文就是 “瓦片”。这项是必须的。Tile 用来承放所需的底图。
圆形进度条 具体demo效果可见：sheral progress 这里主要分析下圆环的实现，蓝色的进度条圆环由左右两边构成，这里以右半边的为例，html结构为.circle-right > .right-inner...(为了视觉效果，把蓝色放在里面了，而非覆盖在灰色上)，如下图： ?...半圆环由两层结构构成，.cicle-right的大小为50px100px，超过隐藏，而.right-inner的实际大小为100px100px，因为父容器宽度为50px且超过隐藏所以只会显示右边一半，如果只是这样的话我们旋转...所以我们对.right-inner再做个裁剪处理clip: rect(0, 50px, 100px, 0);，这样导致整个.right-inner圆环只有左半边可见，然后加上我们父元素是在右半边且多余隐藏...50%的时候，左边半圆在衔接的时候会有一个卡顿不连贯，所以可以考虑增加再增加一个底部的半圆环，让其在右边半圆环运动到一半的时候开始运动，然后设置一个比较短的完成时间，这样就可以衔接起来。
count变量为什么要这么计算，我也忘了我是怎么鼓捣出来的了。 this.grade是100以内的正整数，表示分值。被定义在data中，默认是0分。 ?...效果就是上图中最长的那张gif动画那样）。 所以我得借助swiper才能实现。在swiper切换的回调函数中，从0开始不停递增grade分数，并重新触发彩色圆环的绘制，进而实现动画效果。...ps：我也不知道这么做是不是很傻的一种做法，当时做到这里时是我遇到的一个难题，不知道怎么在swiper的on回调中获取vue实例。于是就有了这么曲线救国的方法。...否则就走到else里初始化数据页面的状态、清除定时器暂停动画、并把彩色圆环清空 （3）vm.aniShow 在我上篇《纯css绘制柱状图》里边说了，柱状图的动画要跟canvas的动画一起说。...新想法： 这个效果是我很久以前做的，今天在整理制作方法的时候，我想到自己代码的一种优化方案： 其实没必要在定时器里重新调用彩色圆环绘制方法。
HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出...细心的同学会想到转换是双向的，有可能用户需要拖动图元节点改变其经纬度信息，这时候我们就需要另外一个方向函数，即根据屏幕逻辑坐标转换成当前坐标对应的经纬度，在OpenLayers中我们通过map.getLonLatFromPixel...以上交互设计似乎很完美了，结果运行时发现了几处折腾了我很久才找到解决方案的坑： 设置map.events.fallThrough = true;否则map不会将事件透传到HT的GraphView组件 graphView.getView...设置ht.Default.baseZIndex: 1000 否则ToolTip会被遮挡 为了让这个例子用户体验更友好，我还用心折腾了些技术点供参考： 采用开源免费的http://llllll.li/randomColor.../随机颜色类库，该类库还有很多非常棒的颜色获取函数，我只是简单的为每个省份显示不一样的颜色 重载了isVisible、isNoteVisible和isLabelVisible仅在缩放达到一定级别才显示更详细的内容
打开了我的数据展现和分析的思路，一份数据在不同的、合理的图表展示出来，代表和反映了不同的信息。...到此，我们第一部分条形图基本制作完成了，但是比较蛋疼的是下面的小圆圈怎么搞定，难道一个一个的粘贴复制，画出来？当然不是了，这部分是整个图形制作的比较复杂的地方，下面我说说我的办法。...之后我们把这列数据插入到之前的图表中，图形变化为如下的形式： ? 可以看到图中红色的部分为我们后来插入的数据，右键点击红色部分，在弹出来的菜单中选择改变图表类型。 ?...之后我们关心的是怎么来做这个圆圈，这个圆圈是另外一个图做出来的，点击插入，其他图表，选择圆环图，我们同时做一列数据，将一列数据放到圆环图，如下所示。 ? ?...此时将圆环改成橙色，样式和标准图中一样就OK了，之后组合一起就完成了制作。 ?
“ ——imweb 结一 圆形进度条 具体demo效果可见：sheral progress 这里主要分析下圆环的实现，蓝色的进度条圆环由左右两边构成，这里以右半边的为例，html结构为.circle-right...> .right-inner(为了视觉效果，把蓝色放在里面了，而非覆盖在灰色上)，如下图： ?...半圆环由两层结构构成，.cicle-right的大小为50px100px，超过隐藏，而.right-inner的实际大小为100px100px，因为父容器宽度为50px且超过隐藏所以只会显示右边一半，如果只是这样的话我们旋转...所以我们对.right-inner再做个裁剪处理clip: rect(0, 50px, 100px, 0);，这样导致整个.right-inner圆环只有左半边可见，然后加上我们父元素是在右半边且多余隐藏...50%的时候，左边半圆在衔接的时候会有一个卡顿不连贯，所以可以考虑增加再增加一个底部的半圆环，让其在右边半圆环运动到一半的时候开始运动，然后设置一个比较短的完成时间，这样就可以衔接起来。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
