<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>缓冲区分析WGS84(4326) - 4.11</title>
<link type="text/css" rel="stylesheet"
href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/css/main.css"/>
<script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv">
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
<span class="esri-icon-radio-checked"></span>
</div>
<div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
<span class="esri-icon-polyline"></span>
</div>
<div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
<span class="esri-icon-polygon"></span>
</div>
<div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="画圆">
<span class="esri-icon-radio-unchecked"></span>
</div>
<div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="画矩形">
<span class="esri-icon-checkbox-unchecked"></span>
</div>
</div>
<script>
require([
"esri/core/urlUtils",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"esri/views/draw/Draw",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/Point",
"esri/geometry/Circle",
"esri/geometry/geometryEngine",
"esri/tasks/GeometryService",
"esri/tasks/support/DistanceParameters",
"dojo/domReady!"
], function (
urlUtils,
TileLayer, Map, MapView,
Draw, Graphic,
Polyline, Polygon, Point, Circle, geometryEngine, GeometryService,
DistanceParameters
) {
let geometryService = new GeometryService({url: "http://60.28.130.106:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"});
// urlUtils.addProxyRule({
// urlPrefix: "http://localhost:6080", //配置文件proxy.config中的地址,要请求的地址
// proxyUrl: "http://localhost/DotNet/proxy.ashx" //部署的代理文件地址
// });
// 上下两行代码都行。
urlUtils.addProxyRule({
urlPrefix: "http://60.28.130.106:6080", //配置文件proxy.config中的地址,要请求的地址
proxyUrl: "http://60.28.130.106:81/DotNet/proxy.ashx" //部署的代理文件地址
});
let layer = new TileLayer({
// url: "http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"
// 上下两行代码都行。
url: "http://60.28.130.106:6080/arcgis/rest/services/DOM2017/MapServer"
});
let map = new Map({
layers: [layer]
});
let view2d = new MapView({
container: "viewDiv",
map: map,
center: [117.39037351789813, 38.952149801075095],
zoom: 1 // 原始大小。
});
console.log("view2d:", view2d);
view2d.ui.add("point-button", "top-left");
view2d.ui.add("line-button", "top-left");
view2d.ui.add("polygon-button", "top-left");
view2d.ui.add("circle-button", "top-left");
view2d.ui.add("rectangle-button", "top-left");
view2d.ui.remove("attribution"); // 移除底部Powered by Esri
let simpleMarkerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 3 // points
}
};
let simpleLineSymbol = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: [4, 90, 141],
width: 4,
cap: "round",
join: "round"
};
let simpleFillSymbol_buffer = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [140, 140, 222, 0.5],
outline: {
color: [0, 0, 0, 0.5],
width: 2
}
};
let simpleFillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.9],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
};
let draw;
view2d.when(function () {
draw = new Draw({
view: view2d
});
document.getElementById("point-button").onclick = function () {
view2d.graphics.removeAll();
enableCreatePoint();
};
document.getElementById("line-button").onclick = function () {
view2d.graphics.removeAll();
enableCreateLine(draw, view2d);
};
document.getElementById("polygon-button").onclick = function () {
view2d.graphics.removeAll();
enableCreatePolygon();
};
document.getElementById("circle-button").onclick = function () {
view2d.graphics.removeAll();
enableCreateCircle();
};
document.getElementById("rectangle-button").onclick = function () {
view2d.graphics.removeAll();
enableCreateRectangle();
};
});
function enableCreatePoint() {
let drawAction = draw.create("point");
drawAction.on(["vertex-add", "vertex-remove", "draw-complete"], createPoint);
}
function createPoint(event) {
//获取所有顶点
let coordinates = event.coordinates;
let graphic = new Graphic({
geometry: {
type: "point", // autocasts as new Point()
x: coordinates[0],
y: coordinates[1],
spatialReference: view2d.spatialReference
},
symbol: simpleMarkerSymbol
});
// 将绘制的图形添加到view
view2d.graphics.add(graphic);
if (event.type == "draw-complete") {
console.log("point:", graphic.geometry);
createBuffer(graphic.geometry);
}
}
function enableCreateLine(draw, view2d) {
let drawAction = draw.create("polyline", {
mode: "click"
});
drawAction.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete"], createPolyline);
}
function createPolyline(event) {
view2d.graphics.removeAll();
// 生成绘制的图形
let graphic = new Graphic({
geometry: {
type: "polyline", // autocasts as new Polyline()
paths: event.vertices,
spatialReference: view2d.spatialReference
},
symbol: simpleLineSymbol
});
// 将绘制的图形添加到view
view2d.graphics.add(graphic);
if (event.type == "draw-complete") {
console.log("polyline:", graphic.geometry);
createBuffer(graphic.geometry);
}
}
function enableCreatePolygon() {
let drawAction = draw.create("polygon", {
mode: "click"
});
drawAction.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete"], createPolygon);
}
function createPolygon(event) {
view2d.graphics.removeAll();
let vertices = event.vertices;
let vertices2 = vertices.slice();
vertices2[vertices2.length] = vertices2[0];
let graphic = new Graphic({
geometry: {
type: "polygon", // autocasts as new Polygon()
rings: vertices2,
spatialReference: view2d.spatialReference
},
symbol: simpleFillSymbol
});
view2d.graphics.add(graphic);
if (event.type == "draw-complete") {
console.log("vertices2:", vertices2);
createBuffer(graphic.geometry);
}
}
function enableCreateRectangle() {
let drawAction = draw.create("rectangle", {
mode: "click" //点击方式加点
});
//顶点移除事件
drawAction.on(["vertex-remove", "cursor-update", "draw-complete"], createRectangle);
}
function createRectangle(event) {
// 清除之前绘制
view2d.graphics.removeAll();
//获取所有顶点
let vertices = event.vertices;
//两点画矩形
if (vertices.length < 2) {
return
}
// 构造矩形坐标环。
let rings = [vertices[0],
[vertices[0][0], vertices[1][1]], vertices[1],
[vertices[1][0], vertices[0][1]]
];
// 生成绘制的图形
let graphic = new Graphic({
geometry: {
type: "polygon", // autocasts as new Polygon()
rings: rings,
spatialReference: view2d.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.9],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view2d.graphics.add(graphic);
// console.log(event);
if (event.type == "draw-complete") {
createBuffer(graphic.geometry);
}
}
function enableCreateCircle() {
let drawAction = draw.create("circle", {
mode: "click" // 点击方式加点
});
drawAction.on(["vertex-remove", "cursor-update", "draw-complete"], createCircle);
}
function createCircle(event) {
// 清除之前绘制
view2d.graphics.removeAll();
//获取所有顶点
let vertices = event.vertices;
//少于一个点无法展示圆
if (vertices.length < 2) {
return
}
//生成绘制的图形,两点画圆
let center = new Point({
hasZ: false,
hasM: false,
x: vertices[0][0],
y: vertices[0][1],
spatialReference: view2d.spatialReference
});
view2d.graphics.add(new Graphic({
geometry: {
type: "point", // autocasts as new Point()
x: vertices[0][0],
y: vertices[0][1],
spatialReference: view2d.spatialReference
},
symbol: simpleMarkerSymbol
}));
view2d.graphics.add(new Graphic({
geometry: {
type: "point", // autocasts as new Point()
x: vertices[1][0],
y: vertices[1][1],
spatialReference: view2d.spatialReference
},
symbol: simpleMarkerSymbol
}));
// 构造“距离参数”。
let distanceParameters = new DistanceParameters({
distanceUnit: "meters",
// geodesic若为真,则测量geometry1和geometry2之间的测地线距离。
geodesic: true,
geometry1: {
type: "point", // autocasts as new Point()
x: vertices[0][0],
y: vertices[0][1],
spatialReference: view2d.spatialReference
},
geometry2: {
type: "point", // autocasts as new Point()
x: vertices[1][0],
y: vertices[1][1],
spatialReference: view2d.spatialReference
}
});
// 计算两点之间的距离。
// 此函数适用于,测量几何之间的平面或测地线距离。
geometryService.distance(distanceParameters).then(function (resolvedVal) {
/*此函数用于,在承诺解析时调用。
* resolvedVal,承诺解析到的值。*/
console.log(resolvedVal);
let circle = new Circle({
hasZ: false,
hasM: false,
center: center,
radius: resolvedVal,
// geodesic适用于中心点的空间参考值设置为Web Mercator(wkid: 3857)或geographic/geodesic (wkid: 4326)。
// 当使用以上任何一种空间引用时,将geodesic设为true,以尽量减少失真。其他坐标系不会产生测地线圆。
geodesic: true,
spatialReference: view2d.spatialReference
});
let graphic = new Graphic({
geometry: circle,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.9],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view2d.graphics.add(graphic);
if (event.type == "draw-complete") {
createBuffer(circle);
console.log("vertices:", vertices);
console.log("center:", center);
console.log("other:", {
type: "point", // autocasts as new Point()
x: vertices[1][0],
y: vertices[1][1],
spatialReference: view2d.spatialReference
});
console.log("dis:", dis);
console.log("circle:", circle);
console.log("graphic:", graphic);
}
}, function (error) {
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
}
function createBuffer(geometry) {
/*此函数用于,构造缓冲区。
* geometry, 用于构造缓冲区的几何图形。
* 注意:当前视图的spatialReference是,isWebMercator: true,
* 所以使用geometryEngine.geodesicBuffer方法!*/
let buffer;
if (view2d.spatialReference.isWGS84 || view2d.spatialReference.isWebMercator) {
// WGS84 (wkid: 4326,地理坐标系) 或 Web Mercator(投影坐标系)坐标系。
console.log("WGS84 或 Web Mercator坐标系。");
buffer = geometryEngine.geodesicBuffer(geometry, 10, "kilometers");
}
else if (view2d.spatialReference.isGeographic) {
// 地理坐标系。
// GeometryService.buffer();
}
else {
// 投影坐标系。
buffer = geometryEngine.buffer(geometry, 10, "kilometers");
}
view2d.graphics.add(
new Graphic({
geometry: buffer,
symbol: simpleFillSymbol_buffer
})
);
}
})
</script>
</body>
</html>
缓冲区分析WGS84(4326) - 4.11.html
最新推荐文章于 2022-12-07 18:00:17 发布