arcgis sceneView 风场

最新推荐文章于 2023-11-08 16:17:29 发布
最新推荐文章于 2023-11-08 16:17:29 发布
阅读量2.3k 收藏
点赞数
文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibalai2009/article/details/122616847
版权

上次的风场在球面不是很好用， 这次给大家带来一个球面用的风场。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a local scene - 4.19</title>
<style>
html,
body,
#sss {
height: 100%;
width: 100%;
}

#homeDiv {
left: 15px;
top: 130px;
z-index: 35;
position: absolute;
}
</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>

<script>


require([
"esri/Map",
"require",
"esri/request",
"esri/views/3d/externalRenderers",
"esri/config",
"esri/Basemap",
"esri/config",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
"esri/views/SceneView",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/ImageryLayer",
"esri/layers/TileLayer",
"esri/layers/SceneLayer",
"esri/layers/ElevationLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/ObjectSymbol3DLayer",
"esri/symbols/IconSymbol3DLayer",
"esri/symbols/PointSymbol3D",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/widgets/Home",
"dojo/domReady!"
], function(Map,require,request,externalRenderers,esriConfig,Basemap,esriConfig,Extent,SpatialReference, SceneView,MapView, FeatureLayer,ImageryLayer,TileLayer,SceneLayer,ElevationLayer,
SimpleRenderer, ObjectSymbol3DLayer,
IconSymbol3DLayer, PointSymbol3D, QueryTask, Query, Home
) {

 


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

var sceneView = new SceneView({
container:"sss",
viewingMode: "global",
map:map,
})

let view;
class ParticleSystem {
constructor(properties) {

this.numParticlesInTrail = 32;
this.numParticleStreams = 1024 * 1024 / this.numParticlesInTrail;
this.useLines = true;
this.timestep = 1 / 60;

this.totalNumParticles = this.numParticleStreams * this.numParticlesInTrail;
this.particlePotSize = 1 << Math.ceil(Math.log(Math.sqrt(this.totalNumParticles)) / Math.LN2);

this.time = 0;
this.gl = properties.gl;
this.view = properties.view;
this.extent = properties.extent;
this.velocityFieldTexture = properties.velocityField;
this.reprojectionTexture = properties.reprojection;
this.initializeResources();
}

initializeResources() {
this.initializeSimulationFBO();
this.initializeQuadGeometryVBO();
this.initializeParticleGeometryVBO();
this.initializePrograms();
this.initializeParticles();
}

更多参考https://xiaozhuanlan.com/topic/4601892735
haibalai2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ArcGIS模拟风场（流场）
J_Giser的博客
09-02 1470
到这里，就可以对点数据进行符号化表达，首先，选择一个箭头的符号，设置个颜色，然后在“旋转”选项卡中选择“中心角度”，在“大小”选项卡中设置下表示符号大小的表达式——因为我们主要用的就是这个标注点，后面我们需要对标注点进行空间连接，添加“中心角度”和“风速”的属性字段，进行符号化，当然，这是下一步的事情了。就是用“风速”字段的值来表示箭头的大小，当然我们根据图纸情况，这里设置的是“风速值*5”来表示箭头大小，也就是说，箭头越大，风速越大。风向的话，你要去查看网站中的代码表，里面有对应的说明，就是这个——
1_风场垂直刨面图_
10-01
ncl气象中计算风场的垂直刨面图，取不同纬度切面。资料为不同高度的风场nc数据
arcgis实现框架配置气泡弹框及风场
weixin_42496466的博客
04-01 722
一、配置信息 气泡弹出配置 { layerCode: 'dianwei', isRLayerPanel: true, url: '/static/geojson/point/station.json', dataPath: 'data/stationList/list', dataLongitudeField: 'longitude', dataLatitudeField: 'latitude', geoType: 'point', opacity: 0.8, fl
arcgis js 4 风场可视化
haibalai2009的博客
01-21 749
当我们做洋流或者风场 可视化时候 echart 虽然也能用 但是数据量过大会很卡 数据调用是这个样子 样例数据 链接: https://pan.baidu.com/s/1yQrIMBMJdSPwnnI8YOC1_Q 提取码: tnhc 最终调用 import {VectorField} from ‘./VectorField’; // this.map 为arcgis Map对象实例 let vectorField = new VectorField(this.map); const options = {
arcgis api for js入门开发系列十八风向流动图
weixin_34245169的博客
03-14 2063
本篇主要讲述的是利用arcgis api实现风向流动图，效果图如下： 实现思路： 在esri提供的开源githunb基础上进行修改的：https://github.com/gishome/wind-js 修改之处： 1.esri的效果是缩放地图时候，粒子数是不变的，即是不会随着地图的缩放而变动，导致地图放大的时候，效果很不好，看不出来风向流动的效果；修改为粒子数是根据地图当前范围ext...
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载
suntongxue100的博客
11-08 638
ArcGIS 气象风场等示例 数据制作、服务发布及前端加载
arcgis for js实现风场
weixin_42496466的博客
01-27 1614
一、风场工具类封装 二、风场调用 三、风场展示效果 如果对您有帮助 感谢支持技术分享，请扫码点赞支持： 技术合作交流qq:2401315930
【ArcGIS学习笔记】怎么用矢量数据画风场图？
weixin_42311008的博客
07-07 805
arcgis怎么画矢量风场图
ArcMap完美实现winddata风场图
asiya的博客
11-16 2044
最近项目涉及气象数据可视化，为验证自己开发的webgl结果的正确性，尝试了用Arcmap展示winddata数据，发现ArcMap完全可以很好的实现风场图的展示。 详细了解请加QQ群365513437,注明‘arcmap 风场图’ .........
Arcgis制作风速风向
热门推荐
小小白的博客
05-02 1万+
reserachget上的一个相关问题 如何处理风速风向Arcgis博客帮助 一个杜克大学的python工具Marine Geospatial Ecology Tools 关于ATan2函数的介绍：ATan2(y,x)，Arcigis ATan2 风场可视化：ventusky（可查历史数据2016.5-至今），earth.nullschool 1.*U/V分量是什么* U is...
js-webgis动态风场-windy
10-16
基于leaflet的生成流体风场代码，和windy网上的一样，完整可用
leaflet-velocity 动态风场
11-06
leaflet-velocity 动态风场,基于leaflet的生成流体风场代码
Arcgis flex api自定义风场点图标样式
09-25
Arcgis flex api自定义风场点图标样式
arcgis api for javascript 4.x 聚合
07-23
实现4.x在三维上的点的聚合，可用于sceneview和mapview
ArcGIS在线地图插件
12-29
ArcGIS在线地图插件
ArcGIS 中国工具插件
05-25
ArcGIS 中国工具，简称 CTools ，集成在 ArcMap10.0, ArcMap10.1, ArcMap 10.2, ArcMap 10.3，ArcMap 10.4,ArcMap 10.5， ArcMap10.6 安装就可以直接使用。主要有以下功能 1. 接合图表生成 2. 图框工具 3. 制图工具...
ArcGIS地图边框样式
最新发布
04-04
ArcGIS地图边框样式，灰色，透明
GIS风场渲染
xing_1209的博客
06-04 579
GIS风场渲染一、引入svg格式图片1、问：2、 答：3、 最后实现：二、图标大小随地图缩放1、问：2、 答： 一、引入svg格式图片 1、问： arcgis官网里 这两行代码是什么意思啊？ 我想把svg格式的图片引入到代码里，该怎么写？ setPath("M14.5,29 23.5,0 14.5,9 5.5,0z") 是引入图片的路径吗？ 我改了两次 都不对， 2、 答： 你这个字符串是svg格式， mz分别是svg的起止标记，setpath应该是指绘制svg
手把手教会你使用Arcgis画流场图
MarineWitch的博客
07-22 1万+
手把手教会你使用Arcgis画流场图 手把手教会你使用Arcgis画流场图 我以前一直都是用MATLAB绘制流场图的，但是工作原因让我不得不使用Arcgis画流场图。在网上找到了一些教程，但是感觉讲得不是很清晰，让Arcgis小白的我走了很多弯路。好不容易琢磨出来了，于是给大家分享一下如何用Arcgis画流场图。方法过于不方便，希望大家永远不需要用Arcgis画流场。 1.准备数据 （1）这里我使用的是HYCOM流场数据，大家手中有什么流场数据都可以使用。因为我的lon、lat数组均是1维：lon(301X
vue2+arcgis添加流动风场效果
05-18
要在 Vue2 中添加流动风场效果，需要使用 ArcGIS API for JavaScript。以下是一些步骤： 1. 安装 ArcGIS API for JavaScript： ``` npm install --save @arcgis/core ``` 2. 在 Vue 项目中引入 ArcGIS API for JavaScript： ```javascript import * as esriLoader from 'esri-loader'; esriLoader.loadModules([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Polyline", "esri/symbols/ArrowSymbol3D", "esri/symbols/LabelSymbol3D", "esri/symbols/TextSymbol3DLayer", "esri/symbols/PolygonSymbol3D", "esri/layers/SceneLayer", "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/symbols/TextSymbol", "esri/symbols/PictureMarkerSymbol", "esri/layers/MapImageLayer", "esri/layers/WebTileLayer", "esri/widgets/Legend", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/widgets/Search", "esri/widgets/Locate", "esri/tasks/Locator", "esri/widgets/Measurement", "esri/widgets/AreaMeasurement2D", "esri/widgets/DistanceMeasurement2D", "esri/layers/TileLayer", "esri/layers/ImageryLayer", "esri/layers/VectorTileLayer", "esri/widgets/Home", "esri/widgets/BasemapGallery", "esri/widgets/CoordinateConversion", "esri/widgets/Bookmarks", "esri/widgets/Print", "esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/tasks/IdentifyTask", "esri/tasks/support/IdentifyParameters", "esri/tasks/support/Query", "esri/tasks/support/StatisticDefinition", "esri/widgets/Expand", "esri/core/watchUtils", "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/geometry/Polygon", "esri/geometry/geometryEngine", "esri/config", "esri/request", "esri/Color", "esri/geometry/support/webMercatorUtils", "esri/geometry/geometryEngineAsync", "esri/geometry/SpatialReference", "esri/layers/StreamLayer", ], { css: true }).then(([ Map, MapView, FeatureLayer, SimpleLineSymbol, SimpleRenderer, GraphicsLayer, Graphic, Polyline, ArrowSymbol3D, LabelSymbol3D, TextSymbol3DLayer, PolygonSymbol3D, SceneLayer, SimpleFillSymbol, UniqueValueRenderer, TextSymbol, PictureMarkerSymbol, MapImageLayer, WebTileLayer, Legend, Point, SimpleMarkerSymbol, Search, Locate, Locator, Measurement, AreaMeasurement2D, DistanceMeasurement2D, TileLayer, ImageryLayer, VectorTileLayer, Home, BasemapGallery, CoordinateConversion, Bookmarks, Print, Query, QueryTask, IdentifyTask, IdentifyParameters, StatisticDefinition, Expand, watchUtils, SpatialReference, Extent, Polygon, geometryEngine, esriConfig, esriRequest, Color, webMercatorUtils, geometryEngineAsync, SpatialReference2, StreamLayer ]) => { // 将这些模块作为参数传递给组件 // ... }) ``` 3. 创建一个 MapView 组件： ```javascript <template> <div class="map-container"> <div class="map" ref="map"></div> </div> </template> <script> export default { name: 'MapView', data() { return { map: null, view: null, streamLayer: null, windDirection: 0, windSpeed: 0, windVariation: 0, windLayerUrl: '' } }, mounted() { this.initMap(); }, methods: { async initMap() { const [Map, MapView] = await esriLoader.loadModules([ "esri/Map", "esri/views/MapView"]); // 创建地图 this.map = new Map({ basemap: "streets-navigation-vector" }); // 创建 MapView this.view = new MapView({ container: this.$refs.map, map: this.map, center: [-118.71511,34.09042], zoom: 9 }); // 在地图上添加流动风场图层 this.addStreamLayer(); }, async addStreamLayer() { const [StreamLayer] = await esriLoader.loadModules(["esri/layers/StreamLayer"]); // 风场图层 URL this.windLayerUrl = "https://services.arcgis.com/7JUzYtqTbU7kbDUo/arcgis/rest/services/Wind_Stream_Layer/FeatureServer/0"; // 创建从服务器动态下载数据的流动风场图层 this.streamLayer = new StreamLayer({ url: this.windLayerUrl, purgeOptions: { displayCount: 10000 }, renderer: { type: "simple", symbol: { type: "simple-line", color: [255, 255, 255, 0.5], width: 1, style: "solid" } } }); // 将图层添加到地图中 this.map.add(this.streamLayer); // 监听风向和风速的变化 this.streamLayer.on("update", this.updateWind); }, updateWind(event) { if (event) { // 获取风向、风速、风向变化量 this.windDirection = event.windDirection || 0; this.windSpeed = event.windSpeed || 0; this.windVariation = event.windVariation || 0; } // 根据风向和变化量计算箭头的偏移角度 const angle = this.windDirection + this.windVariation; // 创建箭头符号 const arrowSymbol = new ArrowSymbol3D({ size: 6, height: 20, width: 10, color: "red" }); // 创建标签符号 const labelSymbol = new LabelSymbol3D({ symbolLayers: [new TextSymbol3DLayer({ material: { color: "black" }, size: 20, text: `${this.windSpeed} mph` })] }); // 创建风向线符号 const lineSymbol = new SimpleLineSymbol({ color: "white", width: 2, style: "solid" }); // 创建面符号 const fillSymbol = new PolygonSymbol3D({ symbolLayers: [ { type: "extrude", size: 10, material: { color: "red" } } ] }); // 创建风向线 const polyline = new Polyline({ paths: [[[0, 0], [0, 30]]], spatialReference: { wkid: 4326 } }); // 旋转风向线并添加到箭头符号中 arrowSymbol.symbolLayers.add(new Symbol3DLayer({ symbol: lineSymbol.clone().rotate(angle), width: 10 })); // 添加箭头符号和标签符号到风场图层 event.features.forEach(feature => { feature.symbol = arrowSymbol; feature.labelSymbol = labelSymbol; feature.geometry = geometryEngineAsync.rotate(feature.geometry, angle, new Point({ x: feature.geometry.extent.center.x, y: feature.geometry.extent.center.y })); }); // 更新风场图层 this.streamLayer.refresh(); } } } </script> ``` 在这个例子中，我们使用了 `StreamLayer` 来实现流动风场效果。在 `addStreamLayer` 方法中，我们创建了一个 `StreamLayer` 对象，并将其添加到地图中。然后，我们监听 `StreamLayer` 的 `update` 事件来更新风向和风速，并计算箭头的偏移角度。最后，我们创建箭头、标签和风向线符号，并将它们添加到 `StreamLayer` 上的每个要素中。注意，这里我们使用了 `ArrowSymbol3D` 和 `LabelSymbol3D` 来创建箭头和标签符号。 在 `updateWind` 方法中，我们首先获取风向、风速和风向变化量，然后计算箭头的偏移角度。接着，我们创建箭头、标签、风向线和面符号，并将它们添加到要素中。最后，我们旋转风向线并更新风场图层。 这就是如何在 Vue2 中使用 ArcGIS API for JavaScript 添加流动风场效果的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值