摘要：效果圖準(zhǔn)備工作高德地圖申請(qǐng)安裝中國地圖高德地圖官方點(diǎn)我進(jìn)入創(chuàng)建動(dòng)態(tài)創(chuàng)建標(biāo)簽后的是需要的插件中國地圖安裝開始使用創(chuàng)建組件寫入需要的分布指數(shù)高低寫入高德地圖需要的

準(zhǔn)備工作

高德地圖申請(qǐng)key

安裝Echarts 中國地圖

高德地圖

官方API：點(diǎn)我進(jìn)入

創(chuàng)建AMap.js

export default function MapLoader () {
    return new Promise((resolve, reject) => {
      if (window.AMap) {
        resolve(window.AMap)
      } else {
      // 動(dòng)態(tài)創(chuàng)建script標(biāo)簽
        var script = document.createElement("script")
        script.type = "text/javascript"
        script.async = true
        script.src = "https://webapi.amap.com/maps");;
        // plugin后的是需要的插件
        script.onerror = reject
        document.head.appendChild(script)
      }
      window.initAMap = () => {
        resolve(window.AMap)
      }
    })
}

Echarts 中國地圖

安裝Echarts

npm install echarts -S

開始使用

創(chuàng)建組件 distribution.vue

寫入Echarts 需要的DOM

    

        

            

                
分布指數(shù)
                

                    高
                    

                    

                    

                    

                    

                    低
                
        
    

寫入高德地圖需要的DOM

引入高德地圖、Echarts

    import "echarts/map/js/china"; //中國地圖js
    import MapLoader from "components/home/AMap"

Echarts方法

generateEcharts() {
    var echarts = require("echarts");
    var myChart = echarts.init(this.$refs.main);  // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    this.$ajax.get(this.HOST + "/redesign/home/findEnterpriseistribution").then( (res) => {
        // 數(shù)據(jù)格式
        // [
        //   {name: "北京", value: 3, ranking: 1},
        //   {name: "河北", value: 2, ranking: 2},
        //   {name: "上海", value: 1, ranking: 3},
        //   {name: "廣東", value: 1, ranking: 4}
        //   ...
        // ]
        this.homebution = res.data.resultObject;
        var data = [];
        for (let i = 0; i < res.data.resultObject.length; i++) {
            this.homebutionnum += res.data.resultObject[i].value;
            let classnum = ""
            // 排名顯示樣式
            if(res.data.resultObject[i].ranking == 1) { 
                classnum = "#1669e6"
            }else if(res.data.resultObject[i].ranking > 1 && res.data.resultObject[i].ranking <= 4) {
                classnum = "#31a4ed"
            }else if(res.data.resultObject[i].ranking > 4 && res.data.resultObject[i].ranking <= 10) {
                classnum = "#2cccfd"
            }else if(res.data.resultObject[i].ranking > 10 && res.data.resultObject[i].ranking <= 20) {
                classnum = "#7fe2fd"
            }else {
                classnum = "#d9f4fe"
            }
            data.push(
                {
                    name: res.data.resultObject[i].name,
                    itemStyle: {
                        normal: {
                            areaColor: classnum,
                            // borderWidth: 2
                        },
                        emphasis: {//高亮狀態(tài)下的多邊形和標(biāo)簽樣式
                            borderWidth: 1,
                            // borderColor: "#d9f4fe",
                            areaColor: "#d9f4fe",
                            label: {
                                shadowColor: "#d9f4fe", //默認(rèn)透明
                                shadowBlur: 10,
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color: "#3db77f"
                                }
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12,
                                color: "#0d6fb8"
                            }
                        },
                        emphasis: {
                            show: true,
                            color: "#3db77f"
                        }
                    },
                    value: res.data.resultObject[i].value ");"",
                    ranking: res.data.resultObject[i].ranking ");""
                }
            )
        }
        // 準(zhǔn)備提示數(shù)據(jù)
        var option = {
            tooltip: {
                formatter:  (params) => {
                    var info = "";
                        if(params.data) {
                            info = `

                                
${ params.name }
                                
${ params.data.value }
                                
排名：${ params.data.ranking }
                            
`
                        }else {
                            info = `

                                
${ params.name }
                            
`
                        }
                    return info;
                },
                backgroundColor: "rgba(0,0,0,.6)",//提示標(biāo)簽背景顏色
                textStyle: { color: "#fff" } //提示標(biāo)簽字體顏色
            },
            //配置屬性
            series: [{  
                name: "數(shù)據(jù)",  
                type: "map",  
                mapType: "china",   
                roam: true,  
                label: {  
                    normal: {  
                        show: false  //省份名稱  
                    },  
                    emphasis: { 
                        show: false  
                    }  
                },  
                data: data  //數(shù)據(jù)
            }],
        };
        //使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
        myChart.setOption(option);
    })
}

高德地圖方法

Scottmap() {
    let that = this;
    that.map = "";
    MapLoader().then(AMap => {
        console.log("地圖加載成功")
        that.map = new AMap.Map("container", {
            center: [116.05438, 38.98065],
            // center: [116.397428, 39.90923],
            zoom: 5
        })
        // 由于項(xiàng)目是按雄安地區(qū)使用 API暫時(shí)還未把雄安劃分 所以決定把安新縣、雄縣、容城縣（三縣合一就是雄安）繪制成高亮
        // 繪制高亮
        var district = new AMap.DistrictSearch({
            // 返回行政區(qū)邊界坐標(biāo)等具體信息
            extensions: "all",
            // 設(shè)置查詢行政區(qū)級(jí)別為 區(qū) 
            level: "district"
        })
        var polygons=[];
        var polygons2=[];
        var polygons3=[];
        district.search("安新縣", (status, result) => {
            if(polygons) {
                that.map.remove(polygons)//清除上次結(jié)果
            }
            polygons = [];
            let bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政區(qū)劃polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons.push(polygon);
                }
            }
            that.map.add(polygons);
        });
        district.search("雄縣", (status2, result2) => {
            if(polygons2) {
                that.map.remove(polygons2)//清除上次結(jié)果
            }
            polygons2 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政區(qū)劃polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons2.push(polygon);
                }
            }
            that.map.add(polygons2)
        })
        district.search("容城縣", (status2, result2) => {
            if(polygons3) {
                that.map.remove(polygons2)//清除上次結(jié)果
            }
            polygons3 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政區(qū)劃polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons3.push(polygon);
                }
            }
            that.map.add(polygons3)
        })
        // 構(gòu)造矢量圓形（圓）
        let circle = new AMap.Circle({
            center:  [116.05438, 38.98065], // 雄安的中心點(diǎn)
            radius: that.distance * 1000,  //半徑
            strokeColor: "#ffffff",  //線顏色
            strokeOpacity: 1,  //線透明度
            strokeWeight: 3,  //線粗細(xì)度
            fillColor: "#276cd4",  //填充顏色
            fillOpacity: 0.2 //填充透明度
        });
        that.map.add(circle);
        that.map.setFitView(circle);
        let lnglat = new AMap.LngLat(116.05438, 38.98065) // lng, lat 替換成傳入的坐標(biāo) 
        let polylinePath = [
            new AMap.LngLat(116.05438, 38.98065),
            new AMap.LngLat(lnglat.offset(that.distance * 1000,0).lng,38.98065)
        ];
        // 創(chuàng)建線覆蓋物
        let polyline = new AMap.Polyline({
            path: polylinePath,
            strokeColor: "#ffffff", //線顏色
            strokeOpacity: 1,       //線透明度
            strokeWeight: 2,        //線寬
            strokeStyle: "solid",   //線樣式
            strokeDasharray: [10, 5] //補(bǔ)充線樣式
        });
        that.map.add(polyline);
        // 繪制字
        let textPos = lnglat.offset(that.distance * 500,that.distance * 50);
        let text = new AMap.Text({
            text: `${ that.distance }公里`,
            position: textPos,
            map: this.map,
            style:{
                    "background": "transparent",
                    "border": "0 none",
                    "color": "#276cd4",
                    "font-size":"14px"}
        })
        that.map.add(text);
        // 測(cè)試距離
        let Centralpoint = [116.05438, 38.98065];
        let targetpoint = this.region
        // debugger
        // 轉(zhuǎn)經(jīng)緯度
        let geocoder = new AMap.Geocoder({
            city: "全國", //城市設(shè)為北京，默認(rèn)：“全國”
        });
        let markernum = 0
        for (let i = 0; i < targetpoint.length; i++) {
            geocoder.getLocation(targetpoint[i], (status, result) => {
                if (status === "complete"&& result.geocodes.length) {
                    let dis = AMap.GeometryUtil.distance(Centralpoint,result.geocodes[0].location);
                    // 繪制點(diǎn)標(biāo)記顯示內(nèi)容，HTML要素字符串
                    if(dis <= that.distance * 1000) {
                        markernum++;
                        let markerContent = "" +
                            "
" +
                            "   " +
                            "
"+ markernum +"
"+
                            "
";
                        this.$ajax.get(this.HOST + "/redesign/home/findCompanyAll").then( (res) => {
                            this.matchingenterpriseList.push(res.data.resultObject[i])
                        })
                        let marker = new AMap.Marker({
                            content: markerContent,                                
                            position: result.geocodes[0].location,
                            offset: new AMap.Pixel(-13, -30),
                            extData:{
                                id: markernum
                            }
                        });
                        that.markers.push(marker);
                        marker.setMap(this.map);
                    }
                }
        })
        }
        that.matchingenterpriseState = true;
    }, e => {
        console.log("地圖加載失敗" ,e)
    })
},

左側(cè)企業(yè)列表

// 企業(yè)鼠標(biāo)經(jīng)過
matchingenterprisemouseenter(item,index) {
    this.activemetchmouseenter = index;
    let targetMarker = {};
    for (let i = 0; i < this.markers.length; i++) {
        let id = this.markers[i].getExtData().id;
        if(id == index){
            targetMarker = this.markers[i];
            break;
        }
    }
    // 重新替換樣式
    let markerContent = "" +
        "
" +
        "   " +
        "
"+ index +"
"+
        "
";
    // targetMarker.setIcon("http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png");
    targetMarker.setContent(markerContent)
    let position =  targetMarker.getPosition();
    this.infoWindow = new AMap.InfoWindow({
        position: position,
        offset: new AMap.Pixel(0, -35),
        content: item.companyName
    });
    this.infoWindow.open(this.map);
},

// 企業(yè)鼠標(biāo)離開
matchingenterprisemouseleave(item,index) {
    this.activemetchmouseenter = "";
    let targetMarker = {};
    for (let i = 0; i < this.markers.length; i++) {
        let id = this.markers[i].getExtData().id;
        if(id == index){
            targetMarker = this.markers[i];
            break;
        }
    }
    let markerContent = "" +
        "
" +
        "   " +
        "
"+ index +"
"+
        "
";
    // targetMarker.setIcon("http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png");
    targetMarker.setContent(markerContent)
    this.map.remove(this.infoWindow);
},

// 企業(yè)點(diǎn)擊
matchingenterpriseclick(item,index) {
    this.activeState3 = true;
    this.activeState1 = false;
    this.activeState = false;
    this.itemList = item;
    // this.map.remove(overlayGroups);
    let geocoder = new AMap.Geocoder({
        city: "全國", //城市設(shè)為北京，默認(rèn)：“全國”
    });
    geocoder.getLocation(item.address, (status, result) => {
        this.map.setCenter(result.geocodes[0].location); //設(shè)置地圖中心點(diǎn)
        this.map.setZoom(30); // 縮放級(jí)別
    })
},

具體代碼