vue 地圖可視化 maptalks 篇

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

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

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

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

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

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

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

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

一、創(chuàng)建工程

vue create vue-maptalks

進(jìn)入工程配置頁面

選擇 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，保存本次設(shè)置為模版，下次創(chuàng)建項(xiàng)目直接選擇本次保留的模板。

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

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

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

二、HELLO WORLD

安裝 maptalks

yarn add maptalks

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

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

效果如下：

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

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

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

相關(guān)文章

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

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

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

MapBox 項(xiàng)目中用到MapBox也是偶然的機(jī)會(huì)，項(xiàng)目中需要采用3D地圖，當(dāng)現(xiàn)有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高級開源的地圖，無奈谷歌地圖無法在國內(nèi)使用，已是便找到Leafle，一開始驚艷于leafle的開源程度和其與眾不同的地圖風(fēng)格，后來順藤摸瓜，找到一個(gè)商業(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è)務(wù)場景實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖柱狀圖地圖，并具有定時(shí)刷新的功能。本篇將介紹一下剩下的部分。接上篇vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng) 1 前言 1.1 業(yè)務(wù)場景實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖、柱狀圖、地圖，并具有定時(shí)刷新的功能。 1.2 業(yè)務(wù)分析上一篇分析的步驟大致有：系統(tǒng)搭建vue-cli vuex...

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

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

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

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

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