'esri/geometry/Extent'

`esri/geometry/Extent` 是 Esri JavaScript API 中的一个核心概念，它是用于表示地理空间数据区域边界的一个类。在 ArcGIS 和 Web GIS 开发中，Extent 对象通常用来描述地图视图的范围，包括左上角和右下角坐标。这个对象包含了地图可视化的地理坐标范围，包括东西（x）和南北（y）坐标。 `Extent` 对象具有以下几个关键属性： - `xmin`：西经坐标（最小经度） - `ymin`：南纬坐标（最小纬度） - `xmax`：东经坐标（最大经度） - `ymax`：北纬坐标（最大纬度）创建一个 `Extent` 对象的基本语法如下： ```javascript var extent = new esri.geometry.Extent(xmin, ymin, xmax, ymax, spatialReference); ``` `spatialReference` 是一个 SpatialReference 对象，它定义了坐标系和投影方式。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过属性查询地图服务中的信息</title> <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">  <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/themes/calcite/dijit/calcite.css"> <script src="https://js.arcgis.com/3.41/"></script> <script> require(["esri/map", //加载地图组件 "dojo/dom", "dojo/on", "esri/InfoTemplate", "esri/graphic", "esri/geometry/Point",//加载点对象组件 "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Extent",//加载范围组件 "esri/layers/FeatureLayer", //加载FeatureLayer地图组件 // "esri/dijit/FeatureTable", "esri/layers/WebTiledLayer", //加载切片地图组件 "esri/layers/ArcGISDynamicMapServiceLayer",//加载动态地图组件 "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "dojo/domReady!" ], function (Map, dom, on, InfoTemplate, Graphic, Point, SimpleMarkerSymbol,Extent, FeatureLayer, WebTiledLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, UniqueValueRenderer, Query, QueryTask, Color, GeoJsonLayer) { //初始化地图容器 // map = new Map("map", { logo: false, slider: false }, {zoom: 8}); map = new Map("map", { center: [109.33789 , 29.57985], basemap: "satellite", zoom: 10, sliderStyle: "small", logo: false }); // 创建底图 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap,0); // 创建动态图层 var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://116.62.63.94:6080/arcgis/rest/services/sanhuxiangtest/MapServer"); map.addLayer(dynamicLayer,99); }) </script> </head> <body class="tundra"> <div id="map" style="width:900px; height:580px; border:1px solid #000;"></div> 类别名称:<input class="nm" type="text"> </body> </html>

这段代码是一个简单的HTML页面，用于通过属性查询地图服务中的信息。以下是代码的主要部分： 1. 引入必要的CSS和JavaScript库：代码中使用了ArcGIS API for JavaScript的版本3.41，并引入了其他必要的库文件。 2. 初始化地图：使用`new Map("map", options)`创建一个地图容器，其中`options`包含了地图的一些设置，例如中心点、底图、缩放级别等。 3. 创建底图和动态图层：使用`new ArcGISTiledMapServiceLayer(url)`创建一个底图，以及使用`new ArcGISDynamicMapServiceLayer(url)`创建一个动态图层。这些图层可以通过URL指定，以加载地图数据。 4. 将图层添加到地图上：使用`map.addLayer(layer, index)`方法将底图和动态图层添加到地图上。`index`参数可选，用于指定图层的显示顺序。在页面中还有一个输入框，用于输入类别名称。您可以在页面加载完成后，通过属性查询来过滤地图服务中的信息。请注意，该代码使用的是ArcGIS API for JavaScript版本3.x，而不是最新版本的4.x。如果您要使用最新版本的API，请相应地修改代码。另外，确保替换URL和其他参数以适应您自己的地图服务和需求。

vue2+arcgis添加流动风场效果

要在 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 添加流动风场效果的基本步骤。

'esri/geometry/Extent'

vue2+arcgis添加流动风场效果

相关推荐

【JavaScript源代码】arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路).docx

arcgis-10操作总结1

map-browse.rar_GIS编程_C#_

arcgis js 拉框查询

arcgis WMTSLayer 如何加载全部子图层

js arcgis 4.x 运行轨迹

使用ArcGIS Maps SDK.NET WPF app(esri)如何新建图层属性，并且打开shp文件

写一个基于arcgis js的沈阳市爱国主义教育基地点查询搜索框

arcgis api for js 获取绘制多边形的范围

arcgis api for js 实现要素框选

如何在vs中使用arcgis显示shp地图

C#选择打开一个要素文件，并将要素保存在FeatureClass中，生成在要素范围之外的均匀分布的随机点

Arcmap创建UIbutton工具，实现循环地调转到Wind点图层中中每一个点到地图窗口中心，每隔1秒钟跳转一次。

Python中使用GDAL和OGR库来实现将平面划分为小的平面元的代码示例

使用Python获取卫星影像有效值区域边界轮廓矢量范围

基于ArcGIS Engine 10.8 设计一个软件，软件的功能包括: (1)GIS数据的加载、显示、查询、量测等GIS软件基本功能; (2)空间插值功能; (3)工具可扩展。给出这个软件的实现步骤和代码。

最新推荐

Arcgis开发集锦.doc——

120吨双级反渗透程序+混床程序，以及阻垢剂、杀菌剂 加药 一键制水，一键反洗，一键正洗，无人值守 西门子S7-200 sm

java基于SpringBoot+vue 校园新闻管理系统源码 带毕业论文

weixin237基于微信小程序的医院挂号预约系统ssm.rar

基于Matlab界面GUI设计的打地鼠游戏[Matlab界面GUI设计].zip

最优条件下三次B样条小波边缘检测算子研究

管理建模和仿真的文件

递归阶乘速成：从基础到高级的9个优化策略

pcl库在CMakeLists。txt配置

深入解析：wav文件格式结构

120吨双级反渗透程序+混床程序，以及阻垢剂、杀菌剂加药一键制水，一键反洗，一键正洗，无人值守西门子S7-200 sm

java基于SpringBoot+vue 校园新闻管理系统源码带毕业论文