更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)
2023-09-11 14:19:51 时间
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 热力图效果,构造数据源不依赖地图服务
- 基于 heatmap.js 实现热力图
- 源代码 demo 下载
前面我写过一篇文章,介绍如何实现 arcgis api 的热力图效果,但是依赖 arcgis server 发布的地图服务来获取热力图的数据源。实际应用中,很多业务数据来源数据库,并不一定是从地图服务来获取的。所以,本篇文章从两个不同的角度来优化一下热力图,谈谈不一样的实现热力图思路。
- arcgis api 的 FeatureLayer 构造数据源不同之处来实现热力图
构造 FeatureLayer 的数据源是通过自己模拟数据或者从数据库读取数据
首先,构造 FeatureSet:
var featureSet = new esri.tasks.FeatureSet(dz); var layerDefinition = { "geometryType": "esriGeometryPoint", "fields": [ { "name": "勘探深度", "type": "esriFieldTypeDouble", "alias": "勘探深度" }, { "name": "孔口高程", "type": "esriFieldTypeDouble", "alias": "孔口高程" }, { "name": "X", "type": "esriFieldTypeDouble", "alias": "X" }, { "name": "Y", "type": "esriFieldTypeDouble", "alias": "Y" }, { "name": "水位高程", "type": "esriFieldTypeDouble", "alias": "水位高程" } ] } var featureCollection = { layerDefinition: layerDefinition, featureSet: featureSet };
实现效果如下:
相关文章
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
- js导出Excel弹出对话框
- baguetteBox.js响应式画廊插件(纯JS)
- 购物车的功能——JS源码
- 【JS基础回顾】Array对象及其常用属性以及方法
- JS魔法堂:剖析源码理解Promises/A规范
- Underscore.js使用
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- js小案例:使用location.href自动跳转页面
- Cloud for Customer ApplicationStarter.js和fQuickLogin
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- 【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程(下)
- js 冒泡排序、快速排序、去重、查找字符串最多值(面试常有)
- Vue2.js:TypeScript 支持Prop属性类型标注
- Node.js学习笔记(三)——Node.js开发Web后台服务
- JS中let和var的区别
- js中数组对象去重的方法
- js 随机时间
- 手把手教你用js实现手机通讯录功能(附源码)
- 随笔-使用d8将JS源码编译为字节码,及字节码指令解读
- js判断手机端打开还是PC端