首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript的奇技淫巧

数组去重 一直不明白为什么数组不提供一个内置函数可以让我们方便的取到去重以后的值。扩展运算符帮到了我们,使用扩展运算符配合 Set可以生成一个不重复的数组。...如果你想在某个条件逻辑值为true时,执行某个函数,就像这样: if (condition) { dosomething() } 这时,你可以这样子运用短路: condition && dosomething...在 JS ,如果你想要调用一个函数并指定它的 this 时可以使用 bind 方法。 Bind 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]])...返回返回由指定的this值和初始化参数改造的原函数拷贝 JS 的实例 const myCar = { brand: 'Ford', type: 'Sedan', color: 'Red' }...String.lastIndexOf() 方法返回指定值(本例的'.')在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。

51760
您找到你想要的搜索结果了吗?
是的
没有找到

动态地理信息可视化——leaflet在线地图简介

leaflet是业界比较流行的JS开源交互式地图包,它支持直接调用OpenStreetMap, Mapbox, and CartoDB等主流地图数据作为辅助图层来进行地理信息数据的可视化操作。...leaflet函数支持的点有三类(所知的),默认的是雨滴形状(addMarkers),还有两种分别是addCircle、addCircleMarkers。...在leaflet函数对颜色进行了非常精准和高效的分类。 1、用于连续数值的:colorNumeric,colorBin和colorQuantile; 2、用于分类输入,colorFactor。...(其实相当于对数值型变量进行划组,生成有序的因子组,然后以分段因子变量的形式进行颜色映射,但是这个过程在leaflet函数是自动化完成的,无需我们手工生成新变量,这一点儿是leaflet函数相对于ggplot...图例对象: addLegend:是添加图例的图层对象,相当于ggplot的guilde函数。 接来下给大家大致展现以下leaflet所能呈现的最为常见的几种风格地图样式。

4.1K40

高质量编码-GIS搜索框前端实现

GIS搜索框90%的代码借用GitHub上Leaflet.GeoJSONAutocomplete这个项目。...这个项目是leaflet(一种简洁而强大的WebGIS js库)的一个插件,项目介绍如下: image.png image.png 返回geoJson如下格式: { "type": "FeatureCollection...还好源码层次分明,根据功能分成了不同的函数,我们发现除了结果添加到地图一个是用leaflet API,我们想要使用Arcgis JS API,所以只需改造这部分代码就可以了。...image.png image.png image.png image.png image.png 当我们每次输入内容或者点击分页时,会立即去构造请求,返回结果绑定在下拉列表,同时添加到地图图层...请求参数改变来实现这个功能: image.png image.png 最后注意原来代码为了避免输入事件频繁,使用了自定义的延迟事件。

2.5K20

动态地理信息可视化——leaflet填充地图

js语言中的,我们无法使用R语言直接进行调用,只能作为一个图层素材进行背景修饰,说白了,其实我们想要的仅仅是多级缩放的动态切换效果,这样再结合我们自定义的地图素材,可以呈现出更加完美的效果。...以下是三种格式素材导入并在leaflet制作的地图的基本代码: maps包: mapStates<-map("state",fill=TRUE,plot=FALSE) leaflet(mapStates...前两种素材作图过程大同小异,特别是一些标度的属性声明很类似ggplot函数过程,但是json格式的素材操作起来就不是很友好,他的标度属性是要在数据文件中新建style的list对象进行生命,而且json...格式的list非常多,结构相对复杂,至今也没完全搞明白如果自由操作。...以上地图效果都支持多节自动缩放和弹窗动态信息显示(需设置popup属性及少量html交互代码) leaflet在线地图底层由js源码编写,天然支持html语言,如能结合html搭配使用,可以在动态地图元素

4.8K40

Java函数式编程思想

Lambda表达式和Stream的引入,让Java焕发了新的活力,它允许人们可以用函数式编程思维思考问题。本文主要介绍了函数式编程思想在Java的应用。 指令式还是声明式?...业务逻辑本来是要关注的焦点,但却被淹没在过多的类实现。 我们看看函数式编程怎么实现?...虽然Runnable接口本来是用在多线程处理的,但这里我们取巧的用在函数式编程。...我们知道,Java的&&操作是一个短路操作,也就是说,如果第一个条件结果为false,就不再进行后续条件的判断,直接返回false。 我们是否能用上这个特性呢?...(() -> evaluate(1), () -> evaluate(2)); 这样传入的lambda表达式,只有在调用时才执行,由于第一个条件返回false,就执行了短路操作,直接返回了结果。

46630

用可视化地图讲照片的故事(Python+Leaflet)

展示照片坐标效果图 实现方式是在前端的html页面里引入 leaflet.jsleaflet.markercluster-src.js,对map元素进行配置和设置好坐标数据,把html文件配置好之后...基于1提取的坐标,保存为js文件,然后在浏览器打开html文件,就是上图中的效果了。另外需要说明的是,这些标记点(marker)点击之后都是能看到具体的文本的,展示的文本就是title里的内容。...也需要进行转换。...用到的插件是storymap.js,同样引用js之后,改变其中的坐标数据,因为是讲一个故事,具体内容当然按自己想讲述的写,将 的bodo和js代码...参考资料 ExifRead :便捷读取Exif的Python库 Leaflet:便捷友好的交互地图开源js库 markercluster.js:地图标记点聚类库,Leaflet插件 storymap.js

2.3K30

JavaScript当中的this究竟是个啥?

而且在开发的过程,经常因为对this的不了解出现这样或那样的错误!所以搞定this的指向是非常非常有必要的! 与其它语言当中的this不同的是,我们JS当中的this总是指向一个对象。...所以在调用完该函数进行console.log(window.age)输出的结果为81。 2、函数作为对象的属性来调用: 如果函数作为对象的属性来调用,函数内的this为调用函数的对象。...在JS当中并没有类的概念,但是我们可以通过构造函数来创建对象,而且JS也提供了new操作符,使构造函数看起来更像是一个类!...执行构造函数的语句。 隐式直接返回新对象。...num); } var num=5; var obj={ num:8 } fn.call(this,1,2);//8 fn.call(obj,1,2);//8 //apply 传递的参数需要用括号进行包裹

39420

用可视化地图讲照片的故事(Python+Leaflet)

展示照片坐标效果图 实现方式是在前端的html页面里引入 leaflet.jsleaflet.markercluster-src.js,对map元素进行配置和设置好坐标数据,把html文件配置好之后...基于1提取的坐标,保存为js文件,然后在浏览器打开html文件,就是上图中的效果了。另外需要说明的是,这些标记点(marker)点击之后都是能看到具体的文本的,展示的文本就是title里的内容。...也需要进行转换。...用到的插件是storymap.js,同样引用js之后,改变其中的坐标数据,因为是讲一个故事,具体内容当然按自己想讲述的写,将 的bodo和js代码...参考资料 ExifRead :便捷读取Exif的Python库 Leaflet:便捷友好的交互地图开源js库 markercluster.js:地图标记点聚类库,Leaflet插件 storymap.js

1.9K20

Rxjs 响应式编程-第二章:序列的深入研究

发现该游戏与使用Observable序列有很多相似之处。 Observable只是我们可以转换,组合和查询的事件流。 无论我们是在处理简单的Ajax回调还是在Node.js处理字节数据都没关系。...它接受一个Observable和一个函数,并将该函数应用于源Observable的每个值。 它返回一个带有转换值的新Observable。 ?...Filter filter接受一个Observable和一个函数,并使用该函数检测Observable的每个元素。它返回一个Observable序列,其中包含函数返回true的所有元素。 ?...聚合运算符 聚合运算符处理序列并返回单个值。例如, Rx.Observable.first接受一个Observable和一个可选函数,并返回满足函数条件布尔值的第一个元素。...-0.7.3/leaflet.css" />

4.1K20

Python绘制地图神器folium介绍及安装使用教程

大家好,又见面了,是你们的朋友全栈君。 之前给大家介绍过多种Python可视化模块,但使用他们进行地理可视化都很简陋。 所以想要绘制更精美的可视化地图?想在地图上自由的设置各种参数?...一、folium简介和安装 folium 建立在 Python 生态系统的数据应用能力和 Leaflet.js 库的映射能力之上,在Python操作数据,然后通过 folium 在 Leaflet 地图中可视化...[1] 1. folium的简介 Folium是建立在 Python 生态系统的数据整理 Datawrangling 能力和 Leaflet.js 库的映射能力之上的开源库。...用 Python 处理数据,然后用 Folium 将它在 Leaflet 地图上进行可视化。Folium能够将通过 Python 处理后的数据轻松地在交互式的 Leaflet 地图上进行可视化展示。...Folium可以让你用 Python 强大生态系统来处理数据,然后用 Leaflet 地图来展示。

7.6K40

20个数据可视化工具汇总,终于知道人家为啥那么牛X了

5 Leaflet ?...如果输入公开数据,比如一个函数,可以生成函数曲线(见上图)。另外,Wolfram Alpha 提供一个小挂件(Widget),可嵌入在你的网站上。 9 Visual.ly ?...通过这个社区,用户可以创建可视化作品,上传数据集,对其他用户所创建的可视化进行评论,或者分享,并可以对可视化作品加以评分。...16 D3.js ? D3.js 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document。...JavaScript InfoVis Toolkit 是一个在 Web 上创建可交互式的数据图表 JS 库,同样包括了多种图表类型,并有漂亮的动画效果。虽然是免费工具,但建议有条件的童鞋捐赠作者。

2.3K60

强烈推荐!汇总了几个前端离不开的2D图形库

家好,是「前端实验室」爱分享的了不起~ 在现代前端开发,无论是构建游戏、数据可视化还是动画效果,合适的2D图形库可以增加用户的趣味性,接下来就给大家介绍几个常用的2D图形库 konva.js Konva.js...它提供了一个强大的API,使得开发者可以轻松地在Canvas上添加图形、文本、形状、图像、动画等元素,并且可以与这些元素进行交互 https://github.com/konvajs/konva fabric.js...Fabric.js 是一款强大且流行的开源 HTML5 Canvas 库,用于在网页创建交互式的图形和可视化效果。...https://github.com/pixijs/pixijs leaflet.js Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。...https://github.com/Leaflet/Leaflet SVG.js SVG.js是一个轻量级的JavaScript库,用于在网页上创建和操控SVG图形。

95720
领券