動態更新熱力圖(純前端實現,效率不是很高,適合小數據量)

//創建查詢任務並設置查詢條件
        var query = new Query();
        //此鏈接地址爲發佈的管線動態服務地址
        var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/gx_test5/MapServer/0")
        query.where ="DJ ='A'"; 
        query.outSpatialReference = {wkid:3857}; 
        query.returnGeometry = true;
        query.outFields = ["*"];
        //存放要素集合
        var graphics_test=[];
        //執行查詢並將查詢符合條件的線要素轉換成點要素
        queryTask.execute(query, function(eve){
            var features_test=eve.features;
            for(var i=0;i<features_test.length;i++){
                var polyline_test=features_test[i].geometry;
                for(var j=0;j<polyline_test.paths.length;j++){
                   var pointarr= polyline_test.paths[j];
                    for(var w=0;w<pointarr.length;w++){
                        var point_test=new Point(pointarr[w][0], pointarr[w][1], new SpatialReference({ wkid: 3857 }));
                        console.log(point_test);
                        var graphic_test=new Graphic(point_test,sms);
                        graphics_test.push(graphic_test);
                        gralayer.add(graphic_test);
                    }
                  
                }
            
            }         
        });
        //默認設置
        var layerDefinition = {
            "geometryType": "esriGeometryPoint",
            "fields": [{
              "name": "ID",
              "type": "esriFieldTypeInteger",
              "alias": "ID"
            }]
          }
          var featureCollection = {
            layerDefinition: layerDefinition,
            featureSet: null
          };
          //創建要素服務圖層
          var featureLayer_test = new FeatureLayer(featureCollection, {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ["*"],
            opacity: 1
          });
          //設置要素服務對應的要素集
          featureLayer_test.graphics=graphics_test;
         //創建熱力圖渲染器並對要素圖層設置
         var heatmapRenderer =new HeatmapRenderer({ 
            colors: ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"],
            blurRadius: 8,
            maxPixelIntensity: 120,
            minPixelIntensity: 10
            });
        featureLayer_test.setRenderer(heatmapRenderer);
        //將圖層添加到地圖上
        map.addLayers([baselayer,featureLayer_test]);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章