提出背景
4.x api中只提供了2d的要素绘制工具,没有提供3d的,提供的量测微件中,面向三维的只有面积量测和单段长度&高程量测,并不能满足需求,因此,自己动手丰衣足食,决定从底层开始逐步构建多段长度量测工具
具体思路
代码实现
代码不一定能跑通,仅记录思路
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/projection",
"esri/geometry/geometryEngine",
"dojo/dom",
"dojo/domReady!"
], function (
Map, SceneView, GraphicsLayer, Graphic, projection, geometryEngine, dom
) {
var map = new Map({
basemap: "hybrid"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: { // autocasts as new Camera()
position: { // autocasts as new Point()
x: -0.17746710975334712,
y: 51.44543992422466,
z: 1266.7049653716385
},
heading: 0.34445102566290225,
tilt: 82.95536300536367
}
});
var graphicLayer = new GraphicsLayer(); // 线图层
var textLayer = new GraphicsLayer(); // 文字图层
var pointLayer = new GraphicsLayer(); // 点图层
var linePaths = [] // 线要素路径数组
var textGraphics = [] // 文字graphic数组
var pointGraphics = [] // 点要素graphic数组
var lineSymbol = { // 线要素symbol
type: "line-3d", // autocasts as new LineSymbol3D()
symbolLayers: [{
type: "line", // autocasts as new LineSymbol3DLayer()
size: 2, // points
material: { color: "red" }
}]
};
var textSymbol = { // 文本要素symbol
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: "1px",
text: "0",
xoffset: 3,
yoffset: 3,
font: { // autocast as new Font()
size: 12,
family: "sans-serif",
weight: "bold"
}
};
var pointSymbol = { // 点要素symbol
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "object", // autocasts as new ObjectSymbol3DLayer()
width: 5, // diameter of the object from east to west in meters
height: 5, // height of object in meters
depth: 5, // diameter of the object from north to south in meters
resource: { primitive: "sphere" },
material: { color: [226, 119, 40] }
}]
};
view.map.add(graphicLayer);
view.map.add(textLayer);
view.map.add(pointLayer);
view.when(function(){
view.on('click',function(e){ // 监听鼠标点击事件
if(e.button !== 0){ // 鼠标左键,1为中键,2为右键
return;
}
var point = [e.mapPoint.x, e.mapPoint.y, e.mapPoint.z];
addGraphic(point);
});
view.on('key-up', function(e){ // 监听键盘按键
if (e.key == 'Escape') { // 按下esc键
// 清除线要素
linePaths = [];
graphicLayer.removeAll();
// 清除文字要素
text = [];
textLayer.removeAll();
// 清除点要素
point = [];
pointLayer.removeAll();
}
});
});
function addGraphic(point){
linePaths.push(point);
var polyline = {
type: "polyline", // autocasts as new Polyline()
paths: linePaths
};
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
if (linePaths.length >= 2) {
// 计算长度
var length = geometryEngine.geodesicLength(polylineGraphic.geometry, 'meters');
// 添加文字
addText(point, length);
}
addPoint(point); // 添加点
// 添加线
graphicLayer.removeAll();
graphicLayer.add(polylineGraphic);
}
function addText(point, length){
var pt = {
type: "point", // autocasts as new Point()
x: point[0],
y: point[1],
z: point[2]
};
textSymbol.text = length.toFixed(3) + 'm';
var textGraphic = new Graphic({
geometry: pt,
symbol: textSymbol
});
textGraphics.push(textGraphic);
textLayer.removeAll();
textLayer.addMany(textGraphics);
}
function addPoint(point){
var pt = {
type: "point", // autocasts as new Point()
x: point[0],
y: point[1],
z: point[2]
};
var pointGraphic = new Graphic({
geometry: pt,
symbol: pointSymbol,
});
pointGraphics.push(pointGraphic);
pointLayer.removeAll();
pointLayer.addMany(pointGraphics);
}
})