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