百度地圖API 2.0實現點聚合分佈圖

時間  2019-11-08
標籤 百度 地圖 api 2.0 實現 聚合 分佈圖 欄目 設計模式 简体版
原文   原文鏈接

實現效果圖以下：javascript

 

上方下拉列表使用的是handlebars模板，地圖使用百度地圖api2.0加載，實現選擇下拉框條件後篩選出符合條件的學校點加載在地圖上，藍色是小學，紅色是初中，點擊學校彈出彈框展現學校的具體信息。css

 

html代碼html

<link type="text/css" rel="stylesheet" href="~/Resources/css/schooldistr.css" />
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />


<link type="text/css" rel="stylesheet" href="~/Resources/css/public.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=""></script>
<script type="text/javascript" src="~/Resources/static/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="~/Resources/static/handlebars-v4.0.11.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<div class="main">
<!--下拉列表模板-->

    <div class="dropdownbar" id="DropdownBar">
        <script id="DropdownTemplate" type="text/x-handlebars-template">
            <ul>
                <li id="li-CategStandard">
                    <span class="menu"></span>
                    <div class="dropdown-group btn-group">
                        <button id="CategStandard" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-value="{{CategStandard.[0].CategStandardName}}" data-limit="{{CategStandard.[0].LimitedData}}" data-name="{{CategStandard.[0].Indicator}}">
                            {{CategStandard.[0].CategStandardName}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {{#if CategStandard}}
                            {{#each CategStandard}}
                            <li><a href="javascript:void(0);" data-value="{{this.CategStandardName}}" data-limit="{{this.LimitedData}}" data-name="{{this.Indicator}}">{{this.CategStandardName}}</a></li>
                            {{/each}}
                            {{/if}}
                        </ul>
                    </div>
                </li>
                <li id="li-Indicator" style="display:none">
                    <label class="dropdown-label">指標：</label>
                    <div class="dropdown-group btn-group">
                        <button id="Indicator" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-limit="{{Indicator.[0].LimitedData}}" data-value="{{Indicator.[0].IndicatorName}}">
                            {{Indicator.[0].IndicatorName}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {{#if Indicator}}
                            {{#each Indicator}}
                            <li><a href="javascript:void(0);" data-value="{{this.IndicatorName}}" data-limit="{{this.LimitedData}}">{{this.IndicatorName}}</a></li>
                            {{/each}}
                            {{/if}}
                        </ul>
                    </div>
                </li>
                <li>
                    <label class="dropdown-label">區域：</label>
                    <div class="dropdown-group btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="firstareacode" data-name="{{Areas.[0].AreaName}}" data-code="{{Areas.[0].AreaCode}}" data-grade="{{Areas.[0].AreaGrade}}">
                            {{Areas.[0].AreaName}}
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu">
                            {{#if Areas}}
                            {{#each Areas}}
                            <li><a onclick="GetSecondArea(this)" href="javascript:void(0);" data-name="{{this.AreaName}}"  data-code="{{this.AreaCode}}" data-grade="{{this.AreaGrade}}">{{this.AreaName}}</a></li>
                            {{/each}}
                            {{/if}}
                        </ul>
                    </div>
                </li>

                <li id="second-area" class="second-area"></li>

                <li>
                    <label class="dropdown-label">年份：</label>
                    <div class="dropdown-group btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" id="time" data-toggle="dropdown" data-time="{{ Years.[0]}}" data-id="time" data-value="{{ Years.[0]}}">
                            {{ Years.[0]}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {{#if Years}}
                            {{#each Years}}
                            <li><a href="javascript:void(0);" data-value="{{this}}">{{this}}</a></li>
                            {{/each}}
                            {{/if}}
                        </ul>
                    </div>
                </li>
                <li>
                    <label class="dropdown-label">學校級別：</label>
                    <div class="dropdown-group btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" id="SchoolGrade" data-toggle="dropdown" data-grade="{{SchoolLevels.[0]}}" data-id="schoollevel" data-value="{{SchoolLevels.[0]}}">
                            {{SchoolLevels.[0]}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {{#if SchoolLevels}}
                            {{#each SchoolLevels}}
                            <li><a href="javascript:void(0);" data-value="{{this}}">{{this}}</a></li>
                            {{/each}}
                            {{/if}}
                        </ul>
                    </div>
                </li>

                <li class="submit">
                    <button type="button" class="btn btn-danger" id="MapSubmit">肯定</button>
                </li>
            </ul>
        </script>

    </div>
<!--百度地圖API-->

    <div id="map"></div>
    <div id="Div_MapExmple" class="MapExmple">

    </div>
</div>
<!--二級地區下拉列表模板-->
<script id="test" type="text/x-handlebars-template">

    <label class="dropdown-label">區域：</label>
    <div class="dropdown-group btn-group">
        <button type="button" id="secondareacode" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-id="area" data-name="{{SecondAreas.[0].AreaName}}" data-code="{{SecondAreas.[0].AreaCode}}" data-grade="{{SecondAreas.[0].AreaGrade}}">
            {{SecondAreas.[0].AreaName}}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            {{#if SecondAreas}}
            {{#each SecondAreas}}
            <li><a href="javascript:void(0);" data-name="{{this.AreaName}}" data-code="{{this.AreaCode}}" data-grade="{{this.AreaGrade}}">{{this.AreaName}}</a></li>
            {{/each}}
            {{/if}}
        </ul>
    </div>

</script>

上面<script id="test" type="text/x-handlebars-template">裏面是handlebars的模板頁面，地圖主要是在 <div id="map"></div>裏面加載的。java

js代碼jquery

<script>
     //輪廓線
    var OverlaysList = [];
    var map;
    //地圖div要給它一個初始的寬高 不然加載不出來 寫在頁面結構樣式裏便可。
    var div = document.getElementById('map');
    div.style.width = "100%";
    div.style.height = "750px";
    map = new BMap.Map("map");
     // 建立地圖實例
    map.centerAndZoom("瀋陽市", 8);
    map.enableScrollWheelZoom(true);
     map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
    var overViewOpen = new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默認縮放平移控件
    ////三維 衛星 等git


    map.addControl(overViewOpen);
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
   //點聚合
   var markerClusterer = new BMapLib.MarkerClusterer(map);
  $(function () {
        //此處是handlebars加載上方下拉框能夠跳過不看
         var data = null;
        var source = $("#DropdownTemplate").html();
        var template = Handlebars.compile(source);
        data = GetDefalutData() 
        //獲取下拉菜單那部分的模板
        var html = template(data);
        $("#DropdownBar").html(html);
        //給二級地區加載下拉選項
        var source1 = $("#test").html();
        var template1 = Handlebars.compile(source1);
        var html1 = template1({ SecondAreas: data.SecondAreas });
        $("#second-area").html(html1);
        
        //獲取地圖數據 並展現在百度地圖上
        //獲取數據
        var mapdata = GetMapDatas("xj06", "所有", $("#time").attr("data-value"), "學校分佈", null).data;
        initmap(mapdata, "瀋陽", 8);
       
        //畫輪廓線
        getBoundary("遼寧省");
        $("#MapSubmit").click(function(){
          提交按鈕點擊事件
      })
     
  })數據庫

     function initmap(mapdata, city, size) {
        map.centerAndZoom(city, size);
        markerClusterer.clearMarkers()
        var myIconblue = new BMap.Icon("@Url.Content("~/Resources/baiduMapstatic/img/markers_new2_4ab0bc5.png")", new BMap.Size(25, 38), { anchor: new BMap.Size(12, 38), imageOffset: new BMap.Size(-225, 0 - 222) });
        var myIconred = new BMap.Icon("@Url.Content("~/Resources/baiduMapstatic/img/markers_new2_4ab0bc5.png")", new BMap.Size(25, 38), { anchor: new BMap.Size(12, 38), imageOffset: new BMap.Size(-225, -184) });api

        for (; i < MAX; i++) {
            //這裏調用後臺的數據並展現
            pt = new BMap.Point(mapdata[i].Longitude, mapdata[i].Latitude);
            var marker;
            //根據限制條件判斷應該加載的圖標async


            if (mapdata[i].SchoolType.indexOf("小學") > -1) {
                    marker = new BMap.Marker(pt, { icon: myIconblue });
            } else {
                    marker = new BMap.Marker(pt, { icon: myIconred });
            }
            marker.customData = mapdata[i].SchoolCode;
            marker.addEventListener("click", function () { { attribute(this) } }, false)
            markers.push(marker);
        }
        markerClusterer.addMarkers(markers);
      
    }
     function attribute(e) {
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var _url = '/SchoolDistr/GetSchoolInfo';
        var Time = $("#time").attr("data-value");
        var CategStandard = $("#CategStandard").attr("data-value");
        var Indicator = $("#Indicator").attr("data-value");
        var _data = new SchoolInfoClass(e.customData, null, null, Time, null, CategStandard, Indicator);
        var _async = false;
        var areas = null;
        var schoolinfo = PostRequest(_url, _data, _async).data
        var infocontent = "<p>學校名稱:" + schoolinfo.SchoolName + "</p><p>學校主管部門:" + schoolinfo.Schooldep + "</p></p>學校地址:" + schoolinfo.Address + "</p>";
        if (schoolinfo.IndicatorsList != null) {
            for (var i = 0; i < schoolinfo.IndicatorsList.length; i++) {
                infocontent += "<p>" + schoolinfo.IndicatorsList[i].IndicatorTime + schoolinfo.IndicatorsList[i].IndicatorName + ":" + schoolinfo.IndicatorsList[i].IndicatorData + schoolinfo.IndicatorsList[i].IndicatorUnit + "</p>";
            }
        }
        var searchInfoWindow = null;
        ////獲取起始點到終點的駕車距離
        var output = "到縣城(或城市行政中心)距離:";
        var searchComplete = function (results) {
            if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = results.getPlan(0);
                output += plan.getDistance(true) + "\n 駕車須要:";
                output += plan.getDuration(true);
                infocontent += "<p>" + output + "</p>";
                // return;
            }
            var content = '<div  style="margin:0;line-height:20px;padding:2px;">' + infocontent + '</div>';
            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title: "詳細信息",      //標題
                width: 300,             //寬度
                panel: "routeResult",         //檢索結果面板
                enableAutoPan: true,
                enableMessage: false,
                enableSendToPhone: false,
                searchTypes: [
                    //BMAPLIB_TAB_FROM_HERE //從這裏出發
                ]
            });
            searchInfoWindow.open(point)
        }
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: { map: map, autoViewport: false },//autoViewport: false
            BMAP_HIGHLIGHT_ROUTE: false,
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {
                transit.disableAutoViewport()
                transit.clearResults();            }this

        });
        transit.search(point, schoolinfo.AreaConutry);//schoolinfo.AreaConutry
    }
    function ClearOverlays(OverlaysList) {
        OverlaysList.forEach(function (item) {
            map.removeOverlay(item);
        })
    }
    //將地區名傳入便可 好比遼寧省；瀋陽市;大連市；須要注意的是百度地圖支持你直接傳遞地名可是遇到同名的時候會加載不出來，須要把省市區寫詳細。
    function getBoundary(item) {
        if (OverlaysList.length > 0) {
            ClearOverlays(OverlaysList);
        }
        var bdary = new BMap.Boundary();
        bdary.get(item, function (rs) {
            var count = rs.boundaries.length; //行政區域的點有多少個
            if (count == 0) {
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                let ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000", fillColor: "rgba(255, 255, 255, 0.00)",strokeOpacity: 0.3  }); //創建多邊形覆蓋物
                map.addOverlay(ply);  //添加覆蓋物
                OverlaysList.push(ply);
                pointArray = pointArray.concat(ply.getPath());
            }
        });
    }
function GetMapDatas(AreaCode, SchoolGrade, Time, CategStandard, Indicator){}
function GetSecondArea(event){}
function GetDefalutData(){}
</script>

js代碼

後臺獲取數據的方法沒有寫詳細，學校經緯度信息和具體信息都是從數據庫裏面直接獲取的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程