Skip to content

Commit 81195f3

Browse files
LuckRain7LuckRain7
committed
Demo-8: update
1 parent 2b07a62 commit 81195f3

File tree

6 files changed

+206
-23
lines changed

6 files changed

+206
-23
lines changed

‎ArcGIS-API.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2226,9 +2226,9 @@
22262226
22272227
**GeometryService**
22282228

2229-
>说明：
2229+
>说明：表示由ArcGIS服务器REST API公开的几何图形服务资源。它用于对几何图形执行各种操作，如项目、简化、缓冲区和关系。 建议您创建一个几何体服务，以便在应用程序中使用。有关详细信息，请参阅服务器资源中心的几何图形服务帮助主题。Esri在https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer上托管一个几何图形服务。
22302230
>
2231-
>引入：
2231+
>引入：`"esri/tasks/GeometryService"`
22322232
>
22332233
> 网址：https://developers.arcgis.com/javascript/3/jsapi/geometryservice-amd.html
22342234

‎Demo-8/README.md

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,40 @@
11
# 🌍 8、缓冲区分析（developing）
22

3-
TODO
3+
4+
5+
**在 src\map\init.js 引入一下模块**
6+
7+
```diff
8+
loadModules(
9+
[
10+
+ "esri/config", // 所有JS API配置选项的默认值。
11+
+ "esri/tasks/GeometryService",
12+
+ "esri/Color",
13+
+ "esri/tasks/BufferParameters",
14+
+ "esri/geometry/normalizeUtils",
15+
],
16+
config.loadConfig
17+
)
18+
.then(
19+
([
20+
+ EsriConfig, // 所有JS API配置选项的默认值。
21+
+ GeometryService, // 表示由ArcGIS服务器REST API公开的几何图形服务资源。它用于对几何图形执行各种操作，如项目、简化、缓冲区和关系。
22+
+ EsriColor, // 设置颜色
23+
+ BufferParameters, // 缓冲区参数配置模块
24+
+ NormalizeUtils,
25+
])=> {
26+
// 缓存
27+
+ this.EsriConfig = EsriConfig;
28+
+ this.GeometryService = GeometryService;
29+
+ this.EsriColor = EsriColor;
30+
+ this.BufferParameters = BufferParameters;
31+
+ this.NormalizeUtils = NormalizeUtils;
32+
}
33+
```
34+
35+
36+
37+
438

539
<br>
640

‎Demo-8/geometry-utilities.png

115 KB
Loading

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
版本信息 vue:2.6.11 | ArcGIS API for JavaScript: 3.32
44

5-
如果内容对您有所帮助，帮着点个⭐，感谢💗💗💗
5+
如果内容对您有所帮助，帮着点个 ⭐，感谢 💗💗💗
66

77
PS: 代码在边写过程中，不断的改进，可能 example 中的代码与文章中代码会有所出入。欢迎大家提交 Issues。
88

‎example/src/map/functions/heatMap.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Description: 热力图基本模板
3+
* Author: LuckRain7
4+
* Date: 2020-05-30 10:01:40
5+
*/
6+
function heatMapFunc(FeatureLayer, HeatmapRenderer, serverUrl, that) {
7+
console.log(1);
8+
9+
let doctorNumFlayer = new FeatureLayer(
10+
serverUrl().fenxi.xiangcunyisheng + "/0",
11+
{
12+
outFields: ["*"], //必须要有返回值，提供给热力图进行分析
13+
}
14+
);
15+
16+
let heatmapRenderer = new HeatmapRenderer({
17+
field: "yiliao", // 根据哪一个字段进行渲染
18+
blurRadius: 12, //蓝色
19+
colors: [
20+
"rgba(30,144,255, 0)",
21+
"rgba(30,144,255,0.8)",
22+
"rgb(0, 255, 0)",
23+
"rgb(255, 255, 0)",
24+
"rgb(255, 0, 0)",
25+
],
26+
});
27+
doctorNumFlayer.setRenderer(heatmapRenderer);
28+
29+
that.map.addLayer(doctorNumFlayer); // 将热力图分析添加到地图上
30+
}
31+
32+
export default heatMapFunc;

‎example/src/map/init.js

+136-19
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ ArcGIS.prototype.init = function init($el) {
6565
"esri/tasks/FindTask",
6666
"esri/tasks/FindParameters",
6767
"esri/renderers/HeatmapRenderer",
68+
"esri/config", // 所有JS API配置选项的默认值。
69+
"esri/tasks/GeometryService",
70+
"esri/Color",
71+
"esri/tasks/BufferParameters",
72+
"esri/geometry/normalizeUtils",
6873
"dojo/on", // dojo 事件监听
6974
// -----------------------
7075
// "dojo/dom-construct",
@@ -100,6 +105,11 @@ ArcGIS.prototype.init = function init($el) {
100105
FindTask, // FindTask 属性查询
101106
FindParameters, // FindTask 属性查询参数
102107
HeatmapRenderer, // 热力图渲染
108+
EsriConfig, // 所有JS API配置选项的默认值。
109+
GeometryService, // 表示由ArcGIS服务器REST API公开的几何图形服务资源。它用于对几何图形执行各种操作，如项目、简化、缓冲区和关系。
110+
EsriColor, // 设置颜色
111+
BufferParameters, // 缓冲区参数配置模块
112+
NormalizeUtils,
103113
dojoOn, // dojo 事件监听
104114
]) => {
105115
this.SpatialReference = SpatialReference;
@@ -119,6 +129,9 @@ ArcGIS.prototype.init = function init($el) {
119129
this.QueryTask = QueryTask;
120130
// 热力图渲染
121131
this.HeatmapRenderer = HeatmapRenderer;
132+
// 所有JS API配置选项的默认值。
133+
this.EsriConfig = EsriConfig;
134+
this.GeometryService = GeometryService;
122135
// dojo
123136
this.dojoOn = dojoOn;
124137

@@ -195,31 +208,135 @@ ArcGIS.prototype.init = function init($el) {
195208
this.map.onLoad();
196209
// thatMap.on("Click", mapClick);
197210

211+
let toolBar;
212+
// 得使用 ；function 定义函数
213+
function dddddd(evtObj) {
214+
console.log(evtObj);
215+
}
216+
198217
function mapReady() {
199-
console.log(1);
218+
console.log("地图加载完成");
200219

201-
let doctorNumFlayer = new FeatureLayer(
202-
serverUrl().fenxi.xiangcunyisheng + "/0",
203-
{
204-
outFields: ["*"], //必须要有返回值，提供给热力图进行分析
205-
}
220+
// 配置缓冲区参数
221+
EsriConfig.defaults.geometryService = new GeometryService(
222+
serverUrl().Utilities.Geometry
206223
);
224+
EsriConfig.defaults.io.proxyUrl = "/proxy/";
225+
EsriConfig.defaults.io.alwaysUseProxy = false;
207226

208-
let heatmapRenderer = new HeatmapRenderer({
209-
field: "yiliao", // 根据哪一个字段进行渲染
210-
blurRadius: 12, //蓝色
211-
colors: [
212-
"rgba(30,144,255, 0)",
213-
"rgba(30,144,255,0.8)",
214-
"rgb(0, 255, 0)",
215-
"rgb(255, 255, 0)",
216-
"rgb(255, 0, 0)",
217-
],
218-
});
219-
doctorNumFlayer.setRenderer(heatmapRenderer);
227+
// 定义一个绘图工具
228+
toolBar = new Draw(that.map);
229+
toolBar.activate(Draw.CIRCLE);
230+
toolBar.on("draw-complete", nongyecompany);
231+
}
220232

221-
that.map.addLayer(doctorNumFlayer); // 将热力图分析添加到地图上
233+
function nongyecompany(evtObj) {
234+
//对弹窗进行判断
235+
var geometry = evtObj.geometry;
236+
var symbol;
237+
// symbol;
238+
switch (geometry.type) {
239+
case "point":
240+
symbol = new SimpleMarkerSymbol(
241+
SimpleMarkerSymbol.STYLE_SQUARE,
242+
10,
243+
new SimpleLineSymbol(
244+
SimpleLineSymbol.STYLE_SOLID,
245+
new EsriColor([255, 0, 0]),
246+
1
247+
),
248+
new EsriColor([0, 255, 0, 0.25])
249+
);
250+
break;
251+
case "polyline":
252+
symbol = new SimpleLineSymbol(
253+
SimpleLineSymbol.STYLE_DASH,
254+
new EsriColor([255, 0, 0]),
255+
1
256+
);
257+
break;
258+
case "polygon":
259+
symbol = new SimpleFillSymbol(
260+
SimpleFillSymbol.STYLE_NONE,
261+
new SimpleLineSymbol(
262+
SimpleLineSymbol.STYLE_DASHDOT,
263+
new EsriColor([255, 0, 0]),
264+
2
265+
),
266+
new EsriColor([255, 255, 0, 0.25])
267+
);
268+
break;
269+
}
270+
var graphic = new Graphic(geometry, symbol);
271+
that.map.graphics.add(graphic);
272+
273+
var params = new BufferParameters();
274+
params.distances = ["10"];
275+
params.bufferSpatialReference = new SpatialReference({
276+
wkid: 102100,
277+
});
278+
params.outSpatialReference = that.map.spatialReference;
279+
params.unit = GeometryService["UNIT_KILOMETER"];
280+
NormalizeUtils.normalizeCentralMeridian([geometry]).then(function(
281+
normalizedGeometries
282+
) {
283+
var normalizedGeometry = normalizedGeometries[0];
284+
if (normalizedGeometry.type === "polygon") {
285+
EsriConfig.defaults.geometryService.simplify(
286+
[normalizedGeometry],
287+
function(geometries) {
288+
params.geometries = geometries;
289+
EsriConfig.defaults.geometryService.buffer(
290+
params,
291+
showBuffer1
292+
);
293+
}
294+
);
295+
} else {
296+
params.geometries = [normalizedGeometry];
297+
EsriConfig.defaults.geometryService.buffer(params, showBuffer1);
298+
}
299+
});
222300
}
301+
302+
let showBuffer1 = (bufferedGeometries) => {
303+
// var symbol = new SimpleFillSymbol(
304+
// SimpleFillSymbol.STYLE_SOLID,
305+
// new SimpleLineSymbol(
306+
// SimpleLineSymbol.STYLE_SOLID,
307+
// new EsriColor([255, 0, 0, 0.65]),
308+
// 2
309+
// ),
310+
// new EsriColor([255, 0, 0, 0.35])
311+
// );
312+
313+
console.log();
314+
const geometries = bufferedGeometries[0].rings[0];
315+
console.log(geometries);
316+
console.log(that.map);
317+
318+
geometries.forEach(function(geometry) {
319+
console.log(geometry);
320+
321+
let graphicBuffer = geometry;
322+
var BufferTask = QueryTask(
323+
serverUrl().huinong.zhongzhiBuffer + "/0"
324+
);
325+
var Bufferquery = new Query();
326+
Bufferquery.returnGeometry = true;
327+
// var sr1 = new SpatialReference(4490);
328+
graphicBuffer.spatialReference = new SpatialReference(4490);
329+
Bufferquery.geometry = graphicBuffer;
330+
// Bufferquery.geometry = graphicBuffer.setSpatialReference(sr1);
331+
Bufferquery.outFields = ["*"];
332+
BufferTask.execute(Bufferquery, showResults);
333+
});
334+
335+
function showResults(featureSet) {
336+
that.map.graphics.clear();
337+
console.log(featureSet);
338+
}
339+
};
223340
}
224341
) //end
225342
.catch((err) => {

0 commit comments

Comments
 (0)