arcgis js 4 使用d3.js 添加滤镜光

JavaScript022

arcgis js 4 使用d3.js 添加滤镜光,第1张

我们利用d3滤镜为d3元素增加光的效果

我们存一些全局变量

this.animateOption = null

this.defs = null

this.animateId = ""

this.feDropShadow = null

滤镜初始化

function create(option){

this.animateOption = option

this.defs = this.svg.append("defs")

let linearGradient = this.defs.append("filter")

.attr("id",this.animateOption.id)

.attr("x","-50%")

.attr("y","-50%")

.attr("width","200%")

.attr("height","200%")

this.feDropShadow = linearGradient.append("feDropShadow")

.attr("dx", "0")

.attr("dy","0")

.attr("stdDeviation","0")

.attr("flood-color",this.animateOption.floodColor)

}

启动滤镜

```javascript

function start(){

let multiplier = this.animateOption.speed

let xDiff= 0.01

let yDiff= 0.01

let that = this

function setBlur(x,y){

that.feDropShadow.attr("stdDeviation",x)

}

let flag = true

(function updateMotionBlur(){

 更多参考 https://xiaozhuanlan.com/topic/8193652740

d3.js 这个是可视化框架库，它和 leaflet, openlayers等应当是互补的关系。

互补的例子：Map using leaflet.js and d3,js overlaid，javascript - Using d3 in Leaflet， d3 Integration。

至于leaflet和openlayers3选哪一个，如果不想看代码，那么目前leaflet更热门一些，没什么包袱的话就选leaflet吧。

如果想看看代码呢，那么：OpenLayers 3，http://leafletjs.com/examples/quick-start.html，看自己平时的编程习惯，哪个顺眼就选哪一个就是，两个在成熟度、社区、用户群体、插件、扩展性等方面都差不多。

OpenLayers作为业内使用最为广泛的地图引擎之一，已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能，可以实现与各个不同的WebGIS平台产品相结合，开发出各具特色的WebGIS应用系统。 本书主要内容涵盖：WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能，最后给出了OpenLayers之项目实战——水利信息在线分析服务系统[1] 。

《WebGIS之OpenLayers全面解析》是第一本全面介绍Openlayers3的中文专业书籍，于2016年7月由电子工业出版社出版，并已登录淘宝、京东、当当等网络商城。

书籍内容简介：

OpenLayers作为业内使用最为广泛的地图引擎之一，已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能，可以实现与各个不同的WebGIS平台产品相结合，开发出各具特色的WebGIS应用系统。 本书主要内容涵盖：WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能，最后给出了OpenLayers之项目实战――水利信息在线分析服务系统。Openlayers功能全且具有强大的可扩展性，使用Javascript语言，支持HTML5新特性，不依赖任何浏览器插件，是目前GIS领域使用最为广泛的开源WebGIS开发库。本书一共由9个章节内容组成，提供近百个程序实例，基本涵盖了WebGIS开发中的全部功能，可使读者迅速入门并掌握WebGIS和Openlayers开发，提高基础知识学习效率和系统开发效率。读者只需要将书中的示例稍加改动，便可快速的将其移植到具体的WebGIS应用中。本书具体内容安排如下：

第一章 概述：介绍了什么是WebGIS，并对目前常见的开源WebGIS软件进行了介绍。

第二章 WebGIS开发基础：对WebGIS开发涉及到的各种基础开发知识进行了讲解，指导读者快速入门WebGIS。

第三章 Openlayers开发基础：对Openlayers Javascript开发库的框架设计、API组成和开发调试方式进行了讲解，指导读者快速了解Openlayers。

第四章 Openlayers快速入门：对Openlayers中提供的常用的10个控件的二次开发进行了讲解，指导读者快速开发出一个简单的网络地图应用。

第五章 Openlayers之多源数据展示篇：通过丰富的示例讲解了Openlayers中如何显示来自各种网络地图服务商提供的地图数据，指导读者实现各种网络地图、KML、GPX、GeoJSON等开放数据源的叠加显示。

第六章 Openlayers之图形绘制篇：本章重点讲解了WebGIS应用中常用的点、线、矩形、多边形、圆等浏览器客户端的图形绘制功能，指导读者开发出各种鼠标交互图形绘制功能。

第七章 Openlayers之OGC篇：对Openlayers中如何加载WMS、WMTS、WFS、WCS图层进行了示例讲解，指导读者快速掌握OGC服务数据的对接。

第八章 Openlayers之高级功能篇：对Openlayers中投影、热区、聚合标注、热点图、统计图、标绘等高级功能进行了示例讲解，指导读者快速高效地开发高级WebGIS功能。

第九章 Openlayers之项目实战：结合一个具体的项目需求进行开发实战，配以详细的程序示例，讲解如何将Openlayers中的常用功能应用到项目实践中，指导读者基于前面章节中的Openlayers开发知识进行WebGIS系统开发。

本书可用于开设GIS专业的各大院校作为网络GIS课程的教材和教辅参考书，本书迎合WebGIS客户端开发技术的趋势和读者需求，适时推出本书，可作为学习WebGIS和Openlayers的入门及高级应用教材，也可供GIS领域科研工作者、高校师生及IT技术人员作为技术参考书。