echarts結合高德API進行地圖下鉆

happen 發布于2019-08-23 12:58 / 2906人閱讀

摘要：廣告開始最近做了表格數據轉成圖表展示的一個組件，地址如下整合地圖的時候發現針對地級市的一些文件太多了，全部引入后有將近，所以就用了下高德老爺給的組件和接口，然后弄完在這記錄一下雖然這種例子在社區里有很多這個組件文件放在了中，樣式奇丑，請原諒

/——————廣告開始——————/

最近做了表格數據轉成圖表展示的一個react組件，地址如下：

https://github.com/LylaYuKako...

整合地圖的時候發現針對地級市的一些geoJSON文件太多了，全部引入后有將近20M，所以就用了下高德老爺給的組件和接口，然后弄完在這記錄一下（雖然這種例子在echarts社區里有很多）

這個組件文件放在了 ./src/components/MapChart中，樣式奇丑，請原諒

/——————廣告結束——————/

需求

之前靜態引入的geoJSON改為高德API獲取

根據點擊進行地圖下鉆

參考

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 可以構造一個創建一個 DistrictExplorer 實例，然后利用 DistrictExplorer 的實例，可以根據當前需要加載城市的 adcode 獲取到該城市的 geo 數據

代碼如下

let districtExplorer

window.AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
  /**
   * DistrictExplorer構建的實例
   */
  districtExplorer = new DistrictExplorer()
})

// 執行在上一步districtExplorer構造完成之后

const adcode = "10000" // 這個adcode是城市（國家省市區）的編號
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
  const geoData = {}

  // areaNode對象執行這個方法返回的geoJSON中的features
  geoData.features = areaNode.getSubFeatures() 
  echarts.registerMap(this.adcode, this.geoData)
})

這樣就可以動態獲取城市對應的geoJSON了

2. https://restapi.amap.com/v3/c... 接口獲取城市adcode

上邊提到的adcode，原本也是一個靜態的json文件，本著要高德就高德到底的原則，這塊使用 https://restapi.amap.com/v3/c... 這個接口來根據城市名稱獲取到城市adcode，

具體的使用方法請參考：https://lbs.amap.com/api/webs...

總結

這塊還是遇到了一些小問題，所以在這記錄一下，echarts地圖之前提供的geoJSON在echarts官網上指出不符合測繪法，然后給了一個示例鏈接，然而鏈接點進去的例子我沒能看懂，所以看了一堆社區的例子，然后嘗試了直接利用 https://restapi.amap.com/v3/c... 獲取的城市信息去拼geoJSON的話，echarts繪不出來，才決定用高德提供的組件去獲取

云服務器 GPU云服務器高德地圖api接口高德地圖api接口文檔高德地圖高德地圖大數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99124.html

【echarts地圖制作】下鉆到鄉鎮/街道級別的

摘要：需求展示西安市各區縣的地圖，點擊各區縣下鉆到各鄉鎮街道，只能內網環境使用，不可用通過百度高德地圖來實現。利用展示自定義的地圖關于具體如何導入格式數據到的方法，可以參考官方示例。需求展示西安市各區縣的地圖，點擊各區縣下鉆到各鄉鎮/街道，只能內網環境使用，不可用通過百度/高德地圖來實現。解決利用地圖數據生成區域的geojson 網絡上大部分地圖數據只是到省市，最多到區縣，再往下的數...

寵來也 2019-08-23 14:28 評論0 收藏0
VUE 記一次高德地圖和Echarts（中國地圖）

摘要：效果圖準備工作高德地圖申請安裝中國地圖高德地圖官方點我進入創建動態創建標簽后的是需要的插件中國地圖安裝開始使用創建組件寫入需要的分布指數高低寫入高德地圖需要的效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 準備工作高德地圖申請key 安裝Echarts 中國地圖高德地圖官方API...

KoreyLee 2019-05-27 17:42 評論0 收藏0
vue中vuex,echarts,地圖,ueditor的使用

摘要：獲取富文本內容地圖我是使用高德地圖在全局導入為我申請的也可以自己去申請高德地圖官網案例前言今天是個好日子,大家六一快樂;vue-cli生成的template還需要配置axios,vuex,element等插件,該項目中將這些常用插件進行了配置;項目開發中template可以快速復用,也是可以快速上手vue的一個demo; 1.動態效果圖 showImg(https://segmen...

Cheriselalala 2019-08-26 11:56 評論0 收藏0
對web數據可視化的一些理解

摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。最近幾年隨著大數據的興起，以及瀏覽器性能的提升，數據可視化成為了一個熱點，前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。...

andong777 2019-08-20 16:28 評論0 收藏0