绘制多个圆，类似雷达的功能。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" hrel="http://localhost/4.17/esri/css/main.css" /><script src="http://localhost/4.17/dojo/dojo.js"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(["esri/Map","esri/Basemap","esri/views/MapView","esri/views/SceneView","esri/geometry/Extent","esri/geometry/SpatialReference",//几何"esri/geometry/Point","esri/geometry/Polyline","esri/geometry/Polygon","esri/geometry/Circle","esri/Graphic","esri/widgets/Sketch","esri/Color",//切片地图信息"esri/layers/support/TileInfo",//图层"esri/layers/WebTileLayer","esri/views/layers/LayerView","esri/layers/TileLayer","esri/layers/MapImageLayer","esri/layers/FeatureLayer","esri/layers/GraphicsLayer",//符号化"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol",//缓冲参数，用于GeometryService"esri/tasks/support/BufferParameters",//几何处理，投影、简化、缓冲区"esri/tasks/GeometryService",//几何引擎，用于测试、测量和分析两个或多个二维几何图形之间的空间关系,缓冲、修剪、距离、相交、联合、面积距离计算等。"esri/geometry/geometryEngine",//代理"esri/core/urlUtils",//查询"esri/tasks/FindTask","esri/tasks/support/FindParameters","esri/tasks/QueryTask","esri/tasks/support/Query","esri/tasks/IdentifyTask","esri/tasks/support/IdentifyParameters",//打印地图"esri/tasks/PrintTask","esri/tasks/support/PrintTemplate","esri/tasks/support/PrintParameters","dojo/dom","dojo/on","dojo/domReady!"], function(Map,Basemap,MapView,SceneView,Extent,SpatialReference,Point,Polyline,Polygon,Circle,Graphic,Sketch,Color,TileInfo,WebTileLayer,LayerView,TileLayer,MapImageLayer,FeatureLayer,GraphicsLayer,SimpleMarkerSymbol,SimpleFillSymbol,SimpleLineSymbol,BufferParameters,GeometryService,geometryEngine,urlUtils,FindTask,FindParameters,QueryTask,Query,IdentifyTask,IdentifyParameters,PrintTask,PrintTemplate,PrintParameters,dom,on) {var layer = new MapImageLayer({url: "http://localhost:6080/arcgis/rest/services/Qingdao/MapServer"});var map = new Map({ //属性：allLayers、ground、layersbasemap: "topo",layers: [layer]});var view = new MapView({container: "viewDiv",map: map,zoom: 11,SpatialReference: {wkid: 102100,},center: [120.389583, 36.085579] // longitude, latitude});var graphicLayer = new GraphicsLayer();map.add(graphicLayer);view.on("click", function(eve) {var len = 10;var rads = 10000;var rad = rads / len;for (var i = 0; i < len; i++) {var circle = new Circle({type: "circle",center: [eve.mapPoint.longitude, eve.mapPoint.latitude],radius: i * rad,geodesic: true,radiusUnit: "meters",spatialReference: {wkid: 102100}});var SimpleLineSymbol = {type: "simple-line",color: [255, 0, 0],style: "solid",width: 2};var graphic = new Graphic({geometry: circle,symbol: SimpleLineSymbol});graphicLayer.add(graphic);}});});</script>
</head><body><div id="viewDiv"></div>
</body></html>

屏幕坐标

2.经纬度坐标与xy坐标转换问题。

首先，说一下，投影方式。目前常用的投影方法有墨卡托投影（正轴等角圆柱投影)
高斯-克吕格尔投影。
2000国家大地坐标系：高斯-克吕格尔投影

西安80：高斯-克吕格尔投影
北京54：高斯-克吕格尔投影

WGS84(World Geodetic System 1984):墨卡托投影

说一下地理坐标与投影坐标转换的问题
arcgis api for js 使用官方的底图的话，采用的是WGS84地理坐标系即：GCS_WGS_1984，wkid: 4326 。
对应的投影坐标系为：WGS_1984_web_mercator_auxiliary_sphere，采用的是墨卡托投影，wkid: 102100。
所以那官方底图的wkid为102100。
我们使用的地图服务基本是高斯-克吕格尔投影。

MapView类有两个方法，实现屏幕上的坐标（不是投影坐标）与经纬度坐标（地理坐标）的互转。

const mapPoint = {x: eve.mapPoint.longitude,y: eve.mapPoint.latitude,spatialReference: {wkid: 4326}};//const center = view.toMap(eve);   //屏幕上的坐标转经纬度坐标const center = view.toScreen(mapPoint);    / /经纬度坐标转屏幕上的坐标

不过没看出啦啥用。继续

一、墨卡托投影。

如果底图采用的是官方默认的：topo、terrain、streets-relief-vector、streets-night-vector、streets-navigation-vector、streets、satellite、osm、oceans、national-geographic、hybrid、gray、dark-gray
也就是墨卡托投影。可以使用webMercatorUtils对象提供的方法进行地理坐标与投影坐标的互相转换。
实现思路：为MapView添加view.on(“click”, function(eve) {});
回掉函数的参数eve,是个Object，里面有坐标的经纬度坐标（地理坐标），xy坐标（投影坐标）信息。
不过xy坐标的值是反的。

require([“esri/geometry/support/webMercatorUtils”], function(webMercatorUtils) {});

var map = new Map({ //属性：allLayers、ground、layersbasemap: "topo"});var view = new MapView({container: "viewDiv",map: map,zoom: 11,SpatialReference: {wkid: 102100,  //},center: [120.389583, 36.085579] // longitude, latitude});
view.on("click", function(eve) {//xyToLngLat(x, y),参数x：要转换的X坐标值。参数y:要转换的X坐标值。//将给定的Web墨卡托坐标转换为经度和纬度值（十进制度数）。默认情况下，返回的经度是标准化的，//因此它在-180和+180之间//webMercatorUtils类型为Object,var center = webMercatorUtils.xyToLngLat(eve.mapPoint.x, eve.mapPoint.y);//返回值类型为Number[]。经纬度数组   [120.33430803661913, 36.161841322559646]console.log(center);//lngLatToXY(long, lat)//参数 long：要转换的经度值。lat：要转换的纬度值//将给定的纬度和经度（十进制度数）值转换为Web墨卡托XY值。//返回值类型 Number[]//geographicToWebMercator(geometry)//参数 geometry：要转换的输入几何体。//将几何图形从地理单位（wkid:4326）转换为Web墨卡托单位（wkid:3857）。//返回值类型 Geometry。//webMercatorToGeographic(geometry) //参数 geometry：要转换的输入几何体。//将几何图形从Web墨卡托单位（wkid:3857）转换为地理单位（wkid:4326）。//返回值类型 Geometry//project(geometry, spatialReference)//参数 geometry：输入几何体。spatialReference：目标空间引用或具有空间引用特性（如几何体或地图）//的对象。//投影几何体客户端（如果可能）。//返回值类型 Geometry。
}

二、高斯-克吕格投影

在不用官方的底图情况下，使用自己构建的底图。

var basemap = new Basemap({baseLayers: [new FeatureLayer({url: "http://localhost:6080/arcgis/rest/services/qingdao/MapServer/5",title: "Basemap"})],title: "basemap",id: "basemap"});var map = new Map({ //属性：allLayers、ground、layersbasemap: basemap});var view = new MapView({container: "viewDiv",map: map,zoom: 11,SpatialReference: {wkid: 102100,},center: [120.389583, 36.085579] // longitude, latitude});view.on("click", function(event) {view.hitTest(event).then(function(response) {console.log(response);});});

打印结果：

可见经纬度为null,xy坐标是有的，要想把xy左边转为经纬度。需要自己算。算法网上有。

arcgis api for4.x 绘制圆，及坐标转换问题相关推荐

ArcGIS API for JavaScript——绘制工具（Draw）
ArcGIS API for JavaScript--绘制工具(Draw) 在WEB GIS开发过程中,我们不可避免的会用到绘制工具.比如利用绘制工具执行查询任务和利用绘制工具绘制空间分析的处理范围等 ...
ArcGIS API for Silverlight 绘制降雨路径动画
#region 降雨动画演示 2014-04-16List<Graphic> graphics = new List<Graphic>();int INDEX = 0;MapP ...
使用ArcGIS API for Silverlight + Visifire绘制地图统计图
转载地址:http://www.cnblogs.com/potential/archive/2013/03/19/2966866.html 本文示例用的版本为: Silverlight 5+Visif ...
ArcGIS API For JavaScript——空间查询(FindTask和IdentifyTask)
相比较于QueryTask,FindTask和IdentifyTask支持多个图层查询.FindTask支持属性查询,IdentifyTask支持图形查询. 1.FindTask FindTask通过 ...
ArcGIS API For JavaScript——空间查询（QueryTask）
ArcGIS API For JavaScript提供了两个工具类用于查询任务 IdentifyTask:利用该工具类可以对多个图层进行查询,主要利用IdentifyParameters对象来规定空间 ...
ArcGIS API for JS4.8绘制点、线、面、矩形、圆
使用ArcGIS API for JS4.8绘制点(Point).线(Polyline).面(Polygon).矩形(Rectangle).圆(Circle),使用Draw绘制,具体代码如下: < ...
ArcGIS API for Silverlight 调用GP服务绘制等值面
原文:ArcGIS API for Silverlight 调用GP服务绘制等值面 GP服务模型如下图: 示例效果图片如下:
ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
ArcGIS API For Javascript 4.15 绘制地图：结合 Echarts 绘制地形剖面图
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...

arcgis api for4.x 绘制圆，及坐标转换问题

2.经纬度坐标与xy坐标转换问题。

一、墨卡托投影。

二、高斯-克吕格投影

arcgis api for4.x 绘制圆，及坐标转换问题相关推荐

最新文章

热门文章