vue 地圖可視化 maptalks 篇

enali 發(fā)布于2019-05-22 15:21 / 2127人閱讀

摘要：首先利用搭建一個項目，然后寫一段的。如果對項目的創(chuàng)建比較熟悉，可以跳過步驟一，直接看步驟二。輸入保存的模板名字，進入項目初始化構(gòu)建，等待構(gòu)建完成。二安裝刪除，新建，輸入如下代碼地圖初始化，應寫在函數(shù)中，以保證掛載點先于地圖渲染。

Maptalks 項目是一個 HTML5 的地圖引擎, 基于原生 ES6 Javascript 開發(fā)：

二三維一體化地圖, 通過二維地圖的旋轉(zhuǎn) /傾斜增加三維視角

插件化設計, 能與其他圖形庫結(jié)合, 開發(fā)各種二三維效果, 例如 echarts/d3/THREE 等

很認真的優(yōu)化了繪制性能

很重視測試, 有接近 1.5K 個單元測試用例, 所以穩(wěn)定性還不錯, 已經(jīng)應用在很多大大小小的系統(tǒng)上了

上面是一段 maptalks 官方介紹，下面來創(chuàng)建工程。首先利用 vue-cli3 搭建一個 SPA 項目，然后寫一段 maptalks 的 HELLO WORLD。如果對 vue 項目的創(chuàng)建比較熟悉，可以跳過步驟一，直接看步驟二。

一、創(chuàng)建工程

vue create vue-maptalks

進入工程配置頁面

選擇 Manually select features

選擇 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter

輸入 n

選擇 sass/scss

選擇 ESLint + Airbnb config

選擇 Lint on save

選擇 In dedicated config files

輸入 y，保存本次設置為模版，下次創(chuàng)建項目直接選擇本次保留的模板。

輸入保存的模板名字，進入項目初始化構(gòu)建，等待構(gòu)建完成。

完成后，打開瀏覽，輸入 http://localhost:8080/

工程創(chuàng)建完成。

二、HELLO WORLD

安裝 maptalks

yarn add maptalks

刪除 src/App.vue，新建 App.vue，輸入如下代碼

地圖初始化，應寫在 nextTick 函數(shù)中，以保證掛載點 #map 先于地圖渲染。

效果如下：

GPU云服務器云服務器地圖可視化數(shù)據(jù)地圖可視化 maptalks 上一篇

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6747.html

地圖繪制初探——基于maptalks的2.5D地圖繪制

摘要：下面，以貴州省的偽地圖為例，進行代碼的編寫和相應數(shù)據(jù)的簡單處理。根據(jù)問答如何合并區(qū)域邊界，訪問在線的地圖數(shù)據(jù)處理網(wǎng)站，給每個縣市取一個相同的別名，一番輸入輸出，我們就得到了貴州省的外邊界。進行圖形可視化，難免會遇到地理數(shù)據(jù)的可視化需求。通常情況下，直接使用echarts對配置項進行處理，就可以滿足大部分需求。當然，更加復雜的定制化需求，可能就需要借助d3、Three.js等工具。如果...

qylost 2019-08-23 14:15 評論0 收藏0
vue 地圖可視化 mapbox篇(2)

MapBox 項目中用到MapBox也是偶然的機會，項目中需要采用3D地圖，當現(xiàn)有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高級開源的地圖，無奈谷歌地圖無法在國內(nèi)使用，已是便找到Leafle，一開始驚艷于leafle的開源程度和其與眾不同的地圖風格，后來順藤摸瓜，找到一個商業(yè)性地圖，它便是我們的主角-MapBoxshowImg(https://segmentfault.com/img/b...

_DangJin 2019-08-22 16:15 評論0 收藏0
vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)（【續(xù)】接口篇）

摘要：接上篇全家桶百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)前言業(yè)務場景實現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖柱狀圖地圖，并具有定時刷新的功能。本篇將介紹一下剩下的部分。接上篇vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng) 1 前言 1.1 業(yè)務場景實現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖、柱狀圖、地圖，并具有定時刷新的功能。 1.2 業(yè)務分析上一篇分析的步驟大致有：系統(tǒng)搭建vue-cli vuex...

hiyayiji 2019-08-26 13:57 評論0 收藏0
vue地圖可視化 ArcGIS篇（3）

摘要：不建議底圖選擇中存在兩種不同坐標體系，如下圖坐標存在明顯的偏差，火星坐標在采用坐標系的地圖上位置偏上彩色中國天地圖全球衛(wèi)星地圖例如我們使用的類進行查找，返回的數(shù)據(jù)都是國際坐標，因此必須進行偏差糾正。 ArcGIS for javascript開發(fā)心得本次實例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細區(qū)別看官方...

oogh 2019-08-23 12:38 評論0 收藏0
vue 地圖可視化（1）

摘要：百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學可以直接上手這里不采用已經(jīng)封裝好的地圖組件，而是從零開始，采用原生的百度地圖一百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件（echarts、Mapv等...

1treeS 2019-08-22 16:08 評論0 收藏0