arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
2023-09-11 14:19:51 时间
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 4.x 的好素材。
参照 arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果基础上,实现散点图效果,效果图如下:
- 散点图数据源
var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, …… {name: '武汉', value: 273}, {name: '大庆', value: 279} ]; var geoCoordMap = { '海门': [121.15, 31.89], '鄂尔多斯': [109.781327, 39.608266], …… '武汉': [114.31, 30.52], '大庆': [125.03, 46.58] };
- html 页面初始化调用
var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var color = ['#a6c84c', '#ffa022', '#46bee9']; var series = [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'arcgis', data: convertData(data), symbolSize: function (val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: 'yellow' } } },
……
更多的详情见小专栏文章:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- fastclick.js移动端WEB开发,click,touch,tap事件浅析
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- 【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程(下)
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多线程(上)
- 当当网新用户注册界面——JS代码
- 当当网上书店头部和尾部——JS源码
- 购物车的功能——JS源码
- JS插件之——bootstrap-suggest.js
- 《Ext JS 4 First Look》翻译之二:全新的数据包
- nginx js、css多个请求合并为一个请求(concat模块)
- 实践一些js中的prototype, __proto__, constructor
- [Node.js] Mock an API for Local Development in React with Mirage JS
- js中return的作用及用法
- Atitit.js获取上传文件全路径
- 原生js实现随机验证码HTMl-JS
- three.js(JS 三维模型库)介绍和入门
- JS实现记住用户密码
- 【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多进程(上)
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- JS中arr.forEach()如何跳出循环
- JS中的!=、== 、!==、===的用法和区别。
- JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
- 【JS高级】js面向对象三大特性之多态_07