arcgis for javaScript

2个课程：https://ke.qq.com/course/3854576?tuin=1d7d9cb4

https://ke.qq.com/course/2993375?tuin=1d7d9cb4

arcgis api for javascript 点聚合 https://blog.csdn.net/qq_36735409/article/details/79668760

​ https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster-filter-slider/

全国GeoJSON数据（县级）https://malagis.com/gis-data-national-geojson-data-package-download.html (搭配GeoJsonLayer 在地图中 以图层的形式描边)

自定义--离散GPS坐标点--全国

本地：http://localhost:8080/arcgis_js_api/3.28/init.js

笔记整理--> 离线下载，API 使用，离线部署，创建一个地图，几个常用概念（关于图形的说明），点线面，图层，图层中添加图形，鼠标事件，热力，轨迹，行政区域规划，其他（小部件，）

effect结合图层的混合效果BlendMode实现遮罩 ： https://developers.arcgis.com/javascript/latest/sample-code/effect-blur-shadow/

整理思路： 按理，用 xjb app 开发的新可视化，结合 js分公司 监造

​ 定好 图层切换（因为这个设计到 空间查询，如果定义的图层过多，明显不合理，也不方便）

​ 最好总结一下空间查询，，js分公司这一套 写法，是通过遍历每个图层的写法，，没有 自带的空间查询 好

js分公司 坐标转换changeGpsToBaidu

目前存在问题：

• 坐标系不统一，系统用到的卫星图 用的是arcgis官网提供的，和国内的坐标系有所偏差
• 我们系统用到的GPS坐标系 和卫星图对上，这样和 中国 地形图 存在偏差
• GeoJSON中国 行政区域规划 全国坐标.json
• 开发中用到的2个地图瓦片服务

http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServerhttps://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer

公司： 谷歌地图：31.9344120986,117.2649120808 ----> 和 腾讯和高德坐标偏移很小 （手机获取到的GPS坐标就是这个坐标系） 百度地图：31.9405040000,117.2714210000 腾讯高德：31.9344119085,117.2649256012 图吧地图：31.9378224285,117.2620342812 谷歌地球：31.9364424285,117.2594242812 --->GPS 经纬度(奥维地图采集的也是) 北纬N31°56′11.19″ 东经E117°15′33.93″ 手机用的GPS坐标，是WGS84坐标系的

卫星图 和手机采集的坐标都是WGS84坐标系

WGS84坐标系：地球坐标系，国际通用坐标系 ---GPS GCJ02坐标系：火星坐标系，WGS84坐标系加密后的坐标系；Google国内地图、高德、天地图、QQ地图、腾讯地图 使用 BD09坐标系：百度坐标系，GCJ02坐标系加密后的坐标系 注： 谷歌地图API，高德地图API，腾讯地图API上取到的，都是GCJ-02坐标，他们三家都是通用的 百度：BD-09坐标 谷歌地球，google earth上取到的，是GPS坐标。而且是度分秒形式的经纬度坐标。在国内不允许使用。必须转换为GCJ-02坐标

1.相关说明

1.1相关说明

• 官网：https://developers.arcgis.com/javascript/latest/

• 下载离线api: https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

• 3D案例： https://www.cnblogs.com/MSspblxh/p/6273998.html

• 一些案例介绍：https://blog.csdn.net/aodao8891/article/details/101317649

• 实现热力图：https://www.giserdqy.com/secdev/arcgis-api-for-js-docs/11784/

• arcgis4.x 中1.10版本线路有问题，会被地形遮挡

• arcgis3.x 不会出现跨域问题，但是4.x存在，会导致一些功能不能正常加载出来（体现在小部件）

• 优先推荐使用4.x 图形可以添加在图层中，可以快速实现对某一类图形的切换。同时4.x支持

• https://blog.csdn.net/yy284872497/article/details/78878435

• https://tourist17846.cn/blog/frontend/gis/arcgis-api-for-js-4x.html#_1-获取图层

• https://blog.csdn.net/lovecarpenter/article/details/52662514

• https://github.com/GISerWang/ArcGIS-API-For-Javacsript (教程比较完善，已下载)

• arcgis3.x 空间查询 https://blog.csdn.net/weixin_30826095/article/details/98809689

• https://blog.csdn.net/yy284872497/article/details/78857864 加载天地图 顺便关注一下这个人的博客，讲到了热力图渲染 ---待总结

• arcgis 使用天地图 https://my.oschina.net/huanglii/blog/884284 https://blog.csdn.net/wml00000/article/details/89053729

• 完整教程 ---找时间学习一下，笔记完善

• 总结一下 自定义弹窗 自定义弹窗

• http://www.rivermap.cn/docs/show-1254.html 发布服务

• 水经注万能地图下载器 -------- 了解

• 墨卡托坐标与其他坐标系之间的转换

• https://cnodejs.org/topic/564c0a27e4766d487f6fe38d

• 天地图 http://lbs.tianditu.gov.cn/docs/#/

• https://blog.csdn.net/yy284872497/article/details/91355206

• https://so.csdn.net/so/search/blog?q=arcgis api  功能篇&t=blog&p=1&s=0&tm=0&lv=-1&ft=0&l=&u=

• http://www.bubuko.com/infodetail-3033472.html 天地图，，待测试

• https://xuqwblog.blog.csdn.net/article/details/98967485

  ​

  https://blog.csdn.net/smss007/article/details/97136266

  • 学习线路 D:\java编程\地图\可视化地图\WebGIS学习资源推荐（包含学习路线、软件和数据资源）.md

2.下载离线数据包

image-20201112122642689

image-20201112123125226

选择自己需要的版本，下载 离线api和sdk

3.离线部署

离线部署案例：https://www.cnblogs.com/giserhome/p/10617738.html

3.1下载放到tomcat中可有新建一个arcgis_js_api文件夹

文档对应访问的是 arcgis_js_v328_sdk/arcgis_js_v328_sdk/index.html (例：http://localhost:8080/arcgis_js_api/arcgis_js_v415_sdk/index.html)

image-20201112145630506

3.2 配置 init.js 文件，修改里面的路径

image-20201112135440147

\arcgis_js_api\library\4.10\init.js 网上有些人说 ：可以 路径无需包含http://，但是没实际测试过

init.js 文件里面，全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，然后替换成 api 在本地机器上的部署路径，我的配置如下：http://localhost/arcgis_js_api/library/4.10/dojo

3.3配置 dojo.js 文件，修改里面的路径

\arcgis_js_api\library\4.10\dojo\dojo.js ；

全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，然后替换成 api 在本地机器上的部署路径，我的配置如下：http://localhost/arcgis_js_api/library/4.10/dojo

注：最好把连接改为参数，方便后期修改

参考：https://blog.csdn.net/happy81997/article/details/105552047

把baseUrl后面的地址全部干掉，换成mybaseUrl，如下图：

将参数放到最前头，设置一个全局变量，可以方便修改

4. 测试离线部署api是否成功 （4.x案例）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>Intro to MapView - Create a 2D map - 4.10</title>
        <style>
        html,
        body,
        #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        }
        </style>

        <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css">
        <script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script>

        <script>
        require([
        "esri/Map",
        "esri/views/MapView"
        ], function(Map, MapView) {

        var map = new Map({
        basemap: "streets"
        });

        var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
        });

        });
        </script>
    </head>

    <body>
    	<div id="viewDiv"></div>
    </body>
</html>

5.基本使用

常用的几个概念介绍

参考：https://zhuanlan.zhihu.com/p/33074260

1.View

View即视图，提供了查看和与地图组件交互的方法。地图仅仅是一个容器，存储了包含在基础层和操作层中的地理信息，而视图呈现地图及其各个层，使它们对用户可见。View是基类，它有两个子类，代表两种类型的视图：MapView和SceneView。

2.MapView

MapView显示一个二维视图的地图实例，MapView必须建立和参考至少两个对象：一个地图实例和一个DOM元素，每个分别设置在映射和容器属性中。

3. SceneView

SceneView显示3D查看地图或webscene实例，渲染3D技术采用的是WebGL。SceneView必须有有效的地图实例和一个DOM元素中的一个非零的高度和宽度来渲染。

4.Map

map类包含用于存储、管理和覆盖二维和三维视图共同的图层的属性和方法。图层可以添加和删除掉，但通过一个视图（在二维查看数据）或场景视图中能（在3D查看数据）。因此，地图的实例是一个简单的容器保存层，而视图显示与地图的层和基相互作用的方式。Map类有两个子类：WebMap以及WebScene，分别对应二维视图MapView和三维视图SceneView。

5.Basemap

Basemap用于创建自定义底图。这些底图创建可以从自己服务器发布瓦片服务或者由第三方发布的瓦片服务。

6.图形（graphic） https://www.cnblogs.com/liao1992/p/13960189.html https://www.giserdqy.com/secdev/arcgis-api-for-js-docs/11771/

图形的构成由 图形(geometry) 和 样式(symbol)来组合的（其他属性:attrubutes和info template.）

attributes:属性字段值 geometry:定义一个几何图形 infoTemplate:infoWindow中显示的内容 symbol：图形的样式 visible:图形的可见性

6.1.图形(geometry) 是用来描述几何的构成形状、结构、位置。可以是point、multipoint、polyline、polygon

6.2.样式(symbol) 使用来描述几何的颜色、透明度、外观 等等 使用案例

​ geometry是point、multipoint的symbol可以是marker symbol，polyline的symbol可以是line symbol、polygon的symbol可以是fill symbol。

​ 图片：PictureMarkerSymbol

​ 点：SimpleMarkerSymbol

6.3.attributes 是描述graphic的名称-值对.就是在弹窗详情和选中时用到的 图形的属性值。其中Query.outFields可以限制任务返回attributes。

6.4.info template定义当graphic被点击时的弹窗

6.5.实例化的方式

​ new Graphic(geometry,symbol,attributes,infoTemplate)

​ new Grpahic(json)

6.6其他属性说明

• 隐藏显示 ：show() ，hide() ，判断 用 graphic.visible。

graphic选中后闪烁

let temp = 0;
let handler = setInterval(function() {
    if (temp === 6) {
		if (handler) {
			if (!graphic.visible){
				graphic.show(); 
                //graphic.visible=false;// 不使用，因为直接修改 不能生效，需要调用 draw()重新绘制图形
			}
			clearInterval(handler);
			handler = null;
		}
		return;
    }
    if (graphic.visible){
		graphic.hide();
	}else{
		graphic.show();
	}
    temp++;
}, 500);

• attr(name,value):修改属性值
• draw():绘制图形 (针对 某些时候 修改属性但是 不成功，需要调用 graphic.draw()。正常使用arcgis提供的 方法例如 show(),hide(),set方法等，可以直接 修改成功。
• getContent():返回内容的值
• getInfoTemplate():返回信息模板
• getLayer():返回一个图层的
• getNode():返回节点用于绘制图层
• getNodes():返回多个节点
• getShape():返回一个esri图形
• etATitle():获取标题
• setAttributes(attributes):定义图形的属性
• setGeometry(geometry):定义几何图形
• setInfoTemplate(infoTempate):定义一个infoWindow
• setSymbol(symbol):设置图形的象征
• toJson():将对象转换为json标的是的gis服务器

7.ArcGIS API for JavaScript 屏幕坐标转换

require(["esri/map"], function(Map) { /* code goes here */ });

//地理坐标转换屏幕坐标
map.toScreen(graphic.geometry)

//屏幕坐标转换为地理坐标
toMap(screenPoint)

5.1基本属性

// 3.x  地图初始化完成 
map.on("load", function () {
});
// 4.x  地图初始化完成 
view.when(function () {

});


//1.获取图层
// 3.x
map.getLayer("layerId")
// 4.x
map.findLayerById("layerId")
//2.移除图层
// 3.x
map.removeLayer(map.getLayer("layerId"))
// 4.x
map.remove(map.findLayerById("layerId"))

//添加图层
const GeometryObject = {
        geometry: geometry,// geometry(point)对象
        symbol: symbol// symbol样式，可以是线、图片等
    }

    const layer = new Graphic(GeometryObject);
    map.add(layer);
    
//定位到指定位置，并缩放图层    
//3.x 
if(geometry.type=="polygon"){// 多边形
	this.map.setExtent(geometry.getExtent().expand(1.5));  //定位并放大1.5倍
}
if(geometry.type=="point"){
    var cpoint=new esri.geometry.Point();
    cpoint.x=geometry.x;
    cpoint.y=geometry.y;
    cpoint.spatialReference=geometry.spatialReference;
    //this.map.centerAt(cpoint); 
    this.map.centerAndZoom(cpoint,8);
}

//4.x
    

5.2 添加点、线、面

场景1；添加一个多边形 polygon （用的是4.xv 3D地图的创建方法，指定了高程）

//1. polygon 类型主要用来表达多边形的形状 （用多个定点组成围成一个闭合的形状）
//3D polygon rings with m-values (note that the second ring does not have m-values defined for it)
const rings = [
 [  
  [113.02396812214977,22.86899107937552,10],// 头尾相同，表示一个闭合的图形
  [113.02454383754288,22.869088565155696,10],
  [113.02460999571629,22.868517852128182,10],
  [113.02403712541228,22.868427125332076,10]  
 ]
];

const polygon = new Polygon({
  hasZ: true,
  hasM: true,
  rings: rings,
  spatialReference: { wkid: 4326 }
});

// 2.SimpleFillSymbol类 创建一个样式(symbol)来形容这个几何的样子
var symbol = {
  // 表示类型
  type: "simple-fill", 
  // 表示颜色 黑色
  color: [ 0, 0, 0, 0.9 ],
  // 表示填充类型 
  style: "solid",
  // 边线配置 白色的边框 宽度1
  outline: { 
    color: "white",
    width: 1
  }
};

//3.合并成为 几何(graphic)
var polylineGraphic = new Graphic({
  // 这里是图形
  geometry: polyline,
  // 这里是样式
  symbol: polylineSymbol,
  // 这个是属性 对象是一个json 是用来保存这个几何数据的
  attributes: {  }
});
// 4.将几何添加到地图中（ 几何是无法直接添加到地图中的，先将几何添加到layer中  然后将layer添加到map里）
var layer = new GraphcisLayer( { id: "唯一名称" } )
// 将几何添加到图层中
layer.add( graphic );
// 将图层添加到地图中
view.map.add( layer );

// 几何删除自己
graphic.layer.remove(graphic);
// 图层删除自己
view.map.remove(layer);
// 图层查询自己
view.map.findLayerById(id);

4.x 基本使用，添加点线面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to graphics | Sample | ArcGIS API for JavaScript 4.16</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function(
            Map,
            MapView,
            Graphic
        ) {
            var map = new Map({
                basemap: "hybrid"
            });

            var view = new MapView({
                center: [-80, 35],
                container: "viewDiv",
                map: map,
                zoom: 3
            });

            //首先创建一个点几何（这是泰坦尼克号的位置）
            var point = {
                type: "point",
                longitude: -49.97,
                latitude: 41.73
            };
            //创建用于绘制点的符号
            var markerSymbol = {
                type: "simple-marker",
                color: "#66ffff",
                outline: {
                    color: [255, 255, 255],
                    width: 2
                }
            };
            //创建图形并向其中添加几何图形和符号
            var pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol
            });



            //创建多段线图形
            var polyline = {
                type: "polyline",
                paths: [
                    [-111.3, 52.68],
                    [-98, 49.5],
                    [-93.94, 29.89]
                ]
            };
            //创建用于画线的符号
            var lineSymbol = {
                type: "simple-line",
                color: [226, 119, 40],
                width: 4
            };
            // 创建一个对象来存储与行相关的属性
            var lineAtt = {
                Name: "Keystone Pipeline",
                Owner: "TransCanada",
                Length: "3,456 km"
            };
            //创建一个新图形，并向其添加几何图形，符号和属性。您也可以在图形中添加一个简单的PopupTemplate。这使用户可以在单击图形时查看图形的属性。
            var polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: lineSymbol,
                attributes: lineAtt,
                popupTemplate: {
                    title: "{Name}",
                    content: [{
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "Name"
                        }, {
                            fieldsName: "Owner"
                        }, {
                            fieldsName: "Length"
                        }]
                    }]
                }
            });

            //创建多边形图形
            //创建多边形几何
            var polygon = {
                type: "polygon",
                rings: [
                    [-64.78, 32.3],
                    [-66.07, 18.45],
                    [-80.21, 25.78],
                    [-64.78, 32.3]
                ]
            };

            //创建用于渲染图形的符号
            var fillSymbol = {
                type: "simple-fill",
                color: [227, 139, 79, 0.8],
                outline: {
                    color: [255, 255, 255],
                    width: 1
                }
            };
            //将几何图形和符号添加到新图形
            var polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: fillSymbol
            });
            //将图形添加到视图的图形层
            view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

3.x 添加 图形

var gysGraphicsLayer=new GraphicsLayer({
        id:"gysGraphicsLayer",
        visible:true,
        className:'ceshi'
    });
    map.addLayer(gysGraphicsLayer);


//1.添加点
var point = new Point(Number(item.longitude),Number(item.latitude),sp);//sp最好空着，如果使用
var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 18, // 点的大小
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([242, 8, 8]), 2),// 外圈线的颜色和大小
    new Color([158.184,71,0.85]) // 点的颜色
    );
var pointAttributes = {name:item.supplierName,id:item.id , longitude:item.longitude,latitude:item.latitude};
var pointInfoTemplate = new InfoTemplate ("Geocoding Results");
var pointGraphic = new Graphic(point,markerSymbol,pointAttributes).setInfoTemplate (pointInfoTemplate);
map.graphics.add (pointGraphic);// 添加到地图中

//2. 添加 图片
var suppliersMarkerSymbol  =	{
    url: ctxStatic+"/map/arcgis3.x/images/ionic_001.png", // url
    w:20,h:20
};


var point = new Point(Number(item.longitude),Number(item.latitude),sp);//sp最好空着，如果使用
var pointAttributes = {name:item.supplierName,id:item.id , longitude:item.longitude,latitude:item.latitude};
var pointInfoTemplate = new InfoTemplate (item.supplierName);
var pointGraphic = new Graphic(point,pictureMarkerSymbol,pointAttributes).setInfoTemplate (pointInfoTemplate);
gysGraphicsLayer.add(pointGraphic);// 添加到图层中,比上面好处在于，能快速实现对 同类型下的 图形 控制（显示，隐藏）





///=========符号汇总（待完善）=======/////
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
//定义面符号
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new Color([255, 0, 0]));

5.3 简单一个案例 添加 图形化覆盖物

5.4 将覆盖物添加至图层，控制图层来 快速到达显示、隐藏效果

空间查询和属性查询

• 3.x 空间查询

• 4.x 空间查询

#

自定义弹窗

3.x 自定义弹窗

**待整理 **

5.5 小部件

5.5一些常用方法

5.10 热力图 3.x

• [3.x热力图](file:///D:/software/apache-tomcat-8.5.47/webapps/demo/3.x热力2.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>热力图</title>
    <link rel="stylesheet" type="text/css"
          href="http://localhost:8080/arcgis_js_api/3.28/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/3.28/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/3.28/init.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        var map;
        var featureLayer;
        require([
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/renderers/HeatmapRenderer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/Color"],
            function (Map, FeatureLayer, HeatmapRenderer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color) {
                map = new Map("map", {
                    basemap: "osm",
                    center: [106, 29],
                    zoom: 8
                });
                var geodata = [
                    {value: 800, pnt: [106, 29]},
                    {name: '酉阳县', value: 32, pnt: [108.8196, 28.8666]},
                    {name: '奉节县', value: 232, pnt: [109.3909, 30.9265]},
                    {name: '巫溪县', value: 354, pnt: [109.3359, 31.4813]},
                    {name: '开县', value: 87, pnt: [108.4131, 31.2561]},
                    {name: '彭水县', value: 87, pnt: [108.2043, 29.3994]},
                    {name: '云阳县', value: 364, pnt: [108.8306, 31.0089]},
                    {name: '万州区', value: 164, pnt: [108.3911, 30.6958]},
                    {name: '城口县', value: 61, pnt: [108.7756, 31.9098]},
                    {name: '江津区', value: 12, pnt: [106.2158, 28.9874]},
                    {name: '石柱县', value: 52, pnt: [108.2813, 30.1025]},
                    {name: '巫山县', value: 43, pnt: [109.8853, 31.1188]},
                    {name: '涪陵区', value: 94, pnt: [107.3364, 29.6796]},
                    {name: '丰都县', value: 57, pnt: [107.8418, 29.9048]},
                    {name: '武隆县', value: 124, pnt: [107.655, 29.35]},
                    {name: '南川区', value: 157, pnt: [107.1716, 29.1302]},
                    {name: '秀山县', value: 18, pnt: [109.0173, 28.5205]},
                    {name: '黔江区', value: 67, pnt: [108.7207, 29.4708]},
                    {name: '合川区', value: 84, pnt: [106.3257, 30.108]},
                    {name: '綦江县', value: 147, pnt: [106.6553, 28.8171]},
                    {name: '忠县', value: 184, pnt: [107.8967, 30.3223]},
                    {name: '梁平县', value: 214, pnt: [107.7429, 30.6519]},
                    {name: '巴南区', value: 244, pnt: [106.7322, 29.4214]},
                    {name: '潼南县', value: 268, pnt: [105.7764, 30.1135]},
                    {name: '永川区', value: 18, pnt: [105.8643, 29.2566]},
                    {name: '垫江县', value: 48, pnt: [107.4573, 30.2454]},
                    {name: '渝北区', value: 85, pnt: [106.7212, 29.8499]},
                    {name: '长寿区', value: 35, pnt: [107.1606, 29.9762]},
                    {name: '大足县', value: 249, pnt: [105.7544, 29.6136]},
                    {name: '铜梁县', value: 154, pnt: [106.0291, 29.8059]},
                    {name: '荣昌县', value: 257, pnt: [105.5127, 29.4708]},
                    {name: '璧山县', value: 95, pnt: [106.2048, 29.5807]},
                    {name: '北碚区', value: 108, pnt: [106.5674, 29.8883]},
                    {name: '万盛区', value: 204, pnt: [106.908, 28.9325]},
                    {name: '南岸区', value: 181, pnt: [106.6663, 29.5367]},
                    {name: '江北区', value: 192, pnt: [106.8311, 29.6191]},
                    {name: '双桥区', value: 50, pnt: [105.7874, 29.4928]},
                    {name: '渝中区', value: 10, pnt: [106.5344, 29.5477]}
                ];
                var features = [];
                var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 0.5), new Color([0, 0, 255, 1]));

                for (var i = 0; i < geodata.length; i++) {
                    var point = new esri.geometry.Point(geodata[i].pnt[0], geodata[i].pnt[1], new esri.SpatialReference({wkid: 4326}));

                    var graphic = new esri.Graphic(point, style1);
                    graphic.setAttributes({"FID": i, "name": geodata[i].name, "value": geodata[i].value});
                    features.push(graphic);
                }

                var featureSet = new esri.tasks.FeatureSet();
                featureSet.features = features;
                featureSet.geometryType = 'esriGeometryPoint';
                featureSet.fieldAliases = {
                    "FID": "FID",
                    "name": "name",
                    "value": "value"
                };
                featureSet.spatialReference = new esri.SpatialReference({wkid: 4326});
                var layerDefinition = {
                    "objectIdField": "FID",
                    "geometryType": "esriGeometryPoint",
                    "fields": [
                        {
                            "name": "FID",
                            "type": "esriFieldTypeOID",
                            "alias": "FID",
                            "sqlType": "sqlTypeOther"
                        },
                        {
                            "name": "name",
                            "type": "esriFieldTypeInteger",
                            "alias": "name"
                        },
                        {
                            "name": "value",
                            "type": "esriFieldTypeInteger",
                            "alias": "value"
                        }
                    ]
                }

                var featureCollection = {
                    layerDefinition: layerDefinition,
                    featureSet: featureSet
                };
                featureLayer = new FeatureLayer(featureCollection, {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["name", "value"],
                });
                var heatmapRenderer = new HeatmapRenderer({
                    field: "value",
                    blurRadius: 10,
                    //颜色设置
                    colorStops: [
                        {ratio: 0, color: "rgba(0, 255, 150, 0)"},
                        {ratio: 0.6, color: "rgb(250, 250, 0)"},
                        {ratio: 0.85, color: "rgb(250, 150, 0)"},
                        {ratio: 0.95, color: "rgb(255, 50, 0)"}],
                    maxPixelIntensity: 500,
                    minPixelIntensity: 0
                });
                featureLayer.setRenderer(heatmapRenderer);
                console.log(featureLayer);
                map.addLayer(featureLayer,1);
                console.log(map.getLayer(featureLayer.id));
                var featureHotspotLayer = map.getLayer(featureLayer.id)
                console.log(map.layerIds)
                console.log(map.graphicsLayerIds)
                console.log(map.getLevel())



            });

        function removelayer() {
            featureLayer.hide();
        }

        function add() {
            featureLayer.show();
        }
    </script>
</head>
<body>
<div id="map">
    <button onclick="removelayer()">隐藏</button>
    <button onclick="add()">显示</button>
</div>
</body>
</html>

6.开发案例 (3.x)

案例场景展示 监造可视化 信息，页面 图形主要有 供应商 和人员 ，特别需求：需要自定义 弹窗信息和样式

网上找的例子，基本的地图初始化，没用添加自定义图形，图层( https://blog.csdn.net/qq_42128407/article/details/80765664)

  <!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />  
    <title>2D</title>  
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css"><!-- 需要引，否则可能会出现 地图初始化出现 部分空白 -->
 
    <style>  
        html, body, #map {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
 
        body {  
            background-color: #FFF;  
            overflow: hidden;  
            font-family: "Trebuchet MS";  
        }  
 
        #BasemapToggle {  
            position: absolute;  
            right: 20px;  
            top: 20px;  
            z-index: 50;  
        }  
 
        #HomeButton {  
            left: 25px;  
            position: absolute;  
            top: 93px;  
            z-index: 50;  
        }  
 
        #LocateButton {  
            left: 25px;  
            position: absolute;  
            top: 130px;  
            z-index: 50;  
        }  
 
        #search {  
            display: block;  
            position: absolute;  
            z-index: 2;  
            top: 25px;  
            left: 75px;  
        }  
    </style>  
    <script src="https://js.arcgis.com/3.24/"></script>
    <script>  
        var map, mapCenter, selectionToolbar, featureLayer;  
        var visible = [], setLayerVisibility;;  
        require([  
        "esri/basemaps",  
             "esri/map",  
             "esri/layers/ArcGISTiledMapServiceLayer",  
             "esri/layers/FeatureLayer",  
             "esri/layers/GraphicsLayer",  
             "esri/geometry/Point",  
 
             "esri/symbols/SimpleFillSymbol",  
             "esri/symbols/SimpleLineSymbol",  
             "esri/symbols/SimpleMarkerSymbol",  
             "esri/tasks/query",  
             "esri/toolbars/draw",  
 
             "esri/graphic",  
             "esri/dijit/Scalebar",  
             "esri/dijit/HomeButton",  
             "esri/dijit/LocateButton",  
             "esri/dijit/BasemapToggle",  
             "esri/dijit/OverviewMap",  
             "esri/dijit/Search",  
             "esri/geometry/webMercatorUtils",  
 
             "dojo/dom",  
             "dojo/on",  
             "dojo/_base/Color",  
             "dojox/charting/Chart2D",  
             "dojo/domReady!"],  
         function (  
              esriBasemaps,  
              Map,  
              Tiled,  
              FeatureLayer,  
              GraphicsLayer,  
              Point,  
 
              SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,  
              Query,  
              Draw,  
 
              Graphic,  
              Scalebar,  
              HomeButton,  
              LocateButton,  
              BasemapToggle,  
              OverviewMap,  
              Search,  
              webMercatorUtils,  
 
              dom,  
              on,  
 
              Color,  
              Chart2D,  
              domConstruct) {  
 
             esriBasemaps.delorme = {  
                 baseMapLayers: [  
                     //中国矢量地图服务  
                     { url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }  
                 ],  
                 //缩略图  
                 thumbnailUrl: "shiliang.jpg",  
                 title: "矢量图"  
             };  
 
             //初始化地图  
             map = new esri.Map("map", { basemap: "delorme", logo: false, });  
 
             //map = new Map("map", {logo:false,slider: true});  
             //var tiled = new Tiled("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");  
             //map.addLayer(tiled,0);  
             var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:8080/arcgis/rest/services/MyMapService/MapServer");  
             map.addLayer(dynamicMapServiceLayer, 1);  
             var chartLayer = new GraphicsLayer({ "id": "chartLayer" });  
             map.addLayer(chartLayer, 2);  
             mapCenter = new Point(103.847, 36.0473, map.spatialReference);  
             map.centerAndZoom(mapCenter, 4);  
             /*************************************************************************************/  
             //卫星底图  
             var toggle = new BasemapToggle({  
                 map: map,  
                 basemap: "satellite"  
             }, "BasemapToggle");  
             toggle.startup();  
             //返回主视图  
             var home = new HomeButton({  
                 map: map  
             }, "HomeButton");  
             home.startup();  
             //定位  
             var geoLocate = new LocateButton({  
                 map: map  
             }, "LocateButton");  
             geoLocate.startup();  
             //鹰眼  
             var overviewMapDijit = new OverviewMap({  
                 map: map,  
                 expandFactor: 2,  
                 attachTo: "bottom-left",  
                 visible: true  
             });  
             overviewMapDijit.startup();  
             //比例尺  
             var scalebar = new esri.dijit.Scalebar({  
                 map: map,//地图对象  
                 attachTo: "bottom-right",//控件的位置，右下角  
                 scalebarStyle: "ruler",//line 比例尺样式类型  
                 scalebarUnit: "metric"//显示地图的单位，这里是km  
             });  
//搜索  
             var search = new Search({  
                 map: map  
             }, "search");  
             search.startup();  
             //显示地图坐标  
             map.on("load", function () {  
                 //after map loads, connect to listen to mouse move & drag events  
                 map.on("mouse-move", showCoordinates);  
                 map.on("mouse-drag", showCoordinates);  
             });  
             function showCoordinates(evt) {  
                 //the map is in web mercator but display coordinates in geographic (lat, long)  
                 var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);  
                 //display mouse coordinates  
                 dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);  
             }  
        });
  </script>
  </head>
<body>  
    <div id="map">  
 
        <!--  返回初始化地图按钮-->  
        <div id="HomeButton"></div>  
        <!--  Html5定位按钮-->  
        <div id="LocateButton"></div>  
        <!--  切换底图-->  
        <div id="BasemapToggle"></div>  
        <!--  搜索栏-->  
        <div id="search"></div>  
        <!--  坐标-->  
        <span id="info" style="position:absolute; left:750px; bottom:5px; color:#000; z-index:50;"></span>  
 
        <button id="selectFieldsButton">选框查询</button>  
        <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">清除选择</button><br>  
        <div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div>  
    </div>  
</body>  

</html>

图形 获取光标 tips提示，或者单击 图形 显示弹窗 （"dojo/dom", "dojo/dom-construct" "dojo/dom-attr","dojo/dom-style" 可以实现对dom的操作， 实现tips 提示，）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/3.28/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/3.28/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/3.28/init.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
        #text{
            position: absolute;
            z-index: 99;
            background-color: rgb(215, 221, 221,0.84);
            font-size: 12px;
            border: 1px solid rgb(0, 150, 255);
            padding: 0.2em 0.5em;
            border-radius: 5px;
            box-shadow: rgb(119, 119, 119) 0px 0px 0.75em;
            transition: all 0.6s;
        }
    </style>
    <script>
        var cityInfo = [
            {"id":0,"name":"北京","X":116.068276,"Y":39.892225},
            {"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
            {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
            {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
            {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
            {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
            {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
            {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
            {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
            {"id":9,"name":"银川","X":106.167225,"Y":38.598524},
            {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
            {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
            {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
            {"id":13,"name":"广州","X":113.226683,"Y":23.18307},
            {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
            {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
            {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
            {"id":17,"name":"台北","X":121.503567,"Y":25.008274},
            {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
            {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
            {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
            {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
            {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
            {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
            {"id":24,"name":"济南","X":117.048331,"Y":36.60841},
            {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
            {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
            {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
            {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
            {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
            {"id":30,"name":"长春","X":125.26142,"Y":43.981984},
            {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
            {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
            {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}];

        var map,sr;
        var index = 0,t=0;
        require([               "esri/basemaps",   

                "esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/GraphicsLayer",
                "esri/symbols/PictureMarkerSymbol",
                "esri/symbols/SimpleLineSymbol", //简单线符号
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/geometry/Circle",
                "esri/geometry/Polyline",
                "esri/graphic",
                "dojo/_base/Color",
                "esri/geometry/Point",
                "dojo/on",
                "dojo/dom",
                "dojo/dom-construct",
                "dojo/dom-attr",
                "dojo/dom-style",
                "dojo/domReady!"],
            function(esriBasemaps, Map,
                     ArcGISDynamicMapServiceLayer,
                     GraphicsLayer,
                     PictureMarkerSymbol,
                     SimpleLineSymbol,
                     SimpleMarkerSymbol,
                     SimpleFillSymbol,
                     Circle,
                     Polyline,
                     Graphic,
                     Color,
                     Point,
                     on,
                     dom,
                     domConstruct,
                     domAttr,
                     domStyle
            ) {
                 // 自定义图层 添加 中国地形 矢量图 （esri/basemaps）
    esriBasemaps.delorme = {
        baseMapLayers: [
            //中国矢量地图服务
            { url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }
        ],
        
        title: "矢量图"
    };
				map = new Map("map", {
					  basemap: "delorme",
					  center: [103.847, 36.0473],
					  zoom: 5,
					  logo:false
					});
                //var tiled = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
                //map.addLayer(tiled, 0);
                sr = map.spatialReference;
                var mapCenter = new Point(103.847, 36.0473, sr);
                map.centerAndZoom(mapCenter);

                var popupLayer = new GraphicsLayer({"id":"popupLayer"});
                map.addLayer(popupLayer, 10);
                map.on("load",function(){
                    addReadPopup(cityInfo);
                });
                function addReadPopup(data){
                    for(var i= 0;i<data.length;i++){
                        var pms = new PictureMarkerSymbol('images/red.png', 14, 16);
                        var pt=new Point(data[i].X,data[i].Y,sr);
                        var graphic = new Graphic(pt, pms, data[i]);
                        popupLayer.add(graphic);
                    }
                }
                popupLayer.on("click",popupLayerClick);
                popupLayer.on("mouse-over",popupLayerOver);
                popupLayer.on("mouse-out",popupLayerOut);
                function popupLayerClick(evt){
                    var graphic = evt.graphic;
                    map.infoWindow.setTitle(graphic.attributes.name);
                    map.infoWindow.setContent(graphic.attributes.name);
                    map.infoWindow.show(graphic.geometry);
                }
                function popupLayerOver(e){
                    map.setMapCursor("pointer");
                    console.log(e.graphic.attributes);
                    var scrPt = map.toScreen(e.graphic.geometry);
                    var textDiv = domConstruct.create("div");
                    domAttr.set(textDiv,{
                        "id":"text"
                    });
                    domStyle.set(textDiv, {
                        "left": scrPt.x+10 + "px",
                        "top": scrPt.y+10 + "px",
                        "position": "absolute",
                        "z-index":99,
                        "background":"rgb(215, 221, 221,0.84)",
                        "font-size":"12px",
                        "border":"1px solid #0096ff",
                        "padding": "0.2em 0.5em",
                        "border-radius": "5px",
                        "box-shadow": "0 0 0.75em #777777"
                    });
                    textDiv.innerHTML ="当前是："+e.graphic.attributes.name;
                    dom.byId("map").appendChild(textDiv);
                }
                function popupLayerOut(e){
                    map.setMapCursor("default");
                    dom.byId("map").removeChild(dom.byId("text"));
                }

            });
    </script>
</head>

<body>
    <div id="map">
    </div>
</body>
</html>

案例：js分公司 监造可视化开发-- 创建 分包商 （ <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">）

思路：

• 供应商 下面 承建 工程，根据工程的多少，在地图中画圈，以凸显 其承建的项目的多少。需要用到d3 自定义 比例尺。实现步骤：将所有的供应商下面的项目数量提到一个数组中，然后 定义 比例尺 区间，这样可以定义每个 数量 对应的比例数值
• 图形实际上是包含 图形+label,但是地图中实际

20201211140900

//2. 供应商 图层
var supplierGraphicsLayer=new GraphicsLayer({
    id:"supplierGraphicsLayer",
    visible:true,
    className:'供应商图层',
    title:"供应商图层"
});
//将供应商 图层 添加到地图中
map.addLayer(supplierGraphicsLayer,2);

initSupplierMarker = function(data){
        jQuery.each(data, function (index, item) {
            xmSumArr.push(item.xmSum);// 拿到每个 供应商 承建的 工程数量 ，d3自定义 比例尺 用到 
        });
        // 自定义 比例尺  确定 分包商 对应的 图形 大小
        var min = d3.min(xmSumArr);
        var max = d3.max(xmSumArr);
        linear = d3.scale.linear()
            .domain([min, max])
            .range([20, 40]);
        //console.log(linear(18));
        jQuery.each(data, function (index, item) {
            if(!item.latitude || !item.longitude){
                return;
            }
            // 1. 根据 供应商 承接的 项目 多少，决定 在地图中 描点 的大小
            var point = new Point(Number(item.longitude),Number(item.latitude),sp);
            var simpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, linear(item.xmSum),
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([63, 66, 244,0.1]), 1),
                new Color([63, 66, 244,0.3])
            );
            var pointGraphic = new Graphic(point,simpleMarkerSymbol);
            supplierGraphicsLayer.add(pointGraphic);
            //2. 供应商  图形
            // 2.1 创建 供应商图形 对象
            var pictureMarkerSymbol =  new PictureMarkerSymbol({
                "url":suppliersMarkerSymbol.url,
                "height":suppliersMarkerSymbol.h,
                "width":suppliersMarkerSymbol.w
                //,"angle": -30,
            });
            var pointAttributes = {name:item.supplierName,id:item.id , longitude:item.longitude,latitude:item.latitude,type:'supplier'};
            var pointInfoTemplate = new InfoTemplate (item.supplierName);
            var pointGraphic = new Graphic(point,pictureMarkerSymbol,pointAttributes).setInfoTemplate (pointInfoTemplate);

            // 2.2 为实现选中 效果，图形对象中保存 默认图形对象的Symbol（符号）和 选中时的符号 记录
            pointGraphic.defaultSymbol = pictureMarkerSymbol;
            pointGraphic.hoverSymbol = new PictureMarkerSymbol(hoverSuppliersMarkerSymbol.url,hoverSuppliersMarkerSymbol.w,hoverSuppliersMarkerSymbol.h);  //(url, width, height)
            //2.3 保存一些 对象的属性
            pointGraphic.type='supplier';
            pointGraphic.id=item.id;
            ///2.3 添加 标题 ，实际上标题和 图形  是一体的 ，不能纯粹的用 图层的显示 和隐藏 来 实现 图例的 切换（初始 想 将 标题 单独 放到nameGraphicsLayer图层，然后通过 hide和show 来实现快速切换，但是不合理）
            var textSymbol = new TextSymbol(item.supplierName,"宋体","white").setOffset(0, -22);
            var lableGraphic = new Graphic(point,textSymbol);
            lableGraphic.visible=false;// 默认隐藏
            lableGraphic.type='supplier_label';
            if ($("#menu3").hasClass('map_button_menu_check')) {// 名称是否选中
                lableGraphic.visible=true;// 显示名称
            }
            pointGraphic.label=lableGraphic;// 将 label 作为  图形的属性 记录下来
            supplierGraphicsLayer.add(pointGraphic);// 添加图形
            supplierGraphicsLayer.add(pointGraphic.label);// 添加 label
        });
        finishSupplierData=true;// 分包商 实例化完成
        checkFinishData(); // 校验是否实例化完成
    }



//  图例控制  

var indexArr = [1,2];
var layerEmum= {
    "1":'persionGraphicsLayer',
    "2":'supplierGraphicsLayer'
}
    addOrRemoveMapPoint = function (index, type) {
        var graphicsLayer = map.getLayer(layerEmum[index]);/// 通过id 取对应 图层
        if (indexArr.indexOf(index) != -1) {
            if(type=='add'){
                graphicsLayer.show();
            }else{
                graphicsLayer.hide();
            }
            // 考虑 图层 中  图形 对应的名称是否 显示
            checkNameMarker([graphicsLayer],type);
        } else if (index == 3) {//名称控制
            var persionGraphicsLayer = map.getLayer('persionGraphicsLayer');
            var supplierGraphicsLayer = map.getLayer('supplierGraphicsLayer');
            checkNameMarker([persionGraphicsLayer,supplierGraphicsLayer],type);// 名称
        }
    }
    /**
     * 5.2 名称 控制
     *  名称的显示要根据 图形 是否 显示（名称和图形 是一起的）
     * @param graphicsLayerArr : 需要添加名称的图形,对应的 图层(数组),目前只有 人员和 供应商 图层
     * @param type：添加还是隐藏
     */
    checkNameMarker=function(graphicsLayerArr,type){
        jQuery.each(graphicsLayerArr, function (index, graphicsLayer) {
            var graphicArr = graphicsLayer.graphics;// 获取该图层中 的 所有图形，返回 Graphic[]
            jQuery.each(graphicArr, function (index, graphic) {// 每个图层对应的  图形对象（现在需要剔出 主对象，供应商或者 人员）
                if(graphic.id){//  说明是 主对象，供应商或者 人员（只有著主对象 才 添加了id属性）
                    var graphicLabel = graphic.label;
                    if ($("#menu3").hasClass('map_button_menu_check')) {// 名称是否选中
                        graphicLabel.show();// 显示名称  (注：graphicLabel.visible等于true，false,不能立刻生效，需要 graphicLabel.draw(); 重新绘图 才能生效 )
                    }else{
                        graphicLabel.hide();// 显示名称
                    }
                }
            });
        });
    }

7.开发案例（4.x）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to SceneView - Create a 3D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
	<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.10/esri/css/main.css">
	<script src="http://localhost:8080/arcgis_js_api/library/4.10/init.js"></script>
    <script>

	   require([
        "esri/config",
        "esri/layers/WebTileLayer",
        "esri/Basemap",
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/BasemapToggle",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol","esri/symbols/PictureMarkerSymbol","esri/symbols/SimpleFillSymbol","esri/symbols/TextSymbol",
        "esri/symbols/PictureFillSymbol",
        "esri/symbols/LabelSymbol3D", "esri/symbols/LineSymbol3D", "esri/symbols/MeshSymbol3D", "esri/symbols/PointSymbol3D",
        "esri/symbols/PolygonSymbol3D", "esri/symbols/WebStyleSymbol", //"esri/symbols/CIMSymbol",
        "esri/geometry/Extent", "esri/geometry/Multipoint", "esri/geometry/Point", "esri/geometry/Polyline", "esri/geometry/Polygon",
        "esri/Color","esri/PopupTemplate",
        "esri/Graphic",
        "esri/layers/FeatureLayer","esri/layers/support/LabelClass","esri/symbols/TextSymbol3DLayer",
        "dojo/text!"
    ], function(esriConfig,WebTileLayer, Basemap,Map, SceneView,BasemapToggle, GraphicsLayer,
                SimpleMarkerSymbol,SimpleLineSymbol,PictureMarkerSymbol,SimpleFillSymbol,TextSymbol,
                PictureFillSymbol,
                LabelSymbol3D,LineSymbol3D,MeshSymbol3D,PointSymbol3D,
                PolygonSymbol3D,WebStyleSymbol,///CIMSymbol,
                Extent,Multipoint,Point,Polyline,Polygon,
                Color,PopupTemplate,
                Graphic,
                FeatureLayer,LabelClass,TextSymbol3DLayer
    ) {
                var map = new Map({
                    basemap: "osm"
                });

              var map = new Map({
            //basemap:imgBasemap,
            basemap:"satellite",//osm
            ground:"world-elevation"
        });
        var view = new SceneView({
            container:"viewDiv", // container为容器的意思，这里对将包含视图的DOM节点的引用，就是承载地图的div容器的id。
            map:map, // 引用我们在上一步中创建的地图对象
            scale:500000, // 设置显示的比例尺的大小
            camera:{
                position:[116.327348, 26.4218886,400000],
                heading:10,
                tilt:52
            },
            zoom:8
        });
        /* //地图放大缩小控件
        view.ui.remove("zoom");
        //地图底部的一串英文，去掉，影响地图美观
        view.ui.remove("attribution");
        //放大缩小按钮
        view.ui.move("zoom", "top-right");
        //矢量服务设置比例
        mapView.scale = 240000
        //指南针，用于地图位置复原
        view.ui.remove("compass");
        //地图平移和旋转来回切换控件
        view.ui.remove("navigation-toggle");
        //["attribution", "navigation-toggle", "compass", "zoom"] */
        view.ui.components = [ "zoom","navigation-toggle","compass" ];
        //view.ui.padding = { top:1000, left:2650, right:-850, bottom:20 };
        // 卫星图 和 地形图 的切换（）
        var basemapToggle = new BasemapToggle({
            view:view,
            container:"toggleDiv",
            nextBasemap:"osm"//streets
        });

        view.ui.add(basemapToggle, "bottom-right");// 添加 地形图和卫星图的切换
    })
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

//说明：添加覆盖物，并显示label
//添加 覆盖物和label 
function showStagnation(stagnation_points){
                var features = [];
                jQuery.each(stagnation_points,function(index,item){
                    if(item.longitude&&item.latitude){
                        var tempIcon = stagnationPointIcon4;
                        var point = {
                            type: "point", // autocasts as new Point()
                            longitude: parseFloat(item.longitude),
                            latitude: parseFloat(item.latitude)
                        };
                        // Create a graphic and add the geometry and symbol to it
                        var pointGraphic = new Graphic({
                            geometry: point,
                            symbol: tempIcon,
                            attributes:{
                                name: item.zdName,
                                place: "<div style='color:#FFFFFF;'><h5 style='margin:0 0 5px 0;padding:0.2em 0;font-family:微软雅黑;font-weight:bolder;border-bottom: 1px solid #ffffff;'>地址：</h5>" +
                                    "<div style='margin:0;line-height:1.5;font-size:13px;text-indent:2em;font-family:微软雅黑;width:300px;padding-top: 5px;'>"+item.zdName+"</div>" +
                                    "</div>"
                            }
                        });
                        features.push(pointGraphic);
                    }
                });
                var uvRenderer = {
                    type: "simple",
                    symbol: stagnationPointIcon4
                };

               var  stagnationLayer = new FeatureLayer({
                    fields: [// 定义 上面 Graphic中 attributes 中的参数。在后面可有直接 "{name}"  获取参数
                        {
                            name: "ObjectID",
                            alias: "ObjectID",
                            type: "oid"
                        },{
                            name: "name",
                            alias: "name",
                            type: "string"
                        },{
                            name: "place",// attributes 中字段名
                            alias: "place",// 别名
                            type: "string"// 类型（一定要对上，如果创建时 定义Graphi中 attributes是数值，则 会导致初始化地图覆盖物 失败 ）
                        }],
                    objectIdField: "ObjectID",
                    source: features,  // autocast as a Collection of new Graphic()，注意数组长度限制，尽量低于60000
                    //geometryType: "point",
                    spatialReference: { wkid: 3857 },
                    renderer: uvRenderer,
                    //type: "feature",
                    outFields: ["*"],
                    labelingInfo: [
                        {
                            labelExpressionInfo: {
                                expression: "$feature.name"
                            },
                            symbol: {
                                type: "label-3d", // autocasts as new LabelSymbol3D()
                                symbolLayers: [
                                    {
                                        type: "text", // autocasts as new TextSymbol3DLayer()
                                        material: {
                                            color: "#FFFFFF"
                                        },
                                        size: 8
                                    }
                                ]
                            }
                        }
                    ],
                    popupTemplate : {// 定义弹窗，从上面 Graphic中 attributes 参数中获取
                        title: "{name}",//这些参数定义在 FeatureLayer 中fields  定义的
                        content: "{place} "// 上面 FeatureLayer 中fields中定义的place 支持传递函数

                    }
                });
                webscene.add(stagnationLayer);

            }



//定义函数的(其中event 中的参数是由fields中定义的 )
content:function(event){
    		addTest();
	}

跨域 esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器允许跨域

img

8. 图层说明

常见分为：矢量图 影像图 地形图

https://www.cnblogs.com/HandyLi/p/11137367.html

https://www.cnblogs.com/amadoGrowers/p/13631127.html

关于ArcGIS API for JavaScript中basemap的总结介绍

// 3.x 添加 底图
 map = new Map("mapDiv",{
            basemap:"satellite",// 影像图
            spatialReference:{"wkid":4490},
            center: center,
            maxZoom:20,
            minZoom:3,
            logo:false,
            zoom: map_zoom,
            lider:false
        });
    // 自定义图层 添加 中国地形 矢量图 （esri/basemaps）
    esriBasemaps.delorme = {
        baseMapLayers: [
            //中国矢量地图服务
            { url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }
        ],
        thumbnailUrl: ctxStatic+"/images/map/topo.jpg",//缩略图
        title: "矢量图"
    };
    var toggle = new BasemapToggle({
        map: map,
        basemap: "delorme"
    }, "BasemapToggle");
    toggle.startup();
//注意： 需要在 添加元素 <div id="BasemapToggle"></div>  定义位置，来显示 切换底图
//======方法2 自定义切换====
var map,sp;
var serviceLayer;
function changeBaseMap(){
	if(serviceLayer){
		map.removeLayer(serviceLayer);
	}
	if(typess){
		typess = false;
		$("#imgToggle").css("background-image", "url("+ctxStatic+"/images/map/topo.jpg");
		$("#spanToggle").text("平面图");
		serviceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"); 
	}else{
		typess = true;
		$("#imgToggle").css("background-image", "url("+ctxStatic+"/images/map/satellite.jpg");
		$("#spanToggle").text("卫星图");
		serviceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"); 
	}
	map.addLayer(serviceLayer);
}






// 4.x 的写法   （"esri/layers/TileLayer"）
 var myBasemaplayer = new TileLayer({
        url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
    });
    var myBasemap = new Basemap({
        baseLayers: [myBasemaplayer],
        title: "Custom Basemap",
        id: "myBasemap"
    });
    var webscene = new WebScene({
        basemap: myBasemap,
        ground: "world-elevation"
    });
// 影像图 和 地形图 的切换
var basemapToggle = new BasemapToggle({
    view: view,
    container: "toggleDiv",
    nextBasemap: "osm"//streets
});
view.ui.add(basemapToggle, "bottom-right");

底图切换 BasemapToggle https://blog.csdn.net/biu_bui_biu/article/details/107331691

BasemapToggle可以在页面上添加一个切换底图的功能配件，切换的basemap通过nextBasemap设置。 具体操作为：在基础demo的function 最后添加以下代码：

//创建一个并配置一个basemapToggle
 var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"
      });
 //在视图上添加basemaotoggle 配件
 view.ui.add(basemapToggle, "bottom-right");

在下载的arcgis_js_api包中有一个basemaps.js文件（路径为arcgis_js_api\3.17\esri），里面定义了esri提供的全部的basemap

Name	Type	Summary
dark-gray	Object	The Dark Gray Canvas basemap is designed to be used as a soothing background map for overlaying and focus attention on other map layers. https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer.
dark-gray-vector	Object	The [Dark Gray Canvas v2] vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features.
gray	Object	The Light Gray Canvas basemap is designed to be used as a neutral background map for overlaying and emphasizing other map layers. https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer.
gray-vector	Object	The [Light Gray Canvas v2] vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features.
hybrid	Object	The World Imagery with Labels map is a detailed imagery map layer and labels that is designed to be used as a basemap for various maps and applications: https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer.
national-geographic	Object	The National Geographic basemap is designed to be used as a general reference map for informational and educational purposes: https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer.
oceans	Object	The Ocean Basemap is designed to be used as a basemap by marine GIS professionals and as a reference map by anyone interested in ocean data. https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer.
osm	Object	The OpenStreetMap is a community map layer that is designed to be used as a basemap for various maps and applications.
satellite	Object	The World Imagery map is a detailed imagery map layer that is designed to be used as a basemap for various maps and applications: https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer.
streets	Object	The Streets basemap presents a multiscale street map for the world: https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer.
streets-navigation-vector	Object	The [World Navigation Map v2] vector tile layer provides a detailed basemap for the world featuring a custom navigation map style.
streets-night-vector	Object	The [World Street Map (Night) v2] vector tile layer provides a detailed basemap for the world featuring a custom "night time" street map style.
streets-relief-vector	Object	The [World Street Map (with Relief) v2] vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style designed for use with a relief map.
streets-vector	Object	The [World Street Map v2] vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style.
terrain	Object	The Terrain with Labels basemap is designed to be used to overlay and emphasize other thematic map layers. https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer.
topo	Object	The Topographic map includes boundaries, cities, water features, physiographic features, parks, landmarks, transportation, and buildings: https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer. https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer.
topo-vector	Object	The [World Topographic Map v2] vector tile layer provides a detailed basemap for the world featuring a classic Esri topographic map style designed for use with a relief map.

national-geographic
gray
hybrid
oceans
osm
satellite
streets
topo

• 地形图 服务：

  • http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer
  • https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer
  • http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer (中国矢量图)
  • ChinaOnlineStreetWarm
  • ChinaOnlineStreetPurplishBlue
  • ChinaOnlineStreetGray
  • ChinaOnlineCommunity
  • ChinaOnlineCommunityENG
  • ChinaOnlineCommunity_Mobile

• 卫星图

  • https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer

9小部件

https://blog.csdn.net/weixin_45622540/article/details/106923418

arcgis api 3.x for js入门开发系列三地图工具栏

3.x esri/dijit 4.x esri/widgets

//4.x
	//地图放大缩小控件
    view.ui.remove("zoom");
    //地图底部的一串英文，去掉，影响地图美观
    view.ui.remove("attribution");
    //指南针，用于地图位置复原
    //view.ui.remove("compass");
    //地图平移和旋转来回切换控件
    //view.ui.remove("navigation-toggle");
    //["attribution", "navigation-toggle", "compass", "zoom"]
    //view.ui.components = [ "zoom","navigation-toggle","compass" ];
    //view.ui.padding = { top:1000, left:2650, right:-850, bottom:20 };



var homeWidget = new Home({
        view: view
    });
    view.ui.add(homeWidget, "top-right");
    
    
    zoom = new Zoom({
        view: view
    });
    // 讲 地图中 的常用小插件，移到  左侧
    view.ui.move(['navigation-toggle', "compass"], "top-right");//"bottom-left"  "zoom",

10 获取行政区域

行政区域规划 的2种形式（存在坐标系不统一问题）

调用百度api https://www.cnblogs.com/milkmap/archive/2012/04/11/2442430.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取地区轮廓线</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
</script>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<br />
输入省、直辖市或县名称：<input type="text" id="districtName" style="width:80px" value="重庆市">
<input type="button" onclick="getBoundary()" value="获取轮廓线">

<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();

function getBoundary(){       
    var bdary = new BMap.Boundary();
    var name = document.getElementById("districtName").value;
    bdary.get(name, function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}

</script>
</body>
</html>

arcgis 3.x 行政区域 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">

引入相应的模块，其中包括： dojo/on（用于绑定事件的模块） esri/symbols/SimpleMarkerSymbol（点符号类） esri/symbols/SimpleLineSymbol（线符号类） esri/symbols/SimpleFillSymbol（面符号类） esri/geometry/Point（点类） esri/geometry/Polyline（折线类） esri/geometry/Polygon（面类） esri/geometry/Circle（圆类） dojo/query（dojo的选择器，用于选择DOM元素） esri/graphic（图形类） esri/layers/GraphicsLayer（客户端图层类）

//<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
map.on("load", function () {
    getBoundary('安徽');//行政区域，
});
    // 勾勒边界 描边安徽
    function getBoundary(name){
        var graphic;
        if(BMap){// 通过百度地图 获取省份边界
            var bdary = new BMap.Boundary();
            bdary.get(name, function(rs) {
                points = rs; //获取行政区域
                var rslength = rs.boundaries.length;
                for (i = 0; i < rslength; i++) {
                    var triangleCoords = [];
                    var temp = rs.boundaries[i];
                    console.log(temp)
                    var latLngs = temp.split(";");
                    for (j = 1; j < latLngs.length - 1; j++) {
                        var postion = latLngs[j].indexOf(",");
                        var lat = parseFloat(latLngs[j].substr(0, postion));//经度
                        var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度
                        //加入经纬度
                        triangleCoords.push(new Point(lat,lng));
                    }
                    console.log(triangleCoords)
                    // 创建多边形
                    var geometry = new Polygon();
                    geometry.addRing(triangleCoords);
                    var color = Color.fromHex("#14B3E0");
                    color.a = 0.05;//透明度
                    //定义面符号
                    var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, "#14B3E0",2),color);
                    graphic = new Graphic(geometry, fill,{},null);
                    map.graphics.add(graphic);
                }
            });
        }
    }

11. 其他

• arcgis引入外部插件。 例如：Echarts ，GeoJsonLayer（添加GeoJson数据，一般用于地图描边）等都要引入arcgis 的插件，所有导包不能像引入js的方式

<script>
        /**
         * 这个配置必须写在加载arcgis api之前，否则不能生效
         * location是一个绝对路径，第一个斜杠前面会默认添加一级域名，所以后面要填上二级域名等等,
         * 比如：http://localhost:8065/index.html，这种只需要写"/js"即可；
         * 而http://localhost:8065/EchartsHeatmapInArcgis/index.html这种就需要写"/../js"或者"/EchartsHeatmapInArcgis/js"
         */
        var dojoConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "src",
                //"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
                "location": ctxStatic + "/map/arcgis/js"   /// 和本地引入js一样，先找到路径，定义为src .后面地图引入模块时用"src/xx",
            }]
        };
    </script>
    <!--"src/InfoWindow",  本质是 arcgis 引入 ctxStatic + "/map/arcgis/js/InfoWindow.js"  -->
    <script>
    require([
    "esri/basemaps","esri/map",
    "src/InfoWindow",
    "dojo/domReady!"
], function (esriBasemaps, Map,InfoWindow){


});
    
    
    </script>
    
    

• arcgis 操作dom 对象

image-20201215102022370

require([
    "esri/basemaps","esri/map",
    "esri/Color", 
    "dojo/on",
    "dojo/dom","dojo/dom-construct","dojo/dom-attr","dojo/dom-style",
    "dojo/domReady!"
], function (esriBasemaps, Map,
             Color,
             on,
             dom,domConstruct,domAttr,domStyle
){
	map = new Map("mapDiv",{
            basemap:"satellite",// 影像图
            spatialReference:{"wkid":4490},
            center: center,
            maxZoom:20,
            minZoom:3,
            logo:false,
            zoom: map_zoom,
            lider:false,
            sliderPosition:"top-right",
            infoWindow : infoWindow
        });
        
        
        
        
     map.graphic.on("mouse-over",popupLayerOver);   
     // 定义图形获取 鼠标 事件 ，实现 tips 提示   
    function popupLayerOver(e){
        map.setMapCursor("pointer");
        // 自定义tips 提示
        var scrPt = map.toScreen(e.graphic.geometry);// 坐标 转 屏幕坐标
        var textDiv = domConstruct.create("div");
        domAttr.set(textDiv,{
            "id":"text"
        });
        // 样式可以迁移到css中同意 定义，这里只用定义 坐标（left和 top）
        domStyle.set(textDiv, {
            "left": scrPt.x+10 + "px",
            "top": scrPt.y+10 + "px",
            "position": "absolute",
            "z-index":99,
            "background":"#fcffd1",
            "font-size":"10px",
            "border":"1px solid #0096ff",
            "padding": "0.1em 0.3em 0.1em",
            "border-radius": "3px",
            "box-shadow": "0 0 0.75em #777777"
        });
        textDiv.innerHTML = e.graphic.attributes.name;
        dom.byId("mapDiv").appendChild(textDiv);
    }
})

GeoJSON 数据在地图中 创建（主要用于 对区域的描边）

4.x-GeoJSONLayer

​ https://blog.csdn.net/weixin_43747076/article/details/106238416

3.x -GeoJSONLayer

​ https://blog.csdn.net/huangli0/article/details/80147212

​ （说明：3.x 的实现需要 通过 geojsonlayer.js、 terraformer.min.js 、terraformer-arcgis-parser.min.js)

20.注意事项

• 初始化地图时，出现部分空白

<!--同时按钮区域也乱了，是因为需要 引入js的同时也需要css,目前能确定的是3.28需要 4.x不确定-->
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>

image-20201123084135231

• 去除logo

//arcgis api for js 3.x版本去除logo
map = new esri.Map("map", { extend:initExtend,logo:false });  //去除的不干净，还需要家css   .esriControlsBR{ display: none; }

//arcgis api for js 4.x版本去除logo
var view = new MapView({ ...  });
//remove 或者 _removeComponents   
view.ui.remove("attribution");
view.ui._removeComponents(["attribution"]);  // 去除logo  

待整理

• IIS下发布

  iis 可以替代tomcat，用于发布arcgis 服务 https://jingyan.baidu.com/article/6079ad0eb37aac28fe86db6a.html

  https://blog.csdn.net/eatgirlhui_unique/article/details/49662733

  但是考虑linux 不能没用这个服务，找时间了解，不作为作离线部署的服务

https://blog.csdn.net/yy284872497/article/details/78878435https://blog.csdn.net/yy284872497/article/details/80408794https://www.jianshu.com/p/3b36a05872e2

热力：https://blog.csdn.net/sunlianglong/article/details/79773663

​ 4.x https://blog.csdn.net/lipiaozeng8359/article/details/109473282

3D 集成Echarts https://xiaozhuanlan.com/topic/4683297150

​ https://github.com/xcsf/ArcGIS-API-for-JS-with-Echarts (已经下载，3D集成echats)

https://github.com/dksgis/Echarts3Layer-jsapi4x

https://blog.csdn.net/yy284872497/article/details/85228643

3D 热力：

​ 1.Echarts3Layer 实现，利用 坐标。

​ 2.HeatMap实现，需要用屏幕坐标，所以需要每次移动位置都需要重新 讲每个坐标点转换，效率低，浏览器压力大

​ 3.canvas在三维地图实现热力图

最好 能实现 先初始化地图，结束后再去 添加 覆盖物

0. argis4.10 有点问题，当 FeatureLayer 中添加线路时 ，如果

   elevationInfo: {
                        mode: "on-the-ground",
                     unit: "meters"
                 },
   

   会出现无法选中线路，如果用 4.15 在信息弹窗中无法自定义单击事件 1.初始化构建 2D，3D地图

   会出现无法选中线路，如果用 4.15 在信息弹窗中无法自定义单击事件 1.初始化构建 2D，3D地图

2.创建 点，线。面

3.GraphicsLayer和 FeatureLayer 添加图形 https://www.cnblogs.com/MSspblxh/p/6273998.html

4.创建 点+label (2中方式)

5.光标移动触发弹窗

6.信息弹窗的3中方式，第一种 创建Graphics 然后讲定义的 弹窗添加到 图形属性中，第二种 FeatureLayer 中定义弹窗，支持 弹窗信息 通过ajax到后台查询 3.光标获取，单击事件 定义信息弹窗

7.小部件，取消英文商标，取消 注释，自定义小部件位置

8.轨迹中的 显示，隐藏 可以作为高亮的方法

9.高亮 图形

10.搜素（两类）

11. geometry等同于event.mapPoint

12.整理一下动画效果

13 角度转换 http://localhost:8080/arcgis_js_api/arcgis_js_v410_sdk/arcgis_js_api/sdk/latest/sample-code/scene-goto/index.html

14. 导航- 运行轨迹

<%--轨迹用到--%>
    <script>
        // var dojoConfig = {
        //     packages: [{
        //         name: "geolocate",
        //         location: "http://2gis.github.io/mock-geolocation/dist",
        //         main: "geolocate"
        //     }]
        // }
    </script>

14小部件 Home

 var homeWidget = new Home({
                view: view
            });
            view.ui.add(homeWidget, "top-right");
            homeWidget.on("go", function(event){
                event.target.goToOverride=function(){
                    animationGoToCenter();
                }
            });

// 动画加载 定位到中心点 ，初始化 和home用到

var animationGoToCenter=function(){
                var cam = new Camera({
                    position: new Point({
                        x: 116.327348, // lon
                        y: 26.4218886,      // lat
                        z: 400000   // elevation in meters
                    }),
                    zoom:8,
                    heading: 10, // facing due south
                    tilt: 52      // bird's eye view
                });

view.goTo(cam);
    }

​

15 设置旋转角度

view.goTo({
                    /*position: view.camera.position,*/
                    center:view.center,
                    tilt: val
                }, {
                    animate: false
                });

16 坐标转换 屏幕坐标和地理坐标之间的转换

var screenPoint = {x: evt.x,y: evt.y};// 需要定义弹窗的位置
var mapPoint = view.toMap(screenPoint);

16 坐标转换 屏幕坐标和地理坐标之间的转换 var screenPoint = {x: evt.x,y: evt.y};// 需要定义弹窗的位置 var mapPoint = view.toMap(screenPoint);

屏幕坐标

var creenCoordinates = view.toScreen(result.mapPoint);// 屏幕坐标
creenCoordinates.x--->left
creenCoordinates.y--->top
position: absolute;

left: 1223.3593750028608px
top: 558.4570312556689;

                map.infoWindow.setTitle(graphic.attributes.name);
                map.infoWindow.setContent(graphic.attributes.name);
                if(graphic.geometryType=='point'){
                    map.infoWindow.show(graphic.geometry);
                }else{
                    var mapPoint = map.toMap(e.screenPoint);
                    map.infoWindow.show(mapPoint);
                }

view.ui.add("line-button", "top-left");//添加绘制线按钮，自定义UI
                view.ui.add("area-button", "top-left");//添加绘制面按钮，自定义UI
                view.ui.add("point-button", "top-left");//添加绘制面按钮，自定义UI
                view.ui.add("circle-button", "top-left");//添加绘制面按钮，自定义UI
                view.ui.add("rectangle-button", "top-left");//添加绘制面按钮，自定义UI

// 浮层随着鼠标事件移动
view.on(['pointer-up', 'drag'], this.createInfoDialog)
// 浮层随着视窗大小变化事件移动
view.on('resize', this.createInfoDialog)
// 监听放大缩小和中心点
view.watch(['scale', 'center'], this.createInfoDialog)

//绑定线按钮绘制事件
                    var drawLineButton = document.getElementById("line-button");
                    drawLineButton.onclick = function () {
                        view.graphics.removeAll();//清楚之前的绘制
                        enableCreateLine(draw, view);
                    };
                    //绑定面按钮绘制事件
                    var drawAreaButton = document.getElementById("area-button");
                    drawAreaButton.onclick = function () {
                        view.graphics.removeAll();//清楚之前的绘制
                        enableCreateArea(draw, view);
                    };
                    //绑定面按钮绘制事件
                    var drawPointButton = document.getElementById("point-button");
                    drawPointButton.onclick = function () {
                        enableCreatePoint(draw, view);
                    };
                    //绑定面按钮绘制事件
                    var drawCircleButton = document.getElementById("circle-button");
                    drawCircleButton.onclick = function () {
                        enableCreateCircle(draw, view);
                    };
                    //绑定面按钮绘制事件
                    var drawRectangleButton = document.getElementById("rectangle-button");
                    drawRectangleButton.onclick = function () {
                        enableCreateRectangle(draw, view);
                    };
                });