- 博客(444)
- 资源 (63)
- 收藏
- 关注
RSS订阅原创 2020年年终总结
概述俗话常说：老鼠过街，人人喊打。鼠年，好像一直都是不太平的：今年，新冠病毒；08年，汶川大地震……大家都在说今年日子不好过，可不管好不好过时间不会因为日子是否好过而停止，这不转眼间“不太好过”的今年已经快结束了。趁着年底这个尾巴，盘点一下今年的...
2020-12-26 11:37:34
1049
1
原创 买房，GIS能做点什么（一）
概述作为当代年轻人，“买房”是压在我们头上的几座大山之一，但是大部分人还是没有经验的，再加上鱼龙混杂的房产中介，买房的时候很容易被割韭菜。本文讲讲如何结合GIS找到一个离地铁近、价格又比较美丽的二手房。需求在一线城市要饭，开车是不可能的：一方面贫穷限制了开车，另一方面有车也堵的跑不动，所以近地铁是最基本的需求；第二，由于贫穷，离地铁近除外，在价格低势必也是我们选择房子的时候一个考量；第三，周边环境与配套。例如：广州-增城-新塘站附近数据高德地图，矢量和影响图作为底图数据用来分析；贝壳找房中地
2020-12-20 23:17:45
741
1
原创 跟牛老师一起学WEBGIS——WEBGIS实现（点聚类）
概述在地图上展示的点比较多的时候，我们通常会用聚类的方式来展示。本文讲述点聚类的展示方式。点聚类的实现与绘制方式代码如下：/** * 在地图上聚类 * @private */ClusterLayer.prototype._showCluster2Map = function () { const that = this; const features = that._data.features; that._clusterData = []; for (let i
2020-12-08 09:16:39
1103
1
原创 跟牛老师一起学WEBGIS——WEBGIS实现（绘制切片）
概述前面已经有三篇文章分别讲述了点、线和面、图片的绘制，在本文讲讲如何实现切片的绘制。5. 绘制切片前面的文章地图切片提到了切片的几个重要参数：切片范围、切片原点、分辨率，这些概念在实现切片的调用的时候都会用到，下面为实现代码：/** * 在地图上展示切片 * @private */TileLayer.prototype._showTile2Map = function () { const that = this; let extent = that._map.getBou
2020-12-06 09:20:07
819
1
原创 跟牛老师一起学WEBGIS——WEBGIS实现（绘制图片）
概述前面有两篇文章分别介绍了矢量数据点和线、面的实现，本文讲讲静态图片的绘制和WMS服务的展示。4.绘制图片图片的绘制我们分两种：静态图片和WMS服务。4.1 静态图片绘制静态图片我们只需要两个参数：图片地址和图片四至。实现代码如下：/** * 绘制静态图片 * @private */ImageLayer.prototype._drawStaticImage = function () { const that = this; const extent = that._p
2020-12-05 09:31:00
1139
原创 跟牛老师一起学WEBGIS——WEBGIS实现（绘制线和面）
概述前面的文章绘制点中实现了点的绘制，本文说说线和面的绘制实现。2、线数据绘制在canvas中可以通过ctx.lineTo(x, y)和ctx.stroke()实现线的绘制。绘制线的代码如下：/** * 在地图上展示线 * @private */VectorLayer.prototype._showLine2Map = function () { const that = this; const features = that._data.features; for
2020-12-04 08:27:37
953
1
原创 跟牛老师一起学WEBGIS——WEBGIS实现（绘制点）
三、WEBGIS实现后面的课程会以mapboxGL的canvas-source为入口开展，通过一个canvas画布，实现webgis的基础功能，包括：1、展示矢量数据（点、线、面，格式为geojson）；2、展示x-y-z切片；3、展示wms服务。webgis基础功能部分，有一个比较核心的是前面的文章里面提到的屏幕坐标和地图坐标的相互转换，在mapboxGL中，可以通过map.project()实现地图坐标转换为屏幕坐标，通过map.unproject()实现屏幕坐标转换为地图坐标。为方便后面使用，
2020-12-02 20:39:29
1547
5
原创 通过view实现实时监测数据的实时更新展示
概述在做项目的时候，经常会有实时监测数据的地图展示，本文通过view实现实时监测数据的实时更新展示。分析对于实时监测数据，有以下两个特点：1、监测设备的空间信息不发生变化；2、监测数据会实时发生变化。基于以上两特点，在实际的服务发布中我们可以：1、将监测设备存储为一张表；2、实时监测数据存储为另外一张表；3、创建view，将设备和实时监测数据关联起来；4、通过geoserver将view以图层的方式发布出来。实现china_province（监测设备）province_people（监测值）
2020-11-26 17:15:44
1480
1
原创 项目管理中如何合理分配资源
概述大多数项目在实际实行的时候的资源是有限的，这就会涉及到一个项目管理中的常见问题——资源分配。本文结合一个简单的案例来讨论一下这个问题。问题有这样的三件事情：拖地，擦玻璃和切菜，每件事情都需要三十分钟完成，但问题是每件事情的器具只有一件，问：两个人完成这三件事情需要多长时间。答案1.目标与资源分析一下上面的问题。1） 目标完成拖地，擦玻璃和切菜。2）资源资源可以分为两类：人力资源（2人）和物力资源（墩布一把、抹布一个、菜刀一把）。回到上面的问题，这个问题就是在项目管理中的资源分配问
2020-11-14 07:59:37
2365
1
原创 产品设计中的地图学思维
概述我不是一个产品经理，我是是一个GISer。虽然不是产品经理，但是有时候也不免会做点产品经理的活。在干这为数不多的活的时候，觉得产品的设计和地图学中“地图概括”的思维如出一辙。作为外行，本文纯属个人扯淡想法，不做为专业。概念1.产品能够供给市场 ,被人们使用和消费,并能满足人们某种需求的任何东西,包括有形的物品、无形的服务、组织、观念或它们的组合[1]。2. 地图概括经过分类、简化、夸张、符号化、模型化和概括方法[2]。正文结合产品和地图概括两者的概念，我们可以称经“地图概括”后的地图为“
2020-11-01 21:56:43
903
原创 技术博客应该怎么写？
概述首先，恭祝各位程序员（媛）们节日快乐！所以，今天咱不讲技术，我们说点别的。作为一个程序员（媛），很多人都有写博客的习惯，我也不例外，而且已经有些年头了，所以在本文，结合我的一些经验来谈谈“技术博客应该怎么写？”这个话题。目的做一件事情总是有目的的，写博客也不例外，先来说说为什么写博客。1. 记录问题“只有再一再二没有再三再四”，这件事情在在程序员身上是不可能的，有些问题就像批了隐身衣一样，一而再再而三的，让我们在同一个问题上摔过很多次跤。怎么办呢，用博客记录下解决问题的思路、步骤、方法、出处
2020-10-24 08:20:06
1022
原创 跟牛老师一起学WEBGIS——WEBGIS基础（WMS服务）
2.2 WMS服务WMS是Web Map Service（网络地图服务）的缩写，是开放地理空间联盟 (OGC) 定义提供和使用动态地图时需遵守的国际规范。到目前为止，已发布了四个版本的 WMS 规范：1.0.0、1.1.0、1.1.1 和1.3.0（最新）。它是利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据的可视化表现，能够根据用户的请求，返回相应的地图，包括PNG、GIF、JPEG等栅格形式，或者SVG或者WEB CGM等矢量形式。WMS支持HTTP协议，所支持的操作是由URL决定的
2020-08-29 09:15:22
1736
1
原创 跟牛老师一起学WEBGIS——WEBGIS基础（地图切片）
2.1 切片服务1.定义瓦片数据是将矢量或影像数据进行预处理，采用高效的缓存机制（如金字塔）形成的缓存图片集，采用“级、行、列”方式进行组织，可在网页中快速加载。因此，瓦片地图加载是根据客户端请求的地图范围和级别，通过计算行列号获取对应级别下网格的瓦片（即服务器预裁剪的图片），由这些瓦片集在客户端形成一张地图。2. 重要概念1.切片方案原点(Tile scheme origin)采用源数据集空间参考的坐标值，一般切片方案原点取左上角（例如：谷歌切片方案的原点是[-20037508.34,200
2020-08-23 14:00:19
2522
原创 跟牛老师一起学WEBGIS——WEBGIS基础（基础概念）
1、基础概念1.1 定义WebGIS是一种在Internet或Intranet环境下基于HTTP协议的用来存储、管理、分析、发布和共享地理信息的B/S模式分布式计算机应用系统。1.2 基本特征1.Web GIS是一个开放系统注重数据共享、软件重用、跨平台运行和易于集成等。简单地说，它能够共享多种来源、多级尺度、存放在不同地点的地理数据；能够通过对象管理、中件和插件等技术手段与非GIS系统（如Delphi）集成；并能够通过Java、CORBA、DCOM等技术跨平台协作运行，支持用客户机/服务器模式等
2020-08-20 21:59:09
5049
2
原创 跟牛老师一起学WEBGIS——GIS基础（QGIS中数据的创建与编辑）
5.1 目的不论是GIS还是WEBGIS，其核心是数据。实际中，我们获取数据的途径有很多种方法，但是“数字化”是一种比较常见也比较直接获取数据的方式，前面的文章数据的获取的时候也有提及。本节是一节实操课程，将如何在QGIS中如何创建、绘制以及编辑数据。希望通过本次课程，达到以下目的：了解GIS数据的基本获取方式；了解GIS数据的组织与存储方式；了解GIS里面图层（Layer）的概念；5.2 环境准备由于要在QGIS中操作，所以需要安装QGIS。QGIS可通过其官网https://www.qg
2020-08-16 10:24:29
1978
原创 如何从高德获取地铁数据
概述本文讲讲如何在高德获取地铁数据及后期处理，以北京为例。实现获取数据打开高德地铁，按下F12打开调试模式，切换到network面板，如下：点击右键，“Open in new tab”，在新窗口中打开。将页面另存为json数据格式。数据处理将拿到的数据写代码转换成两个geojson数据，一个是站点数据，一个线路数据。站点数据处理$.get('data/subway.json', function (res) { var geojson = { 'type
2020-08-13 22:17:20
5943
3
原创 跟牛老师一起学WEBGIS——GIS基础（GIS中的数据）
4、GIS中的数据4.1 基本特征1. 属性特征表示实际现象或特征，例如变量、级别、数量特征和名称等等2. 空间特征表示现象的空间位置或现在所处的地理位置。 空间特征又称为几何特征或定位特征， 一般以坐标数据表示， 例如笛卡尔坐标等。3. 时间特征指现象或物体随时间的变化，其变化的周期有超短期的、短期的、中期的、长期的等等。4.2 数据质量准确性（Accuracy）精度（Precision）空间分辨率(Spatial Resolution)比例尺（Scale）误差（Error）
2020-08-12 07:21:35
1738
原创 跟牛老师一起学WEBGIS——GIS基础（空间数据）
3、空间数据3.1 空间数据模型空间数据模型可以分为三种：场模型：用于描述空间中连续分布的现象；要素模型：用于描述各种空间地物；网络模型：可以模拟现实世界中的各种网络；1. 场模型对于模拟具有一定空间内连续分布特点的现象来说，基于场的观点是合适的。例如，空气中污染物的集中程度、地表的温度、土壤的湿度水平以及空气与水的流动速度和方向。场经常被视为由一系列等值线组成，一个等值线就是地面上所有具有相同属性值的点的有序集合。2. 栅格数据模型栅格数据模型是基于连续铺盖的， 它是将连续空间离散化。
2020-08-09 08:50:27
1657
原创 跟牛老师一起学WEBGIS——GIS基础（地图学）
2、地图学2.1 地图的主要特征1.地图信息的载体2.数学法则的结构3.有目的的地图概括经过分类、简化、夸张、符号化、模型化和概括方法，称为地图概括。5.符号系统的应用2.2 地图三要素地图是认识和分析研究客观世界的常用手段，尽管地图的表现形式发生了种种变化，但是依然可以认为构成地图的主要因素有三：地图图形、数学要素和辅助要素。1.地图图形用地图符号所表示的制图区域内，各种自然和社会经济现象的分布、联系以及时间变化等的内容部分（又称地理要素）。2.数学要素数学要素是决定图形分布位置和
2020-08-05 21:41:39
1452
原创 跟牛老师一起学WEBGIS——GIS基础（基本概念）
从毕业至今，已经八年有余了，在这八年多的时间里，一直在从事着跟GIS相关的工作，从刚毕业的桌面端（CS），到现在的浏览器端（BS），如果再加上毕业前的那段数据处理的实习经历，我算是从数据到开发，从技术到应用，都有一定的接触，也对GIS的一些原理性的东西了解的更为深刻了。俗话说：十年磨一剑。虽然工作的时间还未到，但如果加上在校学习时间的话，这个时间应该是远远超过10年的。受疫情的影响，年初有段时间是在家中办公的，这就免去了上班路上来回的折腾，也省下了不少的时间来思考一些事情。三月底的时候，根据公司的安.
2020-08-02 14:38:06
1412
2
原创 mapboxGL中popup遮挡的优化
概述在MapboxGL中，使用popup弹窗时，弹窗会出现超出范围的情况，本文就此问题做了点优化，共享记录下，一做自用，一做共享。实现效果实现代码结合popup的open事件，实现位置的调整。实现代码如下：// 调整popup位置that.popup.on('open', function(){ var ele = $(that.popup.getElement()); var offset = ele.offset(); var top = offset.top; var l
2020-07-28 11:53:43
2646
原创 canvas虚线绘制
概述晚上闲来无事，又不想看书，就写代码段锻炼一下脑子。本示例实现canva绘制虚线，因为canvas原生没有的。效果实现function drawDashLine(start, end, dash) { var deltX = end[0] - start[0]; var deltY = end[1] - start[1]; var totalDis = Math.sqrt(deltX * deltX + deltY * deltY); var getPos =
2020-06-26 23:42:41
756
原创 mapboxGL中sprite生成与引用
概述用过mapboxGL的都知道里面有个叫做sprite的配置，它的主要用途就是地图上渲染图标的，但是大多数情况下我们需要自定义图标的，我们该怎么办呢，莫着急，牛老师有招，本文告诉你如何通过几行简单的java代码实现，用引用到我们的地图中。效果生成的json文件如下：{ "zgyh": { "visible": "true", "pixelRatio": 1, "x": 0, "width": 32, "y"
2020-06-10 23:05:52
2585
3
原创 GPX数据在mapboxGL中轨迹动画
概述喜欢跑步的人都会选择一款APP来自己跑步的，常用的有keep、悦跑圈、华为健康等等，每次跑完步，会根据跑步的轨迹绘制轨迹动画。今天咱们讲讲技术，不扯淡，讲一下在mapboxGL中如何实现类似的效果。效果数据本文中的数据是我跑步的实测数据，数据导出于Garmin运动手表，格式为GPX。实现1.解析处理数据gpx数据解析用到了gpxparse.js，具体请移步GPXParser.js。loadPgxData() { $.get('../data/route.gpx', function
2020-06-07 23:34:17
2164
原创 结合d3.js实现气象数据的可视化
概述本文将结合d3.js实现在mapboxGL中格点气象数据的展示。效果实现1.数据格式说明需要将格点气象数据实现前端的展示，数据传输的方式有三种：1、json；2、二进制；3、灰度图。三种方式各有优劣，这个需要在实际的项目中去酌情选择，本文为方便理解，选用json的格式，数据格式如下：{ "header": { "la1": 54, "lo1...
2020-05-02 09:53:27
5628
32
原创 mapboxGL测量实现
概述讲真，MapboxGL里面虽然有测量的功能，但是不太好用，于是就萌生了自己实现的方法。本文几个turf.js来说说mapboxGL中测量的实现。效果实现1、实现思路按照绘制的流程，需要涉及到map的三个事件：click，dblclick，mousemove，其中click为绘制，dblclick为结束绘制，mousemove为绘制中。这样，定义一个状态标识isMeasure，在...
2020-04-21 22:54:32
3473
16
原创 mapboxGL和高德API结合实现路径规划
概述本文将mapboxGL和高德地图API结合起来，实现路径规划。效果实现高德地图路径规划API说明如上图，有行走、公交、驾车等多种路径，本文以行走为例来说明。添加点、线图层map.on('load', function() { var geojson = { 'type': 'FeatureCollection', 'features': [] };...
2020-04-05 16:31:58
3588
1
原创 mapboxGL之风流图
概述前面的文章说到了Openlayers4中风场的实现，本文将讲述如何在mapbox GL实现类似的效果。效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkUGd75p-1585748579661)(https://upload-images.jianshu.io/upload_images/6826673-a72b98f01e6917fa.gif?ima...
2020-04-01 21:44:00
3568
8
原创 进阶mapbox GL之paint和filter
概述通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识，本节结合一些示例，重点讲述一下mapbox GL里面的filter和paint的用法。说明本文中的示例数据源是北京的区边界数据，格式为geojson，数据字段与详情如下：filterfilter是layer里面的一个属性，通过一些条件表达式实现仅显示与过滤器匹配的要素，即图层的过滤显示，其官方说...
2020-03-28 10:48:26
6128
4
原创 初识mapbox GL
一、概述最近由于项目的需求，借此机会对mapbox GL做了一个系统的学习，同时也对整个学习过程做一个记录，一方面留作自用，另一方面也希望看到此文的人在学习mapbox GL的时候，能够有所启发、有所收获。二、快速认识很多人在学习一个新的webis框架的时候，表示狗咬刺猬——无从下口。对于这一点，我的建议是快速认识。1.目的快速认识的目的有两个：1、对框架有一个认知性的理解；2、甄别框架...
2020-03-24 20:04:04
4095
1
原创 mapbox GL台风路径的播放实现
概述前面的文章中写了基于openlayers4的台风路径播放，最近用到mapbox GL，也要实现相似的功能，网上找了好久都没有找到，于是就放弃了“拿来主义”的想法，只能自己动手了。经过一下午的努力，终于有了一个雏形，在此分享出来，希望对你有用！效果实现1、数据获取测试数据是从温州台风网，抓取了201929号台风数据作为测试数据。2、添加台风编号和名称到地图addTyphoonLa...
2020-03-22 22:46:23
2216
4
原创 我为什么跑步
说起这个题目，我会不由得想起村上春树的那本《当我谈跑步时，我谈些什么》，感兴趣的可以去看看，不过本文，说说我与跑步的故事。说起跑步，得从5年前，15年说起：那一年，是我来北京要饭的第二年，换了新的工作，住的房子也换了。在新换的房子的附近，有一个健身房，有个周末去溜达的时候被健身房的小哥哥给忽悠了，就花了1200办了一张年卡，此后，为了让钱花的有所值，基本上只要有时间我都会去健身房，跑步机上跑步...
2020-03-10 23:27:07
746
原创 monaco-editor做自己的代码测试工具
概述本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码...
2020-03-10 09:38:48
1978
原创 openlayers4+中台风路径播放优化
概述本文在以前风圈生成文章的基础上，将openlayers4+中台风路径的播放展示做了优化，并进行了封装。说明：1、本文示例台风数据来自温州台风网；2、openlayers使用版本为4.6；效果实现封装后的代码为：var Typhoon = function(map) { { const that = this; that._map = map; th...
2020-02-25 21:22:02
4157
7
原创 地图上覆盖物压盖的优化
概述在做webgis的时候，会经常性的碰到地图覆盖物压盖的情况。本文讲述一种基于聚类思路的解决办法，实现使用的是openlayers4+。效果默认展示第一个点(第一个点可根据一些业务逻辑进行处理，文中简单的做了处理，取了第一个点)，鼠标经过第一个点的时候再将其他压盖的点展示出来。实现1. htm<!doctype html><html lang="en">...
2020-02-19 21:49:13
2154
原创 疫情期间远程办公，我这么计划
受新型冠状病毒疫情的影响，开启了全国远程办公，当然，我也不例外。不论是从朋友圈还是微信的聊天中，大家都表示在家办公的低效。所以，经过两天时间的磨合，形成了一套属于我的远程办公节奏，在此分享下，希望可以帮助到你。治疗颈椎病专用图06时~07时由于疫情期间封锁小区，所以就选择在小区里面完成早上的锻炼。早上六点起来，小区里面也很少有人，正好锻炼。早上的锻炼的内容为：跑前全身舒展拉伸，慢跑半小...
2020-02-04 21:53:34
6926
13
原创 2019年年终总结
元旦的过去，代表这年终的来临。每逢年终，不论简繁，我都会将这过去的一年做一个总结。总结，不仅是对过去的盘点，也是对现在的分析，更是通过对过去的盘点和现在的分析，对未来做以计划，也有所期许。今年年中的时候，将朋友圈的签名换成了下面这句话：既往不恋，当下不杂，未来不迎。这句话出自曾国藩，教给我们的做人的道理：既往不恋，说的是不论过去有多辉煌，都不要去留恋；当下不杂，说的是当下的事情才是我们人生...
2020-01-08 22:20:49
1183
2
原创 mui实现上下滑动控制显隐效果
概述本文讲述在mui框架下实现上下滑动控制显隐的效果。效果实现html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi...
2019-12-30 17:43:46
1587
1
原创 aceEditor实现类似于codepen的效果
概述本文讲述如何应用aceEditor实现类似于codepen的在线编辑预览效果。实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,...
2019-11-19 21:58:43
1761
原创 Ol4网格生成以及优化
概述先描述一下大致场景：以0.05为单元格大小生成网格，并在地图上绘制，绘制的时候需要区分海陆。本文以此需求为契机，简单描述一下该需求的实现以及如何来优化。效果实现优化前 var source = new ol.source.Vector({ features: [] }); var vector = new ol.layer.Vector({ source...
2019-11-13 15:43:49
5445
Jquery封装的地图工具
2014-11-03
sqllite相关文件
2013-12-16
交通红绿灯
2013-04-17
SvgImageLayer.js
2017-10-20
PostGIS空间函数简介
2017-03-09
Arcgis for Javasctipt中常见的layer简介
2015-01-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人