<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>arcgis_js_api3.27 创建圆</title>
<!--以下是官网api-->
<!--<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">-->
<!--<script src="https://js.arcgis.com/3.27/"></script>-->
<!--以下是自己发布的服务api。-->
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/esri/css/esri.css">
<script src="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/init.js"></script>
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
/*子元素字体大小的em是相对于父元素字体大小*/
/*元素的width/height/padding/margin用em的话是相对于该元素的font-size*/
#controls {
background: #ffffff;
/*box-shadow: h-shadow v-shadow blur spread color;*/
box-shadow: 0 6px 6px -1px #999;
color: #444;
font-family: sans-serif;
padding: 1em; /*font-size字体大小的内边距。*/
position: absolute;
top: 1em; /*font-size字高度的距离。*/
left: 1em; /*font-size字宽度的距离。*/
/*width: auto;*/
/*height: auto;*/
z-index: 40; /*堆叠顺序。数字越大越靠上。*/
}
#controls div {
padding: 0 0 1em 0;
}
</style>
<script>
var map;
require([
"esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
"esri/graphic", "esri/layers/GraphicsLayer",
"dojo/dom", "dojo/dom-attr", "dojo/domReady!"
], function(
Map, Circle, SimpleFillSymbol,
Graphic, GraphicsLayer,
dom, domAttr
) {
map = new Map("map", {
basemap: "streets",
center: [-120.741, 56.39],
slider: false, // 缩放滑块。
zoom: 6
});
// 面符号,不填充颜色,轮廓线蓝色。
var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
// 创建图形层。
var gl = new GraphicsLayer({ id: "circles" });
// 测量元素。
var geodesic = dom.byId("geodesic");
// 地图添加图形层。
map.addLayer(gl);
// 给地图添加单击事件。
map.on("click", function(e) {
// map.extent,地图单元中当前地图的范围。
// getWidth --> xmin和xmax之间的距离。
var radius = map.extent.getWidth() / 10;
// 圆的半径始终是一样的数值radius: 308683.2950267736,
// 只是测地线圆显得要大一些。(不知道原因。)
var circle = new Circle({
center: e.mapPoint, // 圆的中心点。
// 适用于中心点的空间参考被设置为web Mercator或geographic/geodesic(为true时,将会应用)。
// 其他坐标系不会产生测地线圆。默认情况下,值为false。
geodesic: domAttr.get(geodesic, "checked"),
// 半径。如果没有指定,默认为1000。
radius: radius
});
// console.log("e.mapPoint:", e.mapPoint);
// console.log("radius:", radius);
var graphic = new Graphic(circle, symbol);
gl.add(graphic);
});
});
</script>
</head>
<body>
<div id="map"></div>
<div id="controls">
<div>单击地图</div>
<input type="checkbox" id="geodesic">
<label for="geodesic">Geodesic?</label>
</div>
</body>
</html>
arcgis_js_api3.27 创建圆.html
最新推荐文章于 2023-03-03 22:50:25 发布