前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 4.x 的好素材。

内容概览

1.基于 arcgis api 4.x for js 聚合效果
2.源代码 demo 下载

本篇实现 arcgis api 4.x for js 聚合效果功能,效果图如下:


  • 聚合数据源
[
{
"toiletId": 1000000,
"name": "Ocean block",
"postcode": "6054",
"facilityType": "Underwater",
"isOpen": "AllHours",
"x": -158.036,
"y": -9.0058
},
……
{
"toiletId": 1000000,
"name": "Ocean block",
"postcode": "6054",
"facilityType": "Underwater",
"isOpen": "AllHours",
"x": -158.036,
"y": -9.0058
}
]
  • html 页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>arcgis api 4.x for js 聚合效果图</title> <link href="//fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: abel, Arial, Calibri;
overflow: hidden;
} #container, .view {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
……

更多的详情见小专栏文章GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

arcgis api 4.x for js 聚合效果图(附源码下载)的更多相关文章

  1. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. nginx一:安装和基本应用

    Nginx: 目录 Nginx:... 1 NGINX简介和安装... 1 网站... 1 全称... 2 二次开发版... 2 Nginx的特性... 2 基本功能... 2 web服务相关的功能. ...

  2. Spring项目中优雅的异常处理

    前言 如今的Java Web项目多是以 MVC 模式构建的,通常我们都是将 Service 层的异常统一的抛出,包括自定义异常和一些意外出现的异常,以便进行事务回滚,而 Service 的调用者 Co ...

  3. ip地址计算

    1.多少个子网? 2x个,其中x为被遮盖(取值为1)的位数.例如,在11000000(这个值是子网掩码的最后几位,例如,mask=18)中,取值为1的位数为2,因此子网数位22=4个: 2.每个子网包 ...

  4. 深入浅出Spring(三)

    我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming),即面向切面编程. 1.OOP回顾 在介绍AOP之 ...

  5. 最小生成树(Kruskal)

    题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...

  6. 堆模板(STL版)

    题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 输出该小根堆内的最小数 操作3: 3 删除该小根堆内的最小数 输入输出格式 输入格式: ...

  7. c 程序之 最大公约数 和 最小公倍数

    1.最大公约数     30  10  -> 10 #include<stdio.h> /* 求最大公约数 辗转相减法 36 --16 4 */ int main(){ int a, ...

  8. 点击按钮每次都能实现图片的旋转和切换(swift)

    效果如图: 代码如下: // // ViewController.swift // TwoSidedView // // Created by mayl on 2017/12/14. // Copyr ...

  9. js-Date()对象,get/setFullYear(),getDay()编程练习

    啥也不说!看代码 主要注意:getday()方法中原理!!! <!DOCTYPE html> <html lang="en"> <head> & ...

  10. CocoaPods 详解之----更新篇

    CocoaPods 大概是 2011 年出现的开源组件管理工具(目前已支持 Objective-C 和 Swift),近年来普及率越来越高,几乎已是所有 Cocoa 开源项目的标配.另外,很多大点的团 ...