arcgis for javaScript
1.相关说明
1.1相关说明
下载离线api: https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript
一些案例介绍：https://blog.csdn.net/aodao8891/article/details/101317649
实现热力图：https://www.giserdqy.com/secdev/arcgis-api-for-js-docs/11784/
https://blog.csdn.net/yy284872497/article/details/78878435 API的使用和部署
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
完整教程 ---找时间学习一下，笔记完善
总结一下 自定义弹窗 自定义弹窗
水经注万能地图下载器 -------- 了解
墨卡托坐标与其他坐标系之间的转换
https://blog.csdn.net/qq_35117024/category_9832607.html?spm=1001.2014.3001.5482
https://so.csdn.net/so/search/blog?q=arcgis api 功能篇&t=blog&p=1&s=0&tm=0&lv=-1&ft=0&l=&u=
https://xuqwblog.blog.csdn.net/article/details/98967485
https://blog.csdn.net/smss007/article/details/97136266
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");//设置地图服务器允许跨域
- 去除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
最好 能实现 先初始化地图，结束后再去 添加 覆盖物
- 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.搜素（两类）
- geometry等同于event.mapPoint
12.整理一下动画效果
- 导航- 运行轨迹
<%--轨迹用到--%>
<script>
// var dojoConfig = {
// packages: [{
// name: "geolocate",
// location: "http://2gis.github.io/mock-geolocation/dist",
// main: "geolocate"
// }]
// }
</script>
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); }; });