在頁面中加載Apache ECharts 5/百度地圖

文章目錄

• 一、在頁面中加載百度地圖
• 二、地圖色斑圖

一、在頁面中加載百度地圖

1、打開“百度地圖開放平台”，用百度賬号登入。

2、進入百度地圖開放平台 右上角點選 我的 | 站内信 | 應用管理 | 我的應用。

3、單擊“建立應用”：

應用類型：浏覽器端。

白名單：*

建立應用成功後，系統将傳回一個AK值。

4、在index.html的标記對中寫入：

注意：

（1）腳手架vue-cli 2.x 的index.html在static檔案夾中

（2）腳手架vue-cli 3.x 的index.html在public檔案夾中

<script 
type="text/javascript"
src="//api.map.baidu.com/api?v=2.0&ak=fVuGNFdooRBSHd21OEsBOGu5a0XaDa4e&s=1">
</script>
           

上述代碼：src="//api.map.baidu.com/apiv=2.0&ak=fVuGNFdooRBSHd21OEsBOGu5a0XaDa4e&s=1"（标黃是自己的AK值）

5、在.vue檔案中建立地圖容器

在 methods：中執行下列代碼：

showMap(){
     let map = new BMap.Map(baiduMap);    	//建立地圖
     let point = new BMap.Point(114.508851, 37.0682); 	//建立坐标點（經度,緯度）
      map.centerAndZoom(point, 15);		//将坐标點放置在中心
      let marker = new BMap.Marker(point);		//建立标記
      map.addOverlay(marker);			//顯示标記并覆寫建築物
      map.enableScrollWheelZoom(true);	//開啟滑鼠滾輪縮放
      map.setMapStyle({ style: 'midnight' }) 	//地圖風格
 }
           

第一步建立地圖必須寫地圖容器的id值

如果沒有id值可以用選擇器找到節點指派一個變量然後把變量放到裡面 如下：

var xx=document.querySelect(".map")

let map = new BMap.Map(xx); //建立地圖

6、在mounted()中調用showMap()

mounted(){
       this.showMap();
 }
           

二、地圖色斑圖

1、找到表示地圖資源的檔案：json/js。

2、書寫加載色斑圖的代碼:

geoHome(){
            let airData = [
              { name: '北京', value: 39.92 },
              { name: '天津', value: 39.13 },
              { name: '上海', value: 31.22 },
              { name: '重慶', value: 66 },
              { name: '河北', value: 147 },
              { name: '河南', value: 113 },
              { name: '雲南', value: 25.04 },
              { name: '遼甯', value: 50 },
              { name: '黑龍江', value: 114 },
              { name: '湖南', value: 175 },
              { name: '安徽', value: 117 },
              { name: '山東', value: 92 },
              { name: '新疆', value: 84 },
              { name: '江蘇', value: 67 },
              { name: '浙江', value: 84 },
              { name: '江西', value: 96 },
              { name: '湖北', value: 273 },
              { name: '廣西', value: 59 },
              { name: '甘肅', value: 99 },
              { name: '山西', value: 39 },
              { name: '内蒙古', value: 58 },
              { name: '陝西', value: 61 },
              { name: '吉林', value: 51 },
              { name: '福建', value: 29 },
              { name: '貴州', value: 71 },
              { name: '廣東', value: 38 },
              { name: '青海', value: 57 },
              { name: '西藏', value: 24 },
              { name: '四川', value: 58 },
              { name: '甯夏', value: 52 },
              { name: '海南', value: 54 },
              { name: '台灣', value: 88 },
              { name: '香港', value: 66 },
              { name: '澳門', value: 77 }
            ];
            let geoHome=document.querySelector(".geoHome");
            let chart=this.$echarts.init(geoHome);
            let url='http://localhost:8081/static/china.json';
            this.$axios.get(url).then(res=>{
              console.log(res.data);
              this.$echarts.registerMap('chinaMap',res.data);
              let option={
                title:{
                  text:'戶籍歸屬色斑圖',
                  left:'center',
                  textStyle:{
                    color:'#ffffff'
                  }
                },
                geo: {
                  type: 'map',
                  map: 'chinaMap', // chinaMap需要和registerMap中的第一個參數保持一緻
                  roam: false, // 設定允許縮放以及拖動的效果
                  label: {
                    show: false,    // 展示标簽
                    fontSize:10
                  },
                  itemStyle:{
                    areaColor:'#3da3e0'
                  },
                  emphasis:{
                    itemStyle:{
                      areaColor:'#65fdf0'
                    }
                  }
                },
                series: [
                  {
                    data: airData,
                    geoIndex: 0, // 将空氣品質的資料和第0個geo配置關聯在一起
                    type: 'map'
                  }
                ],
                visualMap: {
                  min: 800,
                  max: 50000,
                  inRange: {
                    color: ['#63f8ef', '#021ec7'] // 控制顔色漸變的範圍
                  },
                  calculable: true // 出現滑塊
                }
              };
              chart.setOption(option);
            })
          }