08-ArcGIS For JavaScript-通过Mesh绘制几何体（Cylinder，Circle，Box，Pyramid）

server/2025/1/24 21:04:10/

目录

概述

对于三维场景而言，二位的点、线、面，三维的圆、立方体、圆柱等都是比较常见的三维对象，在ArcGIS For JavaScript中我们知道点、线、面可以直接通过Geometry的Point、Polyline和Polygon去绘制，而立方体的几何绘制则需要通过Mesh对象提供的方法去绘制，这怕文章主要讲解Mesh下的几何体绘制。

代码实现

在这里插入图片描述

MeshcreateBox_8">1、Mesh.createBox

Box几何体的绘制：

javascript">function createBox(center, width) {// Place of placementconst point = new Point({// x: center[0],// y: center[1],longitude: center[0],latitude: center[1],z: center[2],spatialReference: SpatialReference.WebMercator});// Boxconst boxMesh = Mesh.createBox(point, {size: { width: width, depth: width, height: width * 5 },material: {color: [58, 38, 0, 1]}});// Empty symbolconst emptyMeshSymbol = new MeshSymbol3D({symbolLayers: [new FillSymbol3DLayer({})]});const box = new Graphic({geometry: boxMesh,symbol: emptyMeshSymbol});view.graphics.add(box);return box;
}

结果：
在这里插入图片描述

Pyramid_47">2、createPyramid

金字塔几何的绘制，其绘制相对复杂：

javascript">function createPyramid(center) {// Place of placementconst point = new Point({// x: center[0],// y: center[1],longitude: center[0],latitude: center[1],z: center[2],spatialReference: SpatialReference.WebMercator});// Pyramidfunction createPyramid(location, { material, size }) {const { height, width, depth } = size;const halfWidth = width / 2;const halfDepth = depth / 2;const origin = [location.x + 10, location.y, location.z]; // adding 10 to the placement position to create the pyramid next to the boxconst position = [0,0,height,-halfWidth,-halfDepth,0,halfWidth,-halfDepth,0,halfWidth,halfDepth,0,-halfWidth,halfDepth,0];const uv = [0.5, 0, 0, 1, 1, 1, 0, 1, 1, 1];const pyramid = new Mesh({vertexSpace: new MeshLocalVertexSpace({ origin }),vertexAttributes: { position, uv },components: [{ faces: [0, 1, 2], material },{ faces: [0, 2, 3], material },{ faces: [0, 3, 4], material },{ faces: [0, 4, 1], material }],spatialReference: location.spatialReference});return pyramid;}const pyramidMesh = createPyramid(point, {size: { width: 350, depth: 350, height: 300 },material: new MeshMaterial({color: [60, 87, 49, 1]})});// Empty symbolconst emptyMeshSymbol = new MeshSymbol3D({symbolLayers: [new FillSymbol3DLayer({})]});const pyramid = new Graphic({geometry: pyramidMesh,symbol: emptyMeshSymbol});view.graphics.add(pyramid);return pyramid;
}

结果：
在这里插入图片描述

MeshcreateSphere_129">3、Mesh.createSphere

球体的绘制：

javascript">function createShpere(centerPos, radius) {let viewPointHeight = centerPos[2];const snowManLocation = new Point({longitude: centerPos[0],latitude: centerPos[1],z: (radius * -1) + centerPos[2],spatialReference: SpatialReference.WebMercator,});point = snowManLocation;// const sphere = Mesh.createSphere(snowManLocation, {const sphere = Mesh.createSphere(snowManLocation, {size: radius * 2,material: { color: 'rgba(255,255,0,0.2)' },densificationFactor: 1,vertexSpace: 'local',});const symbol = {type: 'mesh-3d',symbolLayers: [{ type: 'fill' }],};// const graphic = new Graphic(sphere, symbol);const graphic = new Graphic({geometry: sphere,symbol: symbol});view.graphics.add(graphic);return graphic;}

结果：
在这里插入图片描述

MeshcreateCylinder_166">4、Mesh.createCylinder

圆柱体的绘制：

javascript">function createCylinder(centerPos, radius) {let viewPointHeight = centerPos[2];const snowManLocation = new Point({longitude: centerPos[0],latitude: centerPos[1],z: (radius * -1) + centerPos[2],spatialReference: SpatialReference.WebMercator,});point = snowManLocation;// const sphere = Mesh.createSphere(snowManLocation, {const sphere = Mesh.createCylinder(snowManLocation, {size: radius * 2,material: { color: 'rgba(255,0,0,0.2)' },densificationFactor: 1,vertexSpace: 'local',});const symbol = {type: 'mesh-3d',symbolLayers: [{ type: 'fill' }],};// const graphic = new Graphic(sphere, symbol);const graphic = new Graphic({geometry: sphere,symbol: symbol});view.graphics.add(graphic);return graphic;}

结果：
在这里插入图片描述

完整代码

javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.30/"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(['esri/geometry/Point',"esri/geometry/SpatialReference","esri/geometry/Mesh","esri/views/SceneView","esri/Map","esri/Graphic","esri/symbols/FillSymbol3DLayer","esri/symbols/MeshSymbol3D","esri/geometry/support/MeshMaterial","esri/geometry/support/MeshLocalVertexSpace",], (Point, SpatialReference, Mesh, SceneView, Map,Graphic, FillSymbol3DLayer, MeshSymbol3D, MeshMaterial, MeshLocalVertexSpace) => {let map = new Map({basemap: 'satellite'})let center = [116.4074, 39.9042, 300];let view = new SceneView({container: 'viewDiv',map,camera: {position: {longitude: center[0],latitude: center[1],z: 1000,spatialReference: {wkid: 4326}}}})let point = null;function createShpere(centerPos, radius) {let viewPointHeight = centerPos[2];const snowManLocation = new Point({longitude: centerPos[0],latitude: centerPos[1],z: (radius * -1) + centerPos[2],spatialReference: SpatialReference.WebMercator,});point = snowManLocation;// const sphere = Mesh.createSphere(snowManLocation, {const sphere = Mesh.createSphere(snowManLocation, {size: radius * 2,material: { color: 'rgba(255,255,0,0.2)' },densificationFactor: 1,vertexSpace: 'local',});const symbol = {type: 'mesh-3d',symbolLayers: [{ type: 'fill' }],};// const graphic = new Graphic(sphere, symbol);const graphic = new Graphic({geometry: sphere,symbol: symbol});view.graphics.add(graphic);return graphic;}function createCylinder(centerPos, radius) {let viewPointHeight = centerPos[2];const snowManLocation = new Point({longitude: centerPos[0],latitude: centerPos[1],z: (radius * -1) + centerPos[2],spatialReference: SpatialReference.WebMercator,});point = snowManLocation;// const sphere = Mesh.createSphere(snowManLocation, {const sphere = Mesh.createCylinder(snowManLocation, {size: radius * 2,material: { color: 'rgba(255,0,0,0.2)' },densificationFactor: 1,vertexSpace: 'local',});const symbol = {type: 'mesh-3d',symbolLayers: [{ type: 'fill' }],};// const graphic = new Graphic(sphere, symbol);const graphic = new Graphic({geometry: sphere,symbol: symbol});view.graphics.add(graphic);return graphic;}function createBox(center, width) {// Place of placementconst point = new Point({// x: center[0],// y: center[1],longitude: center[0],latitude: center[1],z: center[2],spatialReference: SpatialReference.WebMercator});// Boxconst boxMesh = Mesh.createBox(point, {size: { width: width, depth: width, height: width * 5 },material: {color: [58, 38, 0, 1]}});// Empty symbolconst emptyMeshSymbol = new MeshSymbol3D({symbolLayers: [new FillSymbol3DLayer({})]});const box = new Graphic({geometry: boxMesh,symbol: emptyMeshSymbol});view.graphics.add(box);return box;}function createPyramid(center) {// Place of placementconst point = new Point({// x: center[0],// y: center[1],longitude: center[0],latitude: center[1],z: center[2],spatialReference: SpatialReference.WebMercator});// Pyramidfunction createPyramid(location, { material, size }) {const { height, width, depth } = size;const halfWidth = width / 2;const halfDepth = depth / 2;const origin = [location.x + 10, location.y, location.z]; // adding 10 to the placement position to create the pyramid next to the boxconst position = [0,0,height,-halfWidth,-halfDepth,0,halfWidth,-halfDepth,0,halfWidth,halfDepth,0,-halfWidth,halfDepth,0];const uv = [0.5, 0, 0, 1, 1, 1, 0, 1, 1, 1];const pyramid = new Mesh({vertexSpace: new MeshLocalVertexSpace({ origin }),vertexAttributes: { position, uv },components: [{ faces: [0, 1, 2], material },{ faces: [0, 2, 3], material },{ faces: [0, 3, 4], material },{ faces: [0, 4, 1], material }],spatialReference: location.spatialReference});return pyramid;}const pyramidMesh = createPyramid(point, {size: { width: 350, depth: 350, height: 300 },material: new MeshMaterial({color: [60, 87, 49, 1]})});// Empty symbolconst emptyMeshSymbol = new MeshSymbol3D({symbolLayers: [new FillSymbol3DLayer({})]});const pyramid = new Graphic({geometry: pyramidMesh,symbol: emptyMeshSymbol});view.graphics.add(pyramid);return pyramid;}let radius = 200;let graphic = createShpere(center, radius);let cylinderCenter = center;cylinderCenter[1] += 0.005;let cylinderRadius = 100;createCylinder(cylinderCenter, cylinderRadius);let boxCenter = center;boxCenter[0] += 0.005;createBox(boxCenter, 50);let pyramidCenter = center;pyramidCenter[0] -= 0.01;createPyramid(pyramidCenter);})</script>
</head><body><div id="viewDiv"></div>
</body></html>

http://www.ppmy.cn/server/161109.html

相关文章

【技术洞察】2024科技绘卷：浪潮、突破、未来

【技术洞察】2024科技绘卷：浪潮、突破、未来

涌动与突破 2024年&#xff0c;科技的浪潮汹涌澎湃&#xff0c;人工智能、量子计算、脑机接口等前沿技术如同璀璨星辰&#xff0c;方便了大家的日常生活&#xff0c;也照亮了人类未来的道路。这一年&#xff0c;科技的突破与创新不断刷新着人们对未来的想象。那么回顾2024年的科…
阅读更多...
软键盘显示/交互问题

软键盘显示/交互问题

日常开发会经常遇到软键盘覆盖界面布局的问题,比如:我有一个fragment,中心布局了EditText,正常情况是 ,当点击这个EditText的时候,输入法会弹出来,但是输入控件会覆盖掉EditText,看不到输入的内容,这种应该怎么处理呢 这个问题通常是因为当软键盘弹出时&#xff0c;EditText 被…
阅读更多...
【Qt】事件

【Qt】事件

事件 事件的处理鼠标事件键盘事件定时器窗口事件 用户进行的各种操作&#xff0c;就会产生事件。给事件关联上函数或处理逻辑&#xff0c;当事件触发时&#xff0c;就能执行对应的代码。多数场景下&#xff0c;程序和用户的交互可以通过 “信号槽” 完成&#xff0c;但在某些特…
阅读更多...
《罗宾逊-旅途VR》Build2108907官方学习版

《罗宾逊-旅途VR》Build2108907官方学习版

《罗宾逊-旅途VR》官方版 https://pan.xunlei.com/s/VODiY5gn_fNxKREdVRdwVboCA1?pwdsh3f# 从第一人称的角度进行探索&#xff0c;玩家将遇到一系列恐龙和生物&#xff0c;这些恐龙和生物会对它们在泰森三世生态系统中的存在做出反应。强调与周围环境的互动&#xff0c;鼓励玩…
阅读更多...
Selenium-WEB自动化测试环境配置

Selenium-WEB自动化测试环境配置

Selenium-WEB-Python-Mac开发环境 一、安装selenium 打开终端 ->pip安装&#xff08;安装命令&#xff1a;pip3 install selenium&#xff09; 安装成功后&#xff0c;可以通过&#xff08; pip3 show selenium &#xff09;命令查看安装的selenium版本信息 二、安装浏览…
阅读更多...
【Pytest】结构介绍

【Pytest】结构介绍

1.目录结构介绍 project_root/ │ ├── tests/ # 测试用例存放目录 │ ├── __init__.py │ ├── test_module1.py │ ├── module1.py # 被测试的模块 ├── conftest.py # pytest配置文件&#xff0c;可定义fixture和钩子函数 ├── py…
阅读更多...
Java - WebSocket

Java - WebSocket

一、WebSocket 1.1、WebSocket概念 WebSocket是一种协议&#xff0c;用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接&#xff0c;这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发&#xff0c;并于2…
阅读更多...
mac 通过 Homebrew 安装 git 遇到的问题

mac 通过 Homebrew 安装 git 遇到的问题

问题真多啊 &#xff01;&#xff01;&#xff01; 解决方式 见 1. / 2. / 3 . / 4. / 5. remote: Enumerating objects: 290323, done. remote: Counting objects: 100% (473/473), done. remote: Compressing objects: 100% (253/253), done. error: RPC failed; curl 92 H…
阅读更多...
最新文章

Copyright @ 2022~2023