<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>ArcGIS API for JavaScript 4.22</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
/* 去掉地图聚焦边框 */
.esri-view-surface--inset-outline:focus::after {
outline: none !important;
}
</style>
<!---->
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<!--
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
-->
<script>
require([
"esri/layers/WebTileLayer",
"esri/Map",
"esri/views/SceneView",
"esri/views/MapView",
"esri/geometry/support/webMercatorUtils",
"esri/geometry/geometryEngine",
"esri/Graphic",
"./lib/ellipse.js",
"esri/geometry/Point"
], (WebTileLayer, Map, SceneView,MapView,webMercatorUtils,geometryEngine,Graphic,Ellipse,Point) => {
var map = new Map({
basemap:"osm"
});
/**
const view = new SceneView({
container: "map",
map: map,
center: [118.09555450357054, 24.441293709011138],
zoom:12
});
*/
const view = new MapView({
container: "map", // Reference to the view div created in step 5
map: map, // Reference to the map object created before the view
zoom: 12, // Sets zoom level based on level of detail (LOD)
center: [118.09555450357054, 24.441293709011138] // Sets center point of view using longitude,latitude
});
view.ui.remove('attribution')//这一句用于去除地图下方自带的esri官方的标志
document.getElementById("gather").onclick = () => {
addEllipse();
};
function addEllipse(){
var centerCoor = webMercatorUtils.lngLatToXY(118.09555450357054, 24.441293709011138);
var dpxCoor = webMercatorUtils.lngLatToXY(118.12555450357054, 24.441293709011138);
console.log("centerCoor",centerCoor);
var center=new Point({
hasZ: false,
hasM: false,
x:centerCoor[0],
y:centerCoor[1],
spatialReference: view.spatialReference
});
var dpx=new Point({
hasZ: false,
hasM: false,
x:dpxCoor[0],
y:dpxCoor[1],
spatialReference: view.spatialReference
});
var dis=center.distance(dpx);
console.log("两点距离",dis);
var ell = new Ellipse({
center: {
x: centerCoor[0],
y: centerCoor[1],
spatialReference: { wkid: 102100 }
},
//长半轴坐标值
dpx: {
x: dpxCoor[0],
y: dpxCoor[1],
spatialReference: { wkid: 102100 }
},
semiminor: dis/2,//短半轴
});
ell.initialize();
view.graphics.add(new Graphic({
geometry: ell,
symbol: {
type: 'simple-fill',
color: [ 51,51, 204, 0.7 ],
outline: {
color: 'white',
width: 1
}
}
}));
};
});
</script>
</head>
<body>
<div id="map"></div>
<input type="button" value="叠加椭圆" id="gather"
style="cursor:pointer;position:absolute;left:100px;top:50px;z-index:9999;background:blue;color:white;border:none;font-size:24px">
</body>
</html>
17.（arcgis api for js篇）arcgis api for js叠加椭圆.zip
版权申诉
69 浏览量
2022-03-11
15:51:50
上传
评论
收藏 4KB ZIP 举报
17.（arcgis api for js篇）arcgis api for js叠加椭圆.zip （2个子文件） 
arcgis api for js 
17.（arcgis api for js篇）arcgis api for js叠加椭圆.html 4KB lib 
ellipse.js 8KB资源评论
