首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

D3.js 力导向图的显示优化(二)- 自定义功能

),我们说过 D3.js 在自定义图形上相较于其他开源可视化库的优势,以及如何对文档对象模型(DOM)进行灵活操作。...找寻、显示同它存在某种关系的点,例如上图点 100 和 点 200 存在单向 follow 关系。...image.png 不想选中的节点是删除了,但其他节点的显示也乱了,节点颜色和属性同当前 DOM 节点对不上,为什么会这样呢?...'transform', `translate(${offsetX} ${offsetY})`, ); 结语 好了,以上便是笔者使用 D3.js 力导向图实现关系网的在自定义功能过程中思路和方法...在这次分享中,笔者分享了图数据库可视化业务中 2 个实用且用户高频使用的功能:任意选中删除节点、自定义缩放并优化视图偏移功能

4.2K50

OpenLayers入门(一)

OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求...中万物皆对象 和另一个流行的地图库leaflet不同,openLayers完全是用面向对象的方式开发的,且几乎内置了所有地图开发需要的功能,而leaflet核心库只提供基本功能,其他功能都是通过第三方插件进行扩展...安装 npm i ol 实例化地图 要显示一个基本的地图首先需要提供一个容器,设置好宽高,然后引入OpenLayers,添加一个地图图层,地图服务可以使用内置的一个开源地图OSM,也可以使用其他的在线瓦片服务...显示要素 在地图上显示一些自定义元素可以说是最基本也是最常见的需求,如果要显示的元素结构或样式比较复杂,可以使用Overlay,它可以将DOM元素在地图上进行显示,并将随地图一起移动。...以上对几何体的操作和显示用的都是自带的默认样式,如果有自定义样式需求的话可以通过style配置进行修改,对要素的基本使用就到这里。

4.7K40

openlayers自定义图层控制的实现

最近一直在考虑一件事情,那就是openlayers自定义wms的图层控制。...用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方法也很简单: map.addControl(new OpenLayers.Control.LayerSwitcher...4、图层控制的实现 主要效果为选中图层控制目录的节点,在图中显示该图层,取消选择,不显示该图层。...思路是:首先获取选中的子节点的图层的名称,如果有子节点被选中,在地图中将wms图层移除,再定义wms的图层为选中的子节点,并设置其可见为true,并将wms添加到地图中,这时选中的涂层就会在地图中显示...;如果没有节点被选中,在地图中将wms图层移除,再定义wms的图层为任一图层,设置其可见为false,将wms添加到地图中,wms就不会在地图中显示

5.2K30

原 HTML5 网络拓扑图整合 OpenL

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers...以上抓图为本文介绍的例子最终运行效果,接下来我们一步步来实现,首选显示地图信息需要有城市经纬度数据,搜索了下感谢此篇博客提供的数据。...显示搞定后剩下就是交互的问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放的交互,两者如何结合呢?...如果能保留住两者的功能那就最好了,答案时肯定的,我们只需要添加mousedown或touchstart事件监听,如果graphView.getDataAt(e)选中了图元我们就通过e.stopPropagation...重载了isVisible、isNoteVisible和isLabelVisible仅在缩放达到一定级别才显示更详细的内容,否则缩小时所有城市信息都显示完全无法查看,多少也能提高显示性能 以下为最终效果的抓图

1.8K60

OpenLayers3基础教程——OL3基本概念

概述: OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。...OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本中加入。 基本概念: ?...var osmSource = new ol.source.OSM(); 4、Layer 一个图层是资源中数据的可视化显示OpenLayers 3包含三种基本图层类型:ol.layer.Tile...ol.layer.Tile 用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图片网格组成。...ol.layer.Image用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。 ol.layer.Vector用于显示在客户端渲染的矢量数据。

1.7K30

HT for Web整合OpenLayers实现GIS地图应用

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers...以上抓图为本文介绍的例子最终运行效果,接下来我们一步步来实现,首选显示地图信息需要有城市经纬度数据,搜索了下感谢此篇博客提供的数据。...显示搞定后剩下就是交互的问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放的交互,两者如何结合呢?...如果能保留住两者的功能那就最好了,答案时肯定的,我们只需要添加mousedown或touchstart事件监听,如果graphView.getDataAt(e)选中了图元我们就通过e.stopPropagation...重载了isVisible、isNoteVisible和isLabelVisible仅在缩放达到一定级别才显示更详细的内容,否则缩小时所有城市信息都显示完全无法查看,多少也能提高显示性能 以下为最终效果的抓图

1.8K80

WordPress给文章添加百度是否已收录查询和显示功能(自定义栏目优化版)

文章页面显示百度是否收录这个功能在张戈博客已经测试有一段时间了。最开始的代码也是从网络上找的,只是自己用,所以也就没想着分享了,毕竟是人家的成果,而且自行百度也是可以找到的!...但昨晚熬夜到三点,除了在新浪 SAE 搭建了一个二维码 API 之外,还将百度收录查询这个功能实现了自定义栏目优化!...功能名称:给 WordPress 添加百度是否收录的查询与显示 原版特性:通过 curl 在百度查询本页 url 并获取结果,如果存在就输出已收录,否则就是未收录,并且可点击提交 url 原版缺点:每次打开页面都需要在百度查询一遍...管理员可以随时在后台文章编辑界面中的自定义栏目来修改是否已收录的结果,自定义名称为 baidu_record,1 为已收录,0 为未收录。...>前新增如下代码并保存: /** * WordPress 显示百度是否收录功能自定义栏目优化版) * http://zhangge.net/4617.html * DIY By 张戈博客 **

1.6K30

HT for Web整合OpenLayers实现GIS地图应用

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers...以上抓图为本文介绍的例子最终运行效果,接下来我们一步步来实现,首选显示地图信息需要有城市经纬度数据,搜索了下感谢此篇博客提供的数据。...显示搞定后剩下就是交互的问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放的交互,两者如何结合呢?...如果能保留住两者的功能那就最好了,答案时肯定的,我们只需要添加mousedown或touchstart事件监听,如果graphView.getDataAt(e)选中了图元我们就通过e.stopPropagation...重载了isVisible、isNoteVisible和isLabelVisible仅在缩放达到一定级别才显示更详细的内容,否则缩小时所有城市信息都显示完全无法查看,多少也能提高显示性能 以下为最终效果的抓图

1.5K11

Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB。由于网站会有文章发布,因此需要有评论功能。...如何在Angular JS中正确使用评论插件? 这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己的评论,评论不能串,或都显示一样。...针对这个功能,其实每种插件都会提供线程Thread的概念,这个功能指针对不同Thread ID的页面加载不同的评论。   以多说为例。   ...但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,在每个页面引用即可。...Angular JS和插件组合使用时可能也有坑。在解决问题过程中,也可以加深对Angular JS的理解。   希望对你有帮助。谢谢。

1.8K80

Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB。由于网站会有文章发布,因此需要有评论功能。...如何在Angular JS中正确使用评论插件? 这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己的评论,评论不能串,或都显示一样。...针对这个功能,其实每种插件都会提供线程Thread的概念,这个功能指针对不同Thread ID的页面加载不同的评论。   以多说为例。   ...但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,在每个页面引用即可。...Angular JS和插件组合使用时可能也有坑。在解决问题过程中,也可以加深对Angular JS的理解。   希望对你有帮助。谢谢。

1.6K00

基于高德地图开发 Web 应用

先说下很多人不熟悉的 OpenLayersOpenLayers 先放个官网:https://openlayers.org/。...OpenLayers 使在任何 Web 页面中放置动态地图变得很容易。它可以显示从任何源加载的地图块、矢量数据和标记。OpenLayers 的开发是为了进一步利用各种地理信息。...首先详解一下滴滴打车的选上车地点的功能: 打开页面后,地图自动定位到当前位置, 地图中心点有一个 Marker 表示,表示上车地点 拖动地图或缩放地图,重新定位上车地点显示出上车地点 功能细分后,我们需要去查询以下...显示一个城市的地铁线 如果要显示一个城市的地铁图,官方也是提供了不一样的 API,与地图 SDK 是不一样的。.../img/marker_checked.png iconPath: '选中 marker 图标的相对路径', //如:..­/..­

4.3K30

一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别

顾名思义, 是一个模板元素,Angular 与结构指令(*ngIf、*ngFor、[ngSwitch] 和自定义指令)一起使用。...上面显示的是 *ngIf 的 Angular 解释,也就是解除语法糖之后的实际代码。 Angular 将应用指令的宿主元素放在 中,并保持宿主原样。...内容将在提供内容投影功能组件内的 内呈现。 这允许 组件的使用者在组件内传递任何自定义页脚并准确控制他们希望如何呈现它。...我们在这里试图实现的是显示从 的父组件接收到的页眉、正文和页脚。 如果提供其中任何一个,我们的组件将在其位置显示默认模板。 因此,创建了一个高度定制的组件。...至少现在我们的武器库中有一个新武器 *ngTemplateOutlet,除了 ng-content 的功能外,它还提供了对内容的更多控制!

5.1K40

百度地图与HT for Web结合的GIS网络拓扑应用

在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地图原理与OpenLayers...一致,但不同GIS引擎客户端结合代码细节还是有不少差异,自定义地图风格更是完全不一样,为此我再开篇介绍下HT与百度地图整合的方案,这次我们将改进以前的例子,除了代表城市的拓扑节点外,再增加连线连接省会和城市...百度地图有多种客户端SDK,我们这里用的自然是JavaScript版的API,百度地图的2.0版增加了不少新功能,例如可以自定义地图样式模板,本例中我们特意设置成style:’midnight’的深色背景风格...插入map的位置与OpenLayers也不一样,通过mapDiv.firstChild.firstChild.appendChild(view);插入,zIndex这些属性都还好不需要设置。...以及监听交互决定GraphView还是Map进行控制等都与以前的文章类似,这里就不再介绍了,以下为操作视频、抓图和源代码供大家参考,这样的结合可完美的将百度地图丰富的地图数据信息,与HT强大的逻辑拓扑功能相结合

1.5K40

IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

-改进了Stream API支持在IntelliJ IDEA 中,我们改进了对Stream API的支持,因此它现在可以检测收集排序集合的已排序流。...您还可以通过使用新意图将React类组件转换为功能组件,反之亦然。- 查找使用的代码您现在可以使用新的代码覆盖功能在客户端找到使用的JavaScript代码(或TypeScript代码)。...- 与Angular CLI的新集成在IntelliJ IDEA 2019中,由于与ng add的集成,您可以为Angular应用程序添加新功能。...要使用Angular原理图***代码,请使用New ... | 角度示意图...行动。...来自IDE的所有查询现在都记录在文本文件中; 您可以通过帮助|打开此文件 显示SQL日志。- 新的SQL格式化程序现在可以专门为每个数据源使用自定义代码样式方案。

4.7K30
领券