欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript如何写热点图_javascript技巧

程序员文章站 2022-04-15 10:36:14
...
在gis中,你如果用js来写热点图 不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务,(注:热点图可以借助服务的形式发布,arcgis for javascript有相应的api支持的),这个时候就比较麻烦了,首先说明下热点图是啥?

热点图是以点的形式展示,通过补全周边变化颜色也会相应的调整渐变,类似于足球某个人的运动范围那种,我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js

因为arcigs for javascript api 是以dojo为基础写的,所以加载类库方式以下


写了工具类去使用这个类库

/**
 * 管理热点图展示 关闭 这里默认以社区为单位 url可改 热点图需要在主页面加上热点 div层 类似map的div
 * 这个版本先以一个xml来展示 以后改为json的格式
 */
var HeatLayerManager = function()
{
 var map;

 var heatLayer;

 var graphicLayer;

 var polygonTemp;

 var queryVo= new QueryVO();

 var ajaxTool;

 var locateParameter = new LocateParameter();

 var symbolTool;

 var isMouseInfo = true;

 //查询社区的url来覆盖 人口信息
 var paramBackFun;
 function renderQuery(queryVo1,polygon,roundFlag,paramBackFun1)
 {
  paramBackFun = paramBackFun1;
  var layerName = queryVo1.layerName;
  graphicLayer.clear();
  var url = locateParameter.getUrl(layerName);
  if(url != "")
  {
   var querytask = new esri.tasks.QueryTask(url);
   var query = new esri.tasks.Query();

   if(layerName != "shi")
   {
    query.geometry = polygon;
   }
   else
   {
    query.where = "FID >= 0"
   }
   query.returnGeometry = true;
   query.outSpatialReference = map.spatialReference;
   if(roundFlag == "false")
   {
    query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
   }
   query.outFields = ["*"];
   querytask.execute(query, handle);
  }
 }



 function handle(idResults)
 {
  graphicLayer.clear();

  var param = new Object();
  param.codearr = [];
  for (var i = 0, il = idResults.features.length; i 

以上就是为大家分享的如何实现热点图的关键代码,希望对大家的学习有所帮助。