菜单

javascript如何写热点图_javascript本事_脚本之家

2020年3月8日 - 首页

在gis中,你借使用js来写热门图
不凭仗后台怎么搞,as的话比较轻巧有关照的类库以致官方都有。何况用js不依附arcgis公布rest服务,(注:火热图能够信赖服务的样式发表,arcgis
for
javascript有照管的api帮忙的),那时候就比较费心了,首先表明下火热图是什么?

热点图是以点的款式显示,通过补全周围转移颜色也会相应的调动渐变,相像于足球某人的移动范围这种,小编找了下有个heapmap能够达成heapmap.js和heapmap-arcgis.js

因为arcigs for javascript api 是以dojo为底子写的,所以加载类库格局以下

 var djConfig = { parseOnLoad: true };   

写了工具类去行使那一个类库

/** * 管理热点图展示 关闭 这里默认以社区为单位 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; if { var querytask = new esri.tasks.QueryTask; var query = new esri.tasks.Query(); if { query.geometry = polygon; } else { query.where = "FID >= 0" } query.returnGeometry = true; query.outSpatialReference = map.spatialReference; if { query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS; } query.outFields = ["*"]; querytask.execute; } } function handle { graphicLayer.clear(); var param = new Object(); param.codearr = []; for (var i = 0, il = idResults.features.length; i < il; i++) { var idResult = idResults.features[i]; var polygon = idResult.geometry; var gra = new esri.Graphic; var attributes = idResult.attributes; param.codearr[i] = attributes[locateParameter.getCodeName]; var graattribute = new Object(); graattribute["code"] = attributes[locateParameter.getCodeName]; gra.setAttributes; gra.setSymbol(symbolTool.getSymbol; graphicLayer.add; } paramBackFun; } //查询java后台 组织json参数 function ajaxQuery { param.startDate = queryVo.startDate; param.endDate = queryVo.endDate; param.layerName = queryVo.layerName; param.tjfs = queryVo.tjfs; var str = JSON.stringify; //alert("ajaxQuery-param: "+str); //--------------------------------------测试环境用 ajaxTool.getLiuDongData1; //------------------------------------- //--------------------------------------真实环境用 // ajaxTool.getLiuDongData; //------------------------------------- } function ajaxBack { //组装 map对象便于遍历graphic if{ alert; var arr = obj.codearr; }else{ var arr = obj.codearr; var mapobj = new Object(); for(var i = 0, l = arr.length; i < l; i++) { var arrobj = arr[i]; mapobj[arrobj.CODE] = arrobj; //alert("ajaxBack: "+arrobj.CODE); } //--------------------------------------真实环境用 //var graarr = graphicLayer.graphics; //var dataarr = []; //for(var j = 0, m = graarr.length; j < m; j++) //{ // var gra = graarr[j]; // var codeValue = gra.attributes["code"]; // // 暂时码值转换 // var codeobj; // if("shi"==queryVo.layerName){ // //alert(changeAreaCode; // codeobj = mapobj[changeAreaCode]; // }else{ // codeobj = mapobj[codeValue]; // } // //alert("codeValue: "+codeValue); // if{ // var pcount = codeobj.PCOUNT; // var point = gra.geometry.getCentroid(); // var feobj = { // attributes: {count:Number}, // geometry: { // spatialReference: map.spatialReference, // type: "point", // x: point.x, // y: point.y // // } // } // dataarr.push; // } // gra.attributes["codeVaue"] = codeobj; //} //------------------------------------- //--------------------------------------测试环境用 var graarr = graphicLayer.graphics; var dataarr = []; var pcountnum = 0.1; for(var j = 0, m = graarr.length; j < m; j++) { var gra = graarr[j]; var codeValue = gra.attributes["code"]; var codeobj = mapobj["440304008001"]; var pcount = pcountnum; var point = gra.geometry.getCentroid(); var feobj = { attributes: {count:Number}, geometry: { spatialReference: map.spatialReference, type: "point", x: point.x, y: point.y } } if { num1 = 0.01 } pcountnum = pcountnum + num1; dataarr.push; gra.attributes["codeVaue"] = codeobj; } //------------------------------------- heatLayer.setData; } } /** * 外界返回鼠标移动查询填充图层 * @returns {*} */ this.getHeatLocateLayer = function() { return graphicLayer; } /** * 外界返回热点图层 * @returns {*} */ this.getHeatlayer = function() { return heatLayer; } /** * 初始化热点图 * @param healayerdiv 主页heatlayer div的id * @param map1 */ this.init = function initHeatLayer { map = map1; heatLayer = new HeatmapLayer({ config: { "useLocalMaximum": true, "radius": 40, "gradient": { 0.45: "rgb", 0.55: "rgb", 0.65: "rgb", 0.95: "rgb", 1.00: "rgb" } }, "map": map, "domNodeId": healayerdiv, "opacity": 0.85 }); graphicLayer = new esri.layers.GraphicsLayer(); map.addLayer; map.addLayer; ajaxTool = new AjaxTool(); symbolTool = new SymbolTool; } this.ajaxBackFun= function { ajaxBack; } /** * 根据查询数据渲染热点图 * 现在可能是固定死的xml,下次 转json 可能要有参数 以后定 */ this.addRender = function { addRenderFun(queryVo1,polygon,ajaxQuery) } //简化方法类 增加回调 function addRenderFun(queryVo1,polygon,paramBackFun1) { polygonTemp = polygon; queryVo = queryVo1; renderQuery(queryVo,polygon,"false",paramBackFun1); } /** * * @param queryVo1 * @param polygon * @param paramBackFun1 */ this.addRenderCallBack = function(queryVo1,polygon,paramBackFun1) { addRenderFun(queryVo1, polygon, paramBackFun1); } /** * 清除热点图的数据 */ this.clearHeatLayer = function() { heatLayer.clearData(); } function changeAreaCode{ var resuCode=""; var areaCode = ["440305","440326","440306","440309","440308", "440304","440303","440327","440317","440307"]; var mapCode = ["440305002","440306007","440306001","440306012","440308001", "440304003","440303005","440307012","440307009","440307006"]; for(i=0;i以上就是为大家分享的如何实现热点图的关键代码,希望对大家的学习有所帮助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图