绘制多个圆,类似雷达的功能。
<!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、layers
basemap: "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、layers
basemap: "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、layers
basemap: 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左边转为经纬度。需要自己算。算法网上有。