VUE remember once autonavi map and Echarts (China map)

rendering

The preparatory work

Amap application Key
Install Echarts China map

Scott map

Official API: Click me to enter
Create AMap. Js

export default function MapLoader () {
    return new Promise((resolve, reject) = > {
      if (window.AMap) {
        resolve(window.AMap)
      } else {
      // Dynamically create script tags
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.async = true
        script.src = 'https://webapi.amap.com/maps?v=1.4.9&callback=initAMap&key=Key&plugin=AMap.DistrictSearch, AMap. Circle, AMap. LngLat, AMap. Polyline,AMap.LngLat,AMap.Text,AMap.Geocoder';
        // Plugin is the required plugin
        script.onerror = reject
        document.head.appendChild(script)
      }
      window.initAMap = (a)= > {
        resolve(window.AMap)
      }
    })
}
Copy the code

Echarts Map of China

Install Echarts

npm install echarts -S
Copy the code

Begin to use

Create the component distribution.vue
Write the DOM required by Echarts

<div class="main_wrap" >< div ref="main" class="main_box"></div> <div class="Rankingtips"> <p class="color_tip"> <span style="float: High left "> < / span > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < span style =" margin - left: </span> </div> </div>Copy the code

Write the DOM required by amap

    <div class="main_wrap" v-show="activeState2">
        <div id="container" style="height: 100%"></div>
    </div>
Copy the code

Introduced Amap, Echarts

    import 'echarts/map/js/china'; // Map of China js
    import MapLoader from 'components/home/AMap'
Copy the code

Echarts method

generateEcharts() {
    var echarts = require('echarts');
    var myChart = echarts.init(this.$refs.main);  // Initializes the echarts instance based on the prepared DOM
    this.$ajax.get(this.HOST + "/redesign/home/findEnterpriseistribution").then( (res) = > {
        // Data format
        / / /
        // {name: "Beijing ", value: 3, ranking: 1},
        // {name: "ranking ", value: 2, ranking: 2},
        // {name: "Shanghai ", value: 1, ranking: 3},
        // {name: "ranking ", 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 = ""
            // Rank display style
            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: {// Highlight polygons and label styles
                            borderWidth: 1.// borderColor: '#d9f4fe',
                            areaColor: '#d9f4fe'.label: {
                                shadowColor: '#d9f4fe'.// Transparent by default
                                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 ? res.data.resultObject[i].value: "".ranking: res.data.resultObject[i].ranking ? res.data.resultObject[i].ranking: ""})}// Prepare prompt data
        var option = {
            tooltip: {
                formatter:  (params) = > {
                    var info = "";
                        if(params.data) {
                            info = `<div style="width: 60px; height: 60px"> <p style="font-size:12px">${ params.name }</p>
                                <p style="font-size:12px">${ params.data.value }</p> <p style="font-size:12px">${ params.data.ranking }</p>
                            </div>`
                        }else {
                            info = `<div style="width: 60px; height: 60px"> <p style="font-size:12px">${ params.name }</p>
                            </div>`
                        }
                    return info;
                },
                backgroundColor: "rgba(0,0,0,.6)".// Prompt label background color
                textStyle: { color: "#fff" } // Prompt label font color
            },
            // Configure the properties
            series: [{  
                name: 'data'.type: 'map'.mapType: 'china'.roam: true.label: {  
                    normal: {  
                        show: false  // Province name
                    },  
                    emphasis: { 
                        show: false}},data: data  / / data}]};// Display charts using specified configuration items and datamyChart.setOption(option); })}Copy the code

Autonavi method

Scottmap() {
    let that = this;
    that.map = "";
    MapLoader().then(AMap= > {
        console.log('Map loaded successfully')
        that.map = new AMap.Map('container', {
            center: [116.05438.38.98065]./ / center: [116.397428, 39.90923].
            zoom: 5
        })
        // Since the project is based on the use of API in Xiongan, xiongxian and Rongcheng counties (xiongan is one of the three counties) have not been divided into xiongan yet, anxin county, Xiongxian county and Rongcheng County have been highlighted
        // Draw highlights
        var district = new AMap.DistrictSearch({
            // return administrative boundary coordinates and other specific information
            extensions: 'all'.// Set the query administrative level to district
            level: 'district'
        })
        var polygons=[];
        var polygons2=[];
        var polygons3=[];
        district.search(Anxin County, (status, result) => {
            if(polygons) {
                that.map.remove(polygons)// Clear the last result
            }
            polygons = [];
            let bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    // Generate an administrative district 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('xiong county', (status2, result2) => {
            if(polygons2) {
                that.map.remove(polygons2)// Clear the last result
            }
            polygons2 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    // Generate an administrative district 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('Rongcheng County', (status2, result2) => {
            if(polygons3) {
                that.map.remove(polygons2)// Clear the last result
            }
            polygons3 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    // Generate an administrative district 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)
        })
        // Construct vector circles (circles)
        let circle = new AMap.Circle({
            center:  [116.05438.38.98065].// The central point of Xiongan
            radius: that.distance * 1000./ / radius
            strokeColor: "#ffffff"./ / thread color
            strokeOpacity: 1.// Line transparency
            strokeWeight: 3.// Line thickness
            fillColor: "#276cd4".// Fill the color
            fillOpacity: 0.2 // Fill transparency
        });
        that.map.add(circle);
        that.map.setFitView(circle);
        let lnglat = new AMap.LngLat(116.05438.38.98065) // LNG, lAT is replaced with the coordinates passed in
        let polylinePath = [
            new AMap.LngLat(116.05438.38.98065),
            new AMap.LngLat(lnglat.offset(that.distance * 1000.0).lng,38.98065)];// Create a line overlay
        let polyline = new AMap.Polyline({
            path: polylinePath,
            strokeColor: "#ffffff"./ / thread color
            strokeOpacity: 1.// Line transparency
            strokeWeight: 2./ / line width
            strokeStyle: "solid"./ / line style
            strokeDasharray: [10.5] // Add line styles
        });
        that.map.add(polyline);
        / / to draw
        let textPos = lnglat.offset(that.distance * 500,that.distance * 50);
        let text = new AMap.Text({
            text: `${ that.distance }Km `.position: textPos,
            map: this.map,
            style: {'background': 'transparent'.'border': '0 none'.'color': '#276cd4'.'font-size':'14px'}
        })
        that.map.add(text);
        // Test the distance
        let Centralpoint = [116.05438.38.98065];
        let targetpoint = this.region
        // debugger
        // Change longitude and latitude
        let geocoder = new AMap.Geocoder({
            city: 'the country'.// Set city to Beijing, default: "nationwide"
        });
        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);
                    // Draw dot markers to display content, HTML element string
                    if(dis <= that.distance * 1000) {
                        markernum++;
                        let markerContent = ' ' +
                            '
      
        '
       +
                            ' ' +
                            '
      
       '
      + markernum +'</div>'+
                            '</div>';
                        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('Map load failed' ,e)
    })
},
Copy the code

Left Enterprise List

// Enterprise mouse pass
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; }}// Replace the style again
    let markerContent = ' ' +
        '
      
        '
       +
        ' ' +
        '
      
       '
      + index +'</div>'+
        '</div>';
    // targetMarker.setIcon('//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);
},
Copy the code

// Enterprise mouse away
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 +'</div>'+
        '</div>';
    // targetMarker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');
    targetMarker.setContent(markerContent)
    this.map.remove(this.infoWindow);
},
Copy the code

// Enterprise click
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: 'the country'.// Set city to Beijing, default: "nationwide"
    });
    geocoder.getLocation(item.address, (status, result) => {
        this.map.setCenter(result.geocodes[0].location); // Set the map center point
        this.map.setZoom(30); // Zoom level})},Copy the code

Specific code

VUE remember once autonavi map and Echarts (China map)

rendering

The preparatory work

Begin to use

Related Posts

[Luffy]- CSS you don’t know

Principle of capturing FMP

Front-end development, all that graphics stuff