Map operation is about the functions of zooming in and out, positioning and searching. The most important one is to set the echart regardless of which operation. The specific functions are as follows:

function localizeMap(center,zoom){
    var option = echartMap.getOption()
    if(center&&center.length==2)
        option.series[0].center=center

    if(zoom>=4.4)
        option.series[0].zoom=zoom

    echartMap.setOption(option)
    setTimeout("keepHighlight()",100)
}

Click to enlarge the homepage

function mapAmplification(center){
    var option = echartMap.getOption()
    var zoom=option.series[0].zoom+SCALE
    localizeMap(center?center:undefined,zoom)
}

Home page click reduction

function mapNarrow(center){
var option = echartMap.getOption()
var zoom=option.series[0].zoom-SCALE
if(zoom>=4.4)
localizeMap(center?center:undefined,zoom)
}

Home Click to locate

function mapLocalizeInit(){
    var defCenter=[104, 37]
    var defZoom=4.4
    var option = echartMap.getOption()
    if(option.series[0].center[0]!=defCenter[0]||option.series[0].center[1]!=defCenter[1]||option.series[0].zoom!=defZoom)
        localizeMap(defCenter,defZoom)
}

Home Click Search

Implementation function:
1. The search bar is not displayed by default. Click the button to automatically zoom and pop up the search bar
2. Fuzzy matching, input a single letter or text to display the drop-down box for query
3. Click the province to locate the coordinates in the map
Here is how to click the button to display the search bar

 $("#left_bottom_options_search").on("click", function () {
       // $(".top_search").width("10rem")
       if ($(".top_search").attr("data-open")=="no") {

            $("#search_con").val($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_inputvalue'))
        $(".top_search").animate({width:'11rem'},300);
        $(".top_search").attr("data-open","open")
    }else{
        $(".top_search").animate({width:'0rem'},300);
        $(".top_search").attr("data-open","no")
    }
    })

Here is the fuzzy search

    //search
    $("#search_con").on("focus", function () {//Get focus clear value
        $("#search_con").val("")
        $(".ui-helper-hidden-accessible").hide();
        //The conflict between fuzzy matching control and time control will result in the failure to perform the selected search function after each time of time selection, so the method of timely loading is used
        try{
            if(autoComplete)
                $( "#search_con" ).autocomplete( "destroy" )

        }catch (e){
            console.log(e)
        }
         autoComplete = $("#search_con").autocomplete({//Fuzzy matching
            autoFocus: true,
            messages: {
                noResults: $.i18n.prop('com_zte_lte_processingpoorqualitregion_cellsum_homepage_noresult'),
                results: function() {return ""}
            },
            response: function () {
                $(".ui-helper-hidden-accessible").show();
            },
            source: allProvinceNames,
            select:function(params1,params2){//Select Search
                provinceSearch(params2.item.value);
                $(".ui-helper-hidden-accessible").hide();
            }
        })
        $(".ui-helper-hidden-accessible").hide();
    })
    $("#search_con").on("blur", function () {//Null recovery
        if ($("#search_con").val() == "") {
            $("#search_con").val($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_inputvalue'))
        }
    })

Click the search name below to locate directly

 $("#search_con").bind('keypress',function(event){//Enter search
        if(event.keyCode == 13)
            provinceSearch($("#search_con").val())
    })
    $(".search_btn").on("click", function () {//Click search
        provinceSearch($("#search_con").val())
    })

Search function:

function provinceSearch(key){
    provinceHighlight(key)
    if(highlightProvinceParams){
        if("pro".indexOf(thisPage)==0)
            myExports.showProvince(highlightProvinceParams.name)
        else
            detaillDataQuery(highlightProvinceParams.code)
    }

}

Map highlight effect

function provinceHighlight(key){
    echartMap.dispatchAction({type: 'downplay'})//Remove all highlights
    highlightProvinceParams=undefined
    var provinceParams=getProvinceParams(key)
    //Highlight the specified Province
    if(provinceParams){
        highlightProvinceParams=provinceParams
        //Province positioning
        var option = echartMap.getOption()
        option.series[1].data=[highlightProvinceParams.offset]
        echartMap.setOption(option)

        echartMap.dispatchAction({type: 'highlight',
            seriesIndex: 0,
            name: highlightProvinceParams.name})
    }
}

The value of homepage map rendering is configurable

Call the back-end interface service to get the color value, call this function getConfigData directly in the initialization function, and then use the saved variables in the map initialization

 //Get configured
    var configData=[];
    var colorArry = [];
    var AreaNum;
    SCALE=0.3
function getConfigData(){
         $.ajax({
            type: "get",
            async: true,
            url: '/rdk/service/app/vmax_r_poorqualityarea/server/poorQualityOfArea/giscolor',
            async: true,
            data: {modelname:'poorQualityOfArea'},
            success: function (result) {
                if(result){
                    configData = result.value;
                    colorArry = [configData[4],configData[5],configData[6]];
                    AreaNum={
                        name:$.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_sorttype'),
                        key:"countAreaId",
                        unit:"",
                        start:Number(configData[0]),
                        min:Number(configData[1]),
                        max:Number(configData[2]),
                        end:Number(configData[3])
                    }
                }
            }
        })
    }