資訊專欄INFORMATION COLUMN
摘要：廣告開(kāi)始最近做了表格數(shù)據(jù)轉(zhuǎn)成圖表展示的一個(gè)組件，地址如下整合地圖的時(shí)候發(fā)現(xiàn)針對(duì)地級(jí)市的一些文件太多了，全部引入后有將近，所以就用了下高德老爺給的組件和接口，然后弄完在這記錄一下雖然這種例子在社區(qū)里有很多這個(gè)組件文件放在了中，樣式奇丑，請(qǐng)?jiān)?/p>
/——————廣告開(kāi)始——————/
最近做了表格數(shù)據(jù)轉(zhuǎn)成圖表展示的一個(gè)react組件，地址如下：
https://github.com/LylaYuKako...
整合地圖的時(shí)候發(fā)現(xiàn)針對(duì)地級(jí)市的一些geoJSON文件太多了，全部引入后有將近20M，所以就用了下高德老爺給的組件和接口，然后弄完在這記錄一下（雖然這種例子在echarts社區(qū)里有很多）
這個(gè)組件文件放在了 ./src/components/MapChart中，樣式奇丑，請(qǐng)?jiān)?/p>
/——————廣告結(jié)束——————/
需求之前靜態(tài)引入的geoJSON改為高德API獲取
根據(jù)點(diǎn)擊進(jìn)行地圖下鉆
參考http://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q依賴的高德腳本
http://webapi.amap.com/maps?v...
http://webapi.amap.com/ui/1.0...
注意引入ui腳本要在maps引入之后
使用到的高德組件和接口 1. AMapUI.loadUI 方法以及 DistrictExplorer 實(shí)例利用 AMapUI.loadUI 可以構(gòu)造一個(gè)創(chuàng)建一個(gè) DistrictExplorer 實(shí)例，然后利用 DistrictExplorer 的實(shí)例，可以根據(jù)當(dāng)前需要加載城市的 adcode 獲取到該城市的 geo 數(shù)據(jù)
代碼如下
let districtExplorer
window.AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
/**
* DistrictExplorer構(gòu)建的實(shí)例
*/
districtExplorer = new DistrictExplorer()
})
// 執(zhí)行在上一步districtExplorer構(gòu)造完成之后
const adcode = "10000" // 這個(gè)adcode是城市（國(guó)家省市區(qū)）的編號(hào)
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
const geoData = {}
// areaNode對(duì)象執(zhí)行這個(gè)方法返回的geoJSON中的features
geoData.features = areaNode.getSubFeatures()
echarts.registerMap(this.adcode, this.geoData)
})
這樣就可以動(dòng)態(tài)獲取城市對(duì)應(yīng)的geoJSON了
2. https://restapi.amap.com/v3/c... 接口獲取城市adcode上邊提到的adcode，原本也是一個(gè)靜態(tài)的json文件，本著要高德就高德到底的原則，這塊使用 https://restapi.amap.com/v3/c... 這個(gè)接口來(lái)根據(jù)城市名稱獲取到城市adcode，
具體的使用方法請(qǐng)參考：https://lbs.amap.com/api/webs...
總結(jié)這塊還是遇到了一些小問(wèn)題，所以在這記錄一下，echarts地圖之前提供的geoJSON在echarts官網(wǎng)上指出不符合測(cè)繪法，然后給了一個(gè)示例鏈接，然而鏈接點(diǎn)進(jìn)去的例子我沒(méi)能看懂，所以看了一堆社區(qū)的例子，然后嘗試了直接利用 https://restapi.amap.com/v3/c... 獲取的城市信息去拼geoJSON的話，echarts繪不出來(lái)，才決定用高德提供的組件去獲取
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99124.html
摘要：需求展示西安市各區(qū)縣的地圖，點(diǎn)擊各區(qū)縣下鉆到各鄉(xiāng)鎮(zhèn)街道，只能內(nèi)網(wǎng)環(huán)境使用，不可用通過(guò)百度高德地圖來(lái)實(shí)現(xiàn)。利用展示自定義的地圖關(guān)于具體如何導(dǎo)入格式數(shù)據(jù)到的方法，可以參考官方示例。 需求 展示西安市各區(qū)縣的地圖，點(diǎn)擊各區(qū)縣下鉆到各鄉(xiāng)鎮(zhèn)/街道，只能內(nèi)網(wǎng)環(huán)境使用，不可用通過(guò)百度/高德地圖來(lái)實(shí)現(xiàn)。 解決 利用地圖數(shù)據(jù)生成區(qū)域的geojson 網(wǎng)絡(luò)上大部分地圖數(shù)據(jù)只是到省市，最多到區(qū)縣，再往下的數(shù)...
摘要：效果圖準(zhǔn)備工作高德地圖申請(qǐng)安裝中國(guó)地圖高德地圖官方點(diǎn)我進(jìn)入創(chuàng)建動(dòng)態(tài)創(chuàng)建標(biāo)簽后的是需要的插件中國(guó)地圖安裝開(kāi)始使用創(chuàng)建組件寫(xiě)入需要的分布指數(shù)高低寫(xiě)入高德地圖需要的 效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 準(zhǔn)備工作 高德地圖申請(qǐng)key 安裝Echarts 中國(guó)地圖 高德地圖 官方API...
摘要：獲取富文本內(nèi)容地圖我是使用高德地圖在全局導(dǎo)入為我申請(qǐng)的也可以自己去申請(qǐng)高德地圖官網(wǎng)案例 前言 今天是個(gè)好日子,大家六一快樂(lè);vue-cli生成的template還需要配置axios,vuex,element等插件,該項(xiàng)目中將這些常用插件進(jìn)行了配置;項(xiàng)目開(kāi)發(fā)中template可以快速?gòu)?fù)用,也是可以快速上手vue的一個(gè)demo; 1.動(dòng)態(tài)效果圖 showImg(https://segmen...
摘要：本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來(lái)開(kāi)發(fā)，其實(shí)百度地圖也出了個(gè)地圖可視化的庫(kù)，展示效果沒(méi)有好。。。。 最近幾年隨著大數(shù)據(jù)的興起，以及瀏覽器性能的提升，數(shù)據(jù)可視化成為了一個(gè)熱點(diǎn)，前端也冒出來(lái)了很多數(shù)據(jù)可視化的崗位。本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。...
閱讀 1690·2021-11-15 11:37
閱讀 3424·2021-09-28 09:44
閱讀 1678·2021-09-07 10:15
閱讀 2802·2021-09-03 10:39
閱讀 2698·2019-08-29 13:20
閱讀 1306·2019-08-29 12:51
閱讀 2215·2019-08-26 13:44
閱讀 2137·2019-08-23 18:02
