|
arcgis三维处理方案很多，以前经常使用第三方的三维模型插件类似threejs，但是这类插件虽说能在地图上显示，作为要素图层在地图上显示时点击效果等想要和arcgis完全兼容掉很难，后来使用arcgis pro发布三维模型，然后发布符合i3s标准的json模型，这个解决方案是最完美的，但是现在arcgis pro试用期时间太短，几天就不让用了，再后来就选择用ArcGIS API for JavaScript4.7版本的mesh绘制，featurelayer本来就完全继承自Graghicslayer所以界面看起来毫无违和感（*注：在4.7版本中贴图路径必须是服务器路径，相对路径和绝对路径都不行，下面代码中没贴代码，感兴趣的可以自己去查下）
Working with 3D mesh primitives - 4.7
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
require([
"esri/Map",
"esri/Graphic",
"esri/views/SceneView",
"esri/geometry/Mesh",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/geometry/support/meshUtils",
"esri/geometry/support/ImageMeshColor",
"dojo/domReady!"
],
function (
Map, Graphic,
SceneView,
Mesh, Point, SpatialReference,
meshUtils, ImageMeshColor
) {
var map = new Map({
basemap: "satellite",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
environment: {
atmosphere: {
quality: "high"
},
lighting: {
directShadowsEnabled: true,
ambientOcclusionEnabled: true
}
},
camera: {
position: [7.8233347, 46.3409284, 2032.93599],
heading: 19.72,
tilt: 86.007
}
});
function createSnowManGeometry(pt) {
var blackMaterial = {
color: "black"
};
var orangeMaterial = {
color: "orange"
};
var redMaterial = {
color: "red"
};
// 消防栓底部圆柱
var lowerBody = Mesh.createCylinder(pt, {
size: {
width: 4,
depth: 4,
height: 0.5
},
material: redMaterial
});
//消防栓粗枝杆
var upperBody2 = Mesh.createCylinder(pt, {
size: {
width: 3,
depth: 3,
height: 4
},
material: redMaterial
});
//消防栓细枝杆
var upperBody3 = Mesh.createCylinder(pt, {
size: {
width: 0.6,
depth: 0.6,
height: 6
},
material: redMaterial
});
//消防栓中间横杆
var hengBody3 = Mesh.createCylinder(pt, {
size: {
width: 1.7,
depth: 1.7,
height: 4
},
material: redMaterial
});
var hengBody2 = Mesh.createCylinder(pt, {
size: {
width: 0.7,
depth: 0.7,
height: 5
},
material: redMaterial
});
//消防栓中间横杆两端办圆球
var hengBodyphere = Mesh.createSphere(pt, {
size: 1.7,
material: redMaterial
});
var hengBodyphere2 = Mesh.createSphere(pt, {
size: 1.7,
material: redMaterial
});
// var head = Mesh.createBox(pt, {
// size: {
// width: 3.9,
// height: 0.3,
// depth: 0.5
// },
// material: redMaterial
// });
// var head2 = Mesh.createBox(pt, {
// size: {
// width: 3.9,
// height: 0.3,
// depth: 0.5
// },
// material: redMaterial
// });
var nose = Mesh.createCylinder(pt, {
size: {
width: 3.5,
depth: 3.5,
height: 0.5
},
material: redMaterial
});
//消防栓顶部半圆球
var topSphereBody = Mesh.createSphere(pt, {
size: 3,
material: redMaterial
});
// Place individual parts to make up the snow man
//upperBody.offset(0, 0, 2.5);
upperBody2.offset(0, 0, 0.5);
upperBody3.offset(0, 0, 0.5);
// head.offset(0, 0, 4.5);
// head2.offset(0, 0, 4.5).rotate(0, 0, -90);
topSphereBody.offset(0, 0, 3);
nose.offset(0, 0, 4.5);
hengBody2.offset(0, 0, 0.5).rotate(90, 0, 0);
hengBody3.offset(0, 0, 1.1).rotate(90, 0, 0);
hengBodyphere.offset(0,1.5, 2.1).rotate(0, 0, 0);
hengBodyphere2.offset(0, -1.5, 2.1).rotate(0, 0, 0);
// Finally, merge the separate parts into a single mesh geometry
return meshUtils.merge([lowerBody, upperBody2, upperBody3, nose, topSphereBody, hengBody2,hengBody3,hengBodyphere,hengBodyphere2
]);
}
// A basic 3d fill symbol. Here we will use the material colors that are set
// on the geometries. We use a white fill symbology (the symbology color
// is mixed into the intrinsic geometry materials and pure white will have no effect).
var symbol = {
type: "mesh-3d",
symbolLayers: [{
type: "fill"
}]
};
// One snow man
var snowManLocation = new Point({
x: 870934.67356809,
y: 5835285.101616,
z: 2013.60,
spatialReference: SpatialReference.WebMercator
});
// Create and add the snowman geometry
var snowManGeometry = createSnowManGeometry(snowManLocation);
view.graphics.add(new Graphic(snowManGeometry, symbol));
});
|