原创 canvas虛線繪製
概述 晚上閒來無事，又不想看書，就寫代碼段鍛鍊一下腦子。本示例實現canva繪製虛線，因爲canvas原生沒有的。 效果 實現 function drawDashLine(start, end, dash) { var
2020-06-27 07:28:07
6
原创 mui實現上下滑動控制顯隱效果
概述 本文講述在mui框架下實現上下滑動控制顯隱的效果。 效果 實現 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="vi
2020-06-19 00:54:17
原创 openlayers4+中臺風路徑播放優化
概述 本文在以前風圈生成文章的基礎上，將openlayers4+中臺風路徑的播放展示做了優化，並進行了封裝。 說明： 1、本文示例颱風數據來自溫州颱風網； 2、openlayers使用版本爲4.6； 效果 實現 封裝後的代碼爲：
2020-06-18 21:14:39
原创 mapboxGL測量實現
概述 講真，MapboxGL裏面雖然有測量的功能，但是不太好用，於是就萌生了自己實現的方法。本文幾個turf.js來說說mapboxGL中測量的實現。 效果 實現 1、實現思路 按照繪製的流程，需要涉及到map的三個事件：c
2020-06-18 21:14:39
原创 ol4通過ImageCanvas實現大量點的展示以及交互的實現
概述 在ol4裏面可以通過Vector Layer的方式進行點的渲染，但是當點的個數比較多的時候，會存在明顯的操作不流暢。本文講述如何利用ImageCanvas接口，對大量的點進行展示，並添加相應的交互。 實現效果 實現分析 1
2020-06-18 21:14:39
原创 地圖上覆蓋物壓蓋的優化
概述 在做webgis的時候，會經常性的碰到地圖覆蓋物壓蓋的情況。本文講述一種基於聚類思路的解決辦法，實現使用的是openlayers4+。 效果 默認展示第一個點(第一個點可根據一些業務邏輯進行處理，文中簡單的做了處理，取了第
2020-06-18 21:14:39
原创 疫情期間遠程辦公，我這麼計劃
受新型冠狀病毒疫情的影響，開啓了全國遠程辦公，當然，我也不例外。不論是從朋友圈還是微信的聊天中，大家都表示在家辦公的低效。所以，經過兩天時間的磨合，形成了一套屬於我的遠程辦公節奏，在此分享下，希望可以幫助到你。 治療頸椎病專用
2020-06-18 21:14:39
原创 Ol4網格生成以及優化
概述 先描述一下大致場景：以0.05爲單元格大小生成網格，並在地圖上繪製，繪製的時候需要區分海陸。本文以此需求爲契機，簡單描述一下該需求的實現以及如何來優化。 效果 實現 優化前 var source = new ol.s
2020-06-18 21:14:39
原创 mapboxGL中sprite生成與引用
概述 用過mapboxGL的都知道里面有個叫做sprite的配置，它的主要用途就是地圖上渲染圖標的，但是大多數情況下我們需要自定義圖標的，我們該怎麼辦呢，莫着急，牛老師有招，本文告訴你如何通過幾行簡單的java代碼實現，用引用到我
2020-06-11 06:51:38
原创 GPX數據在mapboxGL中軌跡動畫
概述 喜歡跑步的人都會選擇一款APP來自己跑步的，常用的有keep、悅跑圈、華爲健康等等，每次跑完步，會根據跑步的軌跡繪製軌跡動畫。今天咱們講講技術，不扯淡，講一下在mapboxGL中如何實現類似的效果。 效果 數據 本文中的數
2020-06-09 03:48:12
原创 結合d3.js實現氣象數據的可視化
概述 本文將結合d3.js實現在mapboxGL中格點氣象數據的展示。 效果 實現 1.數據格式說明 需要將格點氣象數據實現前端的展示，數據傳輸的方式有三種：1、json；2、二進制；3、灰度圖。三種方式各有優劣，這個需要在實際
2020-05-03 05:11:33
9
原创 mapboxGL和高德API結合實現路徑規劃
概述 本文將mapboxGL和高德地圖API結合起來，實現路徑規劃。 效果 實現 高德地圖路徑規劃API說明如上圖，有行走、公交、駕車等多種路徑，本文以行走爲例來說明。 添加點、線圖層 map.on('load', fu
2020-04-05 23:48:43
原创 mapboxGL之風流圖
概述 前面的文章說到了Openlayers4中風場的實現，本文將講述如何在mapbox GL實現類似的效果。 效果 [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZkUGd75p-158574857
2020-04-03 21:41:09
3
原创 進階mapbox GL之paint和filter
概述 通過前面的文章初識mapbox GL我們對mapbox GL有了一個相對比較全面的認識，本節結合一些示例，重點講述一下mapbox GL裏面的filter和paint的用法。 說明 本文中的示例數據源是北京的區邊界數據，格式
2020-03-28 18:20:43
4
原创 初識mapbox GL
一、概述 最近由於項目的需求，藉此機會對mapbox GL做了一個系統的學習，同時也對整個學習過程做一個記錄，一方面留作自用，另一方面也希望看到此文的人在學習mapbox GL的時候，能夠有所啓發、有所收穫。 二、快速認識 很多人
2020-03-25 18:48:35