# ArcGIS API For Javascript 4.15 绘制地图：GeometryEngine 和 要素之间的空间位置关系

56 篇文章 37 订阅

## 1、HTML 页面

## index.html

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第九讲-GeometryEngine</title>
<script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
<script src="js/index.js"></script>

<body>
<div id="viewDiv">
<div class="toolbar">
<button id="btnBuffer">Buffer</button>
<button id="btnDifference">Difference</button>
<button id="btnIntersect">Intersect</button>
<button id="btnUnion">Union</button>
<button id="btnConvexHull">ConvexHull</button>
<button id="btnPlanarArea">PlannarArea</button>
<button id="btnGeodesicArea">GeodesicArea</button>
</div>
</div>
</body>
</html>


## 2、样式设置

## index.css

html,
body {
width: 100%;
height: 100%;
margin: 0;
}

#viewDiv {
width: 100%;
height: 100%;
}

.toolbar {
position: absolute;
top: 20px;
right: 20px;
}


## 3、Javascript API 实现地图绘制

## index.js

require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/geometryEngine",
"esri/geometry/Polygon",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/LayerList"
], function(Map, MapView, geometryEngine, Polygon, Graphic, GraphicsLayer, LayerList) {

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

var view = new MapView({
container: "viewDiv",
map: map,
center: [0, 0],
zoom: 15
});

var layerList = new LayerList({
view: view
});

// const rings = [
//     [
//         // first ring
//         [-97.06138, 32.837, 35.1, 4.8],
//         [-97.06133, 32.836, 35.2, 4.1],
//         [-97.06124, 32.834, 35.3, 4.2],
//         [-97.06138, 32.837, 35.1, 4.8]
//     ],
//     [ // second ring
//         [-97.06326, 32.759, 35.4],
//         [-97.06298, 32.755, 35.5],
//         [-97.06153, 32.749, 35.6],
//         [-97.06326, 32.759, 35.4]
//     ]
// ];

var fillSymbolA = {
type: "simple-fill",
color: [51, 51, 204, 0.9],
style: "solid",
outline: {
color: "red",
width: 1
}
};

var fillSymbolB = {
type: "simple-fill",
color: [255, 255, 0, 0.9],
style: "solid",
outline: {
color: "green",
width: 1
}
};

var graphicsLayer = new GraphicsLayer({
title: "原始图形"
});

// 多边形A的坐标
const ringsA = [
[
[0, 0],
[1000, 0],
[1000, 1000],
[0, 1000],
[0, 0]
]
];

const polygonA = new Polygon({
hasZ: false,
hasM: false,
rings: ringsA,
spatialReference: {
// wkid: 4826
wkid: 3857
}
});

var graphicA = new Graphic({
geometry: polygonA,
symbol: fillSymbolA
});

// view.goto(graphicA);

const ringsB = [
[
[500, 500],
[1500, 500],
[1500, 1500],
[500, 1500],
[500, 500]
]
];

const polygonB = new Polygon({
hasZ: false,
hasM: false,
rings: ringsB,
spatialReference: {
wkid: 3857
}
});

var graphicB = new Graphic({
geometry: polygonB,
symbol: fillSymbolB
});

// view.goto(graphicB);

// 存放缓冲区运算结果的图形的图层
var bufferLayer = new GraphicsLayer({
title: "缓冲区图层"
});

// Buffer运算
bufferLayer.removeAll();
// var bufferPolygon = geometryEngine.buffer(polygonA, 300, "meters");
var bufferPolygon = geometryEngine.geodesicBuffer(polygonB, 300, "meters");
var fillSymbolBuffer = {
type: "simple-fill",
color: [255, 0, 0, 0.9],
style: "solid",
outline: {
color: "blue",
width: 1
}
};
var graphicBuffer = new Graphic({
geometry: bufferPolygon,
symbol: fillSymbolBuffer
});
// view.graphics.removeAll();
});

// 存放Difference运算结果图形的图层
var differenceLayer = new GraphicsLayer({
title: "差集图层"
});
// Difference运算
differenceLayer.removeAll();
var differencePolygon = geometryEngine.difference(polygonB, polygonA);
var fillSymbolDifference = {
type: "simple-fill",
color: [255, 0, 0, 0.9],
style: "solid",
outline: {
color: "blue",
width: 1
}
};
var graphicDifference = new Graphic({
geometry: differencePolygon,
symbol: fillSymbolDifference
});
});

// 存放Intersect运算结果图形的图层
var intersectLayer = new GraphicsLayer({
title: "交集图层"
});
// Intersect运算
intersectLayer.removeAll();
var intersectPolygon = geometryEngine.intersect(polygonA, polygonB);
var fillSymbolIntersect = {
type: "simple-fill",
color: [255, 0, 0, 0.9],
style: "solid",
outline: {
color: "blue",
width: 1
}
};
var graphicIntersect = new Graphic({
geometry: intersectPolygon,
symbol: fillSymbolIntersect
});
});

// 存放Union运算结果的图层
var unionLayer = new GraphicsLayer({
title: "并集图层"
});
// Union运算
unionLayer.removeAll();
var unionPolygon = geometryEngine.union(polygonA, polygonB);
var fillSymbolUnion = {
type: "simple-fill",
color: [255, 0, 0, 0.9],
style: "solid",
outline: {
color: "blue",
width: 1
}
};
var graphicUnion = new Graphic({
geometry: unionPolygon,
symbol: fillSymbolUnion
});
});

// 存放ConvexHull运算结果的图形的图层
var convexHullLayer = new GraphicsLayer({
title: "最小凸包图层"
});
// ConvexHull运算
convexHullLayer.removeAll();
var convexHullPolygon = geometryEngine.convexHull(polygonA);
var fillSymbolConvexHull = {
type: "simple-fill",
color: [255, 0, 0, 0.9],
style: "solid",
outline: {
color: "blue",
width: 1
}
};
var graphicConvexHull = new Graphic({
geometry: convexHullPolygon,
symbol: fillSymbolConvexHull
});
});

// 计算平面面积
var planarArea = geometryEngine.planarArea(polygonA, "square-meters");
console.log("polygonA的平面面积是：", planarArea, "平方米");

});

// 计算球面面积
var geodesicArea = geometryEngine.geodesicArea(polygonA, "square-meters");
console.log("polygonA的球面面积是：", geodesicArea, "平方米");
});
});


• 0
点赞
• 2
收藏
• 0
评论
12-06 682
12-06 2121
03-31 1482
03-27 659
12-06 1370
05-22 288
12-21 715
03-27 2627

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助