自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

LZUGIS

传播GIS知识 | 交流GIS经验 | 分享GIS价值 | 专注GIS发展

原创 结合d3.js实现气象数据的可视化

概述 本文将结合d3.js实现在mapboxGL中格点气象数据的展示。 效果 实现 1.数据格式说明 需要将格点气象数据实现前端的展示,数据传输的方式有三种:1、json;2、二进制;3、灰度图。三种方式各有优劣,这个需要在实际的项目中去酌情选择,本文为方便理解,选用json的格式,数据格式如下...

2020-05-02 09:53:27 433 2

原创 mapboxGL测量实现

概述 讲真,MapboxGL里面虽然有测量的功能,但是不太好用,于是就萌生了自己实现的方法。本文几个turf.js来说说mapboxGL中测量的实现。 效果 实现 1、实现思路 按照绘制的流程,需要涉及到map的三个事件:click,dblclick,mousemove,其中click为绘制...

2020-04-21 22:54:32 229 0

原创 mapboxGL和高德API结合实现路径规划

概述 本文将mapboxGL和高德地图API结合起来,实现路径规划。 效果 实现 高德地图路径规划API说明如上图,有行走、公交、驾车等多种路径,本文以行走为例来说明。 添加点、线图层 map.on('load', function() { var geojson...

2020-04-05 16:31:58 444 0

原创 mapboxGL之风流图

概述 前面的文章说到了Openlayers4中风场的实现,本文将讲述如何在mapbox GL实现类似的效果。 效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkUGd75p-1585748579661)(https://upload-images.jiansh...

2020-04-01 21:44:00 335 0

原创 进阶mapbox GL之paint和filter
原力计划

概述 通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识,本节结合一些示例,重点讲述一下mapbox GL里面的filter和paint的用法。 说明 本文中的示例数据源是北京的区边界数据,格式为geojson,数据字段与详情如下: filter filter...

2020-03-28 10:48:26 318 0

原创 初识mapbox GL
原力计划

一、概述 最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发、有所收获。 二、快速认识 很多人在学习一个新的webis框架的时候,表示狗咬刺猬——无从下口。对于这...

2020-03-24 20:04:04 307 0

原创 mapbox GL台风路径的播放实现
原力计划

概述 前面的文章中写了基于openlayers4的台风路径播放,最近用到mapbox GL,也要实现相似的功能,网上找了好久都没有找到,于是就放弃了“拿来主义”的想法,只能自己动手了。经过一下午的努力,终于有了一个雏形,在此分享出来,希望对你有用! 效果 实现 1、数据获取 测试数据是从温州台风...

2020-03-22 22:46:23 438 0

原创 我为什么跑步

说起这个题目,我会不由得想起村上春树的那本《当我谈跑步时,我谈些什么》,感兴趣的可以去看看,不过本文,说说我与跑步的故事。 说起跑步,得从5年前,15年说起:那一年,是我来北京要饭的第二年,换了新的工作,住的房子也换了。在新换的房子的附近,有一个健身房,有个周末去溜达的时候被健身房的小哥哥给忽悠...

2020-03-10 23:27:07 245 0

原创 monaco-editor做自己的代码测试工具

概述 本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一...

2020-03-10 09:38:48 266 0

原创 openlayers4+中台风路径播放优化

概述 本文在以前风圈生成文章的基础上,将openlayers4+中台风路径的播放展示做了优化,并进行了封装。 说明: 1、本文示例台风数据来自温州台风网; 2、openlayers使用版本为4.6; 效果 实现 封装后的代码为: var Typhoon = function(map) { {...

2020-02-25 21:22:02 1805 0

原创 地图上覆盖物压盖的优化

概述 在做webgis的时候,会经常性的碰到地图覆盖物压盖的情况。本文讲述一种基于聚类思路的解决办法,实现使用的是openlayers4+。 效果 默认展示第一个点(第一个点可根据一些业务逻辑进行处理,文中简单的做了处理,取了第一个点),鼠标经过第一个点的时候再将其他压盖的点展示出来。 实现 1...

2020-02-19 21:49:13 803 0

原创 疫情期间远程办公,我这么计划

受新型冠状病毒疫情的影响,开启了全国远程办公,当然,我也不例外。不论是从朋友圈还是微信的聊天中,大家都表示在家办公的低效。所以,经过两天时间的磨合,形成了一套属于我的远程办公节奏,在此分享下,希望可以帮助到你。 治疗颈椎病专用图 06时~07时 由于疫情期间封锁小区,所以就选择在小区里面完成早...

2020-02-04 21:53:34 5593 12

原创 2019年年终总结

元旦的过去,代表这年终的来临。每逢年终,不论简繁,我都会将这过去的一年做一个总结。总结,不仅是对过去的盘点,也是对现在的分析,更是通过对过去的盘点和现在的分析,对未来做以计划,也有所期许。 今年年中的时候,将朋友圈的签名换成了下面这句话:既往不恋,当下不杂,未来不迎。这句话出自曾国藩,教给我们...

2020-01-08 22:20:49 703 1

原创 mui实现上下滑动控制显隐效果

概述 本文讲述在mui框架下实现上下滑动控制显隐的效果。 效果 实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name=...

2019-12-30 17:43:46 709 1

原创 aceEditor实现类似于codepen的效果

概述 本文讲述如何应用aceEditor实现类似于codepen的在线编辑预览效果。 实现效果 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...

2019-11-19 21:58:43 734 0

原创 Ol4网格生成以及优化

概述 先描述一下大致场景:以0.05为单元格大小生成网格,并在地图上绘制,绘制的时候需要区分海陆。本文以此需求为契机,简单描述一下该需求的实现以及如何来优化。 效果 实现 优化前 var source = new ol.source.Vector({ features: [] ...

2019-11-13 15:43:49 4766 0

原创 canvas绘制切片并导出图片

概述 本文讲述在canvas中绘制地图切片,并将切片拼接成一个完整图片的实现。 效果 实现 <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8...

2019-10-23 22:25:17 791 0

原创 ol中闪烁点动画的实现

概述 本文讲述如何在ol中实现闪烁点动画。 实现效果 实现思路 实现如图的动画,可以用两种思路: 1.overlay+css3动画实现; 2.canvas动画实现。 实现 1、overlay+css3实现 css的实现如下: @keyframes animate { 0% { transfo...

2019-08-23 20:37:42 763 0

原创 ol4通过ImageCanvas实现大量点的展示以及交互的实现

概述 在ol4里面可以通过Vector Layer的方式进行点的渲染,但是当点的个数比较多的时候,会存在明显的操作不流畅。本文讲述如何利用ImageCanvas接口,对大量的点进行展示,并添加相应的交互。 实现效果 实现分析 1.效率差异如何得来? ol的最终渲染也是通过canvas的方式来渲染...

2019-08-14 13:58:15 747 2

原创 ol仿百度拖拽调整圆的大小的实现

概述 用过的百度地图的人都非常喜欢百度地图里面的周边搜索功能,它能够通过拖拽查询范围的大小,甚是好用。在本文,仿百度实现类似的效果。 效果 实现思路 在实现的时候,有几个点: 1.通过overlay实现拖动工具; 2.添加div的ondrag事件添加拖动; 3.保持y不变,控制只能在横向拖动;...

2019-08-09 20:55:19 673 0

原创 将数据压缩到图片并在前端做解析渲染

概述 在做前后端数据交互的时候,你一定遇到过这样的问题:数据量大,尤其是在气象行业!在本文,讲解一种将数据压缩到图片并在前端实现数据的解析与展示的功能。 流程 整体操作流程图如下图: 实现的效果 1.前端绘制数据图; 2.移动鼠标展示鼠标所在位置的值; 3.间隔展示数据值; 关键实现 1、获取...

2019-08-05 18:34:58 490 0

原创 固定表头和第一列表格的实现

概述 在开发的时候,我们有时候会有这样的需求:由于表格的内容比较多,如果横竖都出现滚动条就看不到表头了,这就要求表格的表头和第一列固定,并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。 效果 实现思路 1.区域划分 如下图,将整个表格分为四个区域:1、左上区域需要单独出来...

2019-06-01 10:11:56 884 0

原创 ol5里面实现相册地图

概述 如下图,在手机里面有一个这样的功能,我称之为“相册地图”,本文讲述的是通过扩展ol.style的类,来实现“相册地图”这个功能。 关键点 要实现这个功能有两个关键点:1、地图聚合;2、图片样式。有关地图聚类的在很早之前的文章里面已经涉及到过,所以本文重点讲述图片样式。 实现效果 实现 ...

2019-03-23 10:57:00 847 0

原创 openlayers5中用iconfont作为图标

概述 前面有文章 openlayers4中用font设置图标样式 就iconfont在ol5中的使用做了一个尝试,后面有很多童鞋问我说实现不了,一直没有时间去做一个详细的测试,最近在做了诸多测试后,觉得这种方式比较靠谱,在此分享出来,希望对用到的童鞋有所帮助和启示。 实现思路 实现的思路流程图如...

2019-03-20 16:38:08 1198 1

原创 8012年终总结

本想乘着昨天8012的小尾巴完成此总结的,可惜的是没有完成,不过没有关系,9012的第一天,首先恭祝大家元旦快乐,新年发大财。下面如数家珍般的就过去的这一年做一个总结,这样类似的总结从来都不是给别人炫耀的,而是对自己的一个盘点,好做到知己而已。 8012年对我来说应该是一个转折点:1、年龄上,...

2019-01-01 07:59:51 758 1

原创 ol3中妙用Arcgis Server Rest Export接口模拟WMS,并实现属性过滤

概述 在本文,讲述如何妙用Arcgis Server的REST Export接口实现WMS服务的调用和图层的属性过滤。 参考 1、巧用Arcgis Server的REST接口实现OL2中WMS添加过滤 2、OGC——WMS详细介绍(arcgis server举例) 参考文章2中,提到了Arcgis...

2018-11-10 16:53:37 684 0

原创 写给在校的GISER

此文,写给在校的学生。 我想,看到此文的人应该是幸运的,因为下面我说的东西对于你们专业的认识和以后的职业生涯发展有一定的指导意义和参考价值,这也是我写此文章的目的所在。 和很多gis专业的童鞋聊:关于为什么会选择这个专业?很多童鞋的回答都是调剂过来的,并且表示没听说都没有过这个专业,只有少数的...

2018-11-07 00:08:57 1921 5

原创 从我的历程谈谈该如何学习

作为一个师者,其职责是“传道、受业、解惑”。可是,我做的不够好。 很多时候,会有一些刚毕业或刚入行的童鞋问我:老师,怎么学习webgis开发?我也一直在思考这个问题,作为一个新人,应该如何学习webgis,降低webgis的学习成本。对于如何学习,是一个很模糊也很难有标准答案的问题,因人而异,仁者...

2018-10-16 11:22:06 11399 32

原创 Openlayers4中图片填充的实现

概述 本文讲述如何在Openlayers实现面状要素的图片填充。 实现后 实现代码 var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var projection ...

2018-10-11 20:51:10 1350 0

原创 geotools实现两个shp的相交计算

概述 在Armap工具箱‘分析工具-&gt;叠加分析’,不得不说,非常好用,本文给你讲讲如何在geotools中实现。 关键点 要实现类似的功能有两个关键点: 1、已经计算过的两个数据不能重复计算; 2、需要保留两个shp图形的属性。 这两点在后面的代码里面会有相对比较详细...

2018-08-29 07:13:52 2576 0

原创 ol4加载pbf矢量切片与样式定义

概述 看了一下mapbox的矢量切片的展示方式,其核心是定义的一个样式配置文件,我就在想:Ol4里面我是否通过styleFunction的方式实现同样的效果呢,折腾了一上午,别说,styleFunction真好用,在此分享出来,供大家参看。 mapbox的样式配置 如上图所示,map...

2018-08-10 17:25:51 1827 3

原创 OL4中styleFunction的妙用

概述 越用越觉得styleFunction是一个好东西,爱不释手啊,今天分享一个简单的memo。 效果 说明: 1、就一个点,实现上述的效果; 实现 function styleFunction(feature){ var cou...

2018-08-03 15:41:34 919 0

原创 OL3+中链家地图找房功能实现

概述 今天呢,我们说说如何在OL3+的版本中实现链家的地图找房功能。 准备工作 1.功能分析 看看链家的地图找房功能,其实比较简单,主要包涵: 1)基于行政区划的统计展示; 2)分级别展示,逐级钻取。 2.数据获取 首先,打开链家地图找房连接,按下F12进入调试,切换到...

2018-07-24 06:38:58 3357 1

原创 地图模态层的实现

概述 咱们书接上上文,在上上文里面给大家分享了”ol4中实现只能查看用户权限所在区的地图“,在本文给大家分享一个结合turf.js实现区域裁剪实现地图模态层的效果。 效果 实现 一、生成模态数据 1、输入 1)最大的四至(-180,-90,180,90) 2)裁剪...

2018-07-21 17:29:27 1070 0

原创 echart实现地图的逐级钻取

概述 本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现: 1、点击地图展示下一级地图; 2、通过区域导航可返回上一级地图; 效果 实现代码 &lt;!DOCTYPE html&gt; &lt;html lang=&qu...

2018-07-19 15:09:09 2544 1

原创 ol4中实现只能查看用户权限所在区的地图

概述 我们经常会碰到这样的需求:北京的用户只能查看北京的地图,天津的只能看天津的地图……这里面涉及到了一个地图的访问权限问题,要实现这样的功能如果用服务+过滤的方式比较繁琐,所以本文讲述一种比较简单的实现方式。 输入与输出 输入:地区边界+地图 输出:按照地区边界裁剪的地图,...

2018-07-16 15:30:23 819 0

原创 geotools编写shp转sql,实现shp数据入Oracle Spatial库

概述 用到Oracle Spatial就很难避免shp文件的入库问题,虽然有shp2sdo工具,但是用起来不是很习惯,所以,本文讲述如何结合geotools实现shp2sql的转换。 效果 实现代码 package com.lzugis.geotools; import ...

2018-06-27 19:38:27 1464 1

原创 Geotools中蜂巢的实现

概述 本文讲述如何在geotools中实现蜂巢效果。 效果 实现 1.扩展类IntersectionBuilder import com.vividsolutions.jts.geom.Coordinate; import com.vividsolutions.jts...

2018-06-23 08:13:35 1449 0

原创 说说地图中的聚类

概述 虽然Openlayers4会有自带的聚类效果,但是有些时候是不能满足我们的业务场景的,本文结合一些业务场景,讲讲地图中的聚类展示。 需求 在级别比较小的时候聚类展示数据,当级别大于一定的级别的时候讲地图可视域内的所有点不做聚类全部展示出来。 效果 实现 在...

2018-06-20 19:21:08 2179 1

原创 全国航班数据与可视化分析

概述 本文通过爬取全国航班的数据,并对行数据进行可视化展示与分析。 数据来源 数据是从哪儿也不想去的去哪网抓过来。为了能够获取到数据,抓取了下请求的地址,抓取的地址如下: https://flight.qunar.com/touch/api/domestic/wbdflightli...

2018-06-10 11:15:41 11947 6

提示
确定要删除当前文章?
取消 删除