ArcGIS 地图的一些常用方法汇总
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
个人对ArcGIS 地图使用的一些理解和方法
大概分为以下几类：
1：图层的添加。
2：热力图。
3：绘图小部件。
4：视频图层。
5：空间查询。
6：地图点击事件。
以下方法是在vue中使用
一、
1. 首先下载 ArcGIS ，然后在当前使用的页面引入
代码如下（示例）：
1：npm install esri-loader --save (或者cnpm)
2：import { loadModules } from "esri-loader";
2. 还需要在样式中引入。
代码如下（示例）：
@import "http://10.101.21.67:8099/lgpc/arcgis_js_v422_api/arcgis_js_api/javascript/4.22/esri/themes/light/main.css";
放在style中就好。
3. 在页面创建一个id。
<div id="viewDiv"></div>
4.我直接贴上整个代码，附带注释。以供更好的理解，或整体使用。
代码如下（示例）：
createMapView() {
var map;
var view;
var that = this;
var nnerId = "";
loadModules([ //引入的这些注意顺序，有时候顺序不对，也会报错加载不出来的。
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch", //绘图小组件
"esri/Graphic", //现实世界地理现象的矢量表示
"esri/layers/GraphicsLayer", //绘制图层
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer", //矢量图层
"esri/renderers/HeatmapRenderer",
"esri/widgets/LayerList",
"esri/tasks/support/Query", //用于从图层或图层视图执行要素查询的参数
"esri/tasks/QueryTask", //查询操作
"esri/symbols/SimpleLineSymbol", // 创建线符号
"esri/symbols/SimpleFillSymbol", // 创建面符号
"esri/widgets/Slider",
"esri/geometry/Point",
"dojo/dom", //定义了核心 dojo DOM 构建 API（dom.byid)
"dojo/on", //用于 DOM 节点和其他事件发射对象的通用事件处理程序模块，提供规范化的事件侦听和事件调度功能。
"esri/Color", //创建新的颜色对象
]).then(
([
config,
Map,
MapView,
Sketch,
Graphic,
GraphicsLayer,
GroupLayer,
MapImageLayer,
TileLayer,
FeatureLayer,
HeatmapRenderer,
LayerList,
Slider,
QueryTask,
Query,
SimpleFillSymbol,
SimpleLineSymbol,
Point,
dom,
on,
Color,
]) => {
var layer = new TileLayer({
url: "", //注释：地图分为电子地图，影像地图等多种。（看你需要的是省市地图，还是全国地图，把地图链接放在这里。默认加载的就是当前的地图图层。）
});
map = new Map();
map.add(layer);
// 初始化图层视角
const view = new MapView({
container: "viewDiv", //跟页面的id相对应
map: map,
popup: { defaultPopupTemplateEnabled: true }, //开启"FeatureLayer"特征图层属性弹窗
});
// 初始化地图视角和视图更新
const location = new Point({
x: this.longitude, //经纬度，视角
y: this.latitude,
spatialReference: 4490,
});
view.center = location;
view.zoom = this.zooms; //视角大小
// view.zoom = 6;
//创建多个不同类型的图层，并进行组合，以列表的方式显示
const FWM = new FeatureLayer({
url: "", //楼栋图层，点击可以获取当前的楼栋信息。(根据你自己需求，可用可不用)
title: "楼栋图层",
visible: false,
outFields: ["*"],
});
const yxLayer = new TileLayer({
url: "", //对应的另一种地图。
title: "影像地图",
visible: false,
});
var citiesRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
size: 6,
color: "black",
outline: {
// autocasts as new SimpleLineSymbol()
width: 0.5,
color: "white",
},
},
};
// 视频监控图层
var citiesLayer = new FeatureLayer({
id: "video",
title: "视频监控图层",
outFields: ["channo", "id"], //获取图层表字段，"*"=返回所有字段，字段名称=返回指定字段
url: "", //视频图层
renderer: citiesRenderer,
});
//地图的点击事件
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
return result.graphic.layer === citiesLayer;
})[0].graphic;
console.log(graphic.attributes.channo);
//可以获取到当前点击的楼栋或视频编码信息。当然要进行视频播放的话，还得需要播放器等
} else {
console.log("选中图层内容,才能返回数据");
}
});
});
//组合图层
const demographicGroupLayer = new GroupLayer({
title: "图层控制",
// visible: false,
visibilityMode: "independent", //exclusive=图层互斥，始终显示一个，inherited=图层叠加显示
layers: [yxLayer, FWM, citiesLayer], //多个图层组合起来。
opacity: 1, //图层透明度
});
map.add(demographicGroupLayer); // 添加图层组到地图
//创建图层列表小部件，并添加至右上角
view.when(() => {
const layerList = new LayerList({
view: view,
});
view.ui.add(layerList, "top-left");
});
view.ui.move("zoom", "bottom-right");
//添加绘图小部件
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
view.when(() => {
var sketch = new Sketch({
layer: graphicsLayer,
view: view,
//single:只能操作一次，再次操作需要选择操作
//continuous:连续操作
//update:操作完成后，将选择图形进行更新操作
creationMode: "update",
});
view.ui.add(sketch, "top-right");
sketch.on("create", function (event) {
if (event.state === "complete") {
console.log(event);
//使用graphic.geometry 去查询相交特征
//console.log(event.graphic.geometry);
//使用geometry（QueryTask）
querysTask(event.graphic.geometry);
}
});
});
//去掉地图右下角logo
view.ui._removeComponents(["attribution"]);
view.on("click", function (e) {
console.log(e);
});
//4.7空间查询（QuerysTask）
function querysTask(geometry) {
// console.log(geometry);
var china =
"http://10.101.21.140:81/ServiceAdapter/MAP/FWM2000/f61896e203dbb6216c19a86c1364da20/0";
var qTask = new QueryTask({
url: china, //全国矢量
});
var query = new Query({
returnGeometry: true,
outFields: ["*"], //结果要素包含的属性字段
});
query.geometry = geometry;
query.where = "1=1";
//空间参考信息
query.outSpatialReference = map.spatialReference;
//查询的标准，此处代表和geometry相交的图形都要返回
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
// //执行空间查询
qTask.execute(query).then(function (results) {
showQueryResult(results.features);
});
}
//4.8执行查询
function showQueryResult(queryResult) {
console.log("queryResult:", queryResult); //用图标工具选中的地方全部的楼栋名称及经纬度
//创建线符号
var lineSymbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([0, 255, 0, 0.5])
); //rgba:0.5是设置的透明度
//创建面符号
var fill = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new Color([0, 255, 0])
);
if (queryResult.length == 0) {
dom.byId("divShowResult").innerHTML = "查询结果为空！";
return;
}
var htmls = "";
if (queryResult.length >= 1) {
htmls = htmls + '<table style="text-align: center;width: 100%;">'; //创建一个表，使用了转义字符
htmls = htmls + "<tr><th>楼栋信息</th></tr>";
for (var i = 0; i < queryResult.length; i++) {
htmls = htmls + "<td>" + queryResult[i].attributes.MC + "</td>";
htmls = htmls + "</tr>";
}
htmls = htmls + "</table>";
dom.byId("tasblea").innerHTML = htmls; //这是我自己写的进行了一个循环，展示我所选中的所有楼栋名称，在页面中显示出来。
}
}
//下面的两个方法，一个是经纬度，一个是圆点样式的设置。用来在地图中显示当前定位的地方。
const polygon = {
type: "point",
longitude: this.longitude,
latitude: this.latitude,
};
// console.log(this.longitude);
const simpleFillSymbol = {
type: "simple-marker",
color: [116, 15, 224], // Orange
outline: {
color: [255, 255, 255], // White
width: 2,
},
};
const pointGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
graphicsLayer.add(pointGraphic);
//热力图
var heatmapRenderer = new HeatmapRenderer({
//设置渲染器
colorStops: [
{ ratio: -0.1, color: "rgba(0, 255, 0, 0)" },
{ ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
{ ratio: 0.9, color: "rgba(255, 0, 0, 1)" },
],
blurRadius: 6, //确定一个点周围的影响区域
//maxPixelIntensity: 20,
//minPixelIntensity: 20
});
var heatDataUrl = ``; //热力图的经纬度接口。
$.getJSON(heatDataUrl, {}, function (data, textStatus, jqXHR) {
//读取数据，设置点数据集
var features = [];
for (var i = 0; i < data.data.length; i++) {
var x = data.data[i].lng;
var y = data.data[i].lat;
features.push({
geometry: {
type: "point",
x: x,
y: y,
},
attributes: {
ObjectID: i, //重要！！！
},
});
}
var featureLayer = new FeatureLayer({
source: features, //点数据集
title: "热力图",
objectIdField: "ObjectID", //重要！！！
renderer: heatmapRenderer, //渲染器
});
map.add(featureLayer);
});
}
);
},
总结
–、 以上呢是我项目中 ArcGIS 地图的一些用法。
（ps：当然，如果你直接cv 过去的话是不能直接使用的。用到哪些部分，就把接口链接等补上就可以使用了！）
— 当前有不懂的也可以联系我，在我知道的前提下知无不言、言无不尽。