ARCGIS js API 探索

最新推荐文章于 2024-02-05 14:56:31 发布

qq_20528973

最新推荐文章于 2024-02-05 14:56:31 发布

阅读量178

点赞数

本文链接：https://blog.youkuaiyun.com/qq_20528973/article/details/84141485

版权

polygan 保存在json中

		require([
		  "esri/geometry/Polygon" 
		],function(Polygon)
		{
			var json={
			"rings":[[[474345.27045475034,3357699.2244015564],[474592.2197065809,3357890.1030503144],[474787.8703215578,3357659.85568025],[474458.60465245036,3357472.5560061564],[474345.27045475034,3357699.2244015564]]],
			"spatialReference":{"wkt":"4326 "}
			};
			var polys = new Polygon(json);
			DrawPolylinePolygonGraphics(polys, 2, BaseDrawLayer, [255, 0, 0], [0, 0, 255, 0.5]);
		})

我的页面

<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>arcgis测试</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://ip:8004/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/javascript" src="http://ip:8004/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script type="text/javascript" src="http://ip:8003/javascript/MapURL.js"></script>
<script type="text/javascript">
//基础图层
var map;
var BaseDlgLayer ;
//卫星图层
var mapYX;
var BaseImageLayer;
//
var BaseDrawLayer;//基础绘制图层
var BaseDrawHighLightLayer;//基础绘制图层
//
var Measuretoolbar
///
//var center={ x: 474527.7981626251, y: 3357708.7683339943};
var center={x: 473440.79833540245, y: 3356618.9275336205}
var zoom=5;
require(["esri/map",
"esri/tasks/query",
"esri/tasks/BufferParameters",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/RouteTask",
"esri/tasks/RouteParameters",
"esri/tasks/FeatureSet",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/tasks/LengthsParameters",
"esri/tasks/AreasAndLengthsParameters",
"esri/tasks/GeometryService",
"esri/toolbars/navigation",
"esri/toolbars/draw",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/_base/array",
"dojo/domReady!",
"esri/SpatialReference"], 
function (Map, Query, BufferParameters, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, RouteTask, RouteParameters, FeatureSet, Graphic, GraphicsLayer, IdentifyTask, IdentifyParameters, LengthsParameters, AreasAndLengthsParameters, GeometryService, Navigation,Draw,PictureMarkerSymbol,SimpleLineSymbol,arrayUtils) 
{
///
	mapYX = new Map("mapYX", 
	{
		logo: false,
	});
	BaseImageLayer = new ArcGISTiledMapServiceLayer(baseimagemapurl, { opacity: 1 });
	mapYX.addLayer(BaseImageLayer);
	///
	map = new Map("mapHX", 
	{
		logo: false,
	});
	BaseDlgLayer = new ArcGISTiledMapServiceLayer(basedlgmapurl, { opacity: 1 });
	map.addLayer(BaseDlgLayer);
	MapBaseImageLayer = new ArcGISTiledMapServiceLayer(baseimagemapurl, { opacity: 1 });
	map.addLayer(MapBaseImageLayer);
	设置卫星图层的显示和隐藏
	//MapBaseImageLayer.hide();
	设置地图缩放等级
	//map.setZoom(1)
	//绘制基本操作图层
	BaseDrawLayer = new GraphicsLayer({ id: "BaseDraw" });
	map.addLayer(BaseDrawLayer);
	BaseDrawHighLightLayer = new GraphicsLayer({ id: "BaseDrawHighLight" });
	map.addLayer(BaseDrawHighLightLayer);
	///
	map.centerAndZoom(center,zoom);
	//
	//map.on("click", mapclick); 
	/// 
	setpoly();
});
</script>

<style>
	table
	{
		width:100%;
		height:100%;
		margin:0;
		bolder:0;
	}
	body
	{
		margin:0;
	}
	.tr1
	{
		//background-color:red;
	}
	.tr2
	{
		//background-color:green;
		height:5rem;
	}
	.div1
	{
		margin: 0;
		padding: 0;
		width:100%;
		height:100%;
	}
	.bt1
	{
		margin:0.5rem;
	}
</style>

<body>
<table>
<tr class="tr1">
<td>
<div class="div1" id="mapYX" style="display:none"></div>
<div class="div1" id="mapHX"></div>
</td>
</tr>
<tr class="tr2" id="t1">
<td>
<button class="bt1" onclick="t1()">荆州市政府</button>
<p id="info"></p>
</td>
</tr>
</table>
	<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
	<script>
	
	function t1()
	{
		move();
		$("#info").html("项目名称:荆州市政府。占地面积：1000亩");
	}
	
	function setpoly()
	{
		require([
		  "esri/geometry/Polygon" 
		],function(Polygon)
		{
			var json={"rings":[[[474345.27045475034,3357699.2244015564],[474592.2197065809,3357890.1030503144],[474787.8703215578,3357659.85568025],[474458.60465245036,3357472.5560061564],[474345.27045475034,3357699.2244015564]]],"spatialReference":{"wkt":"4326 "}};
			var polys = new Polygon(json);
			DrawPolylinePolygonGraphics(polys, 2, BaseDrawLayer, [255, 0, 0], [0, 0, 255, 0.5]);
		})
	}



	///
	function move()
	{
		var c1={ x: 474527.7981626251, y: 3357708.7683339943};
		var z1=4;
		map.centerAndZoom(c1,z1);
	}
	///
	function clear()
	{
		BaseDrawLayer.clear();
	}
	//画图工具结束回调事件
	function callback(event)
	{
		//console.log("call back.",event);
		var geometry = event;
		DrawPolylinePolygonGraphics(geometry, 2, BaseDrawLayer, [255, 0, 0], [0, 0, 255, 0.5]);
	}
	
	//激活话polygon画图工具
	function draw()
	{
		var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });
		toolbar.activate(esri.toolbars.Draw.POLYGON);
		dojo.connect(toolbar, "onDrawEnd", function (geometry) 
		{
			callback(geometry);
			toolbar.deactivate();
		});
	}

	///获得地图的中心点
	function getCenterPoint() 
	{ 
		return map.extent.getCenter();  
	} 
	///画在地图上
	function DrawPolylinePolygonGraphics(geometry, LineWidth, LayerObject, LineColor, GonColor) 
	{
		if (LineWidth == null) {
			LineWidth = 2;
		}
		if (LineColor == null) {
			LineColor = [255, 0, 0];
		}
		if (GonColor == null) {
			GonColor = [0, 0, 255, 0.5];
		}
		//线
		var sympon = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color(LineColor), LineWidth);
		var graphic;
		//if (geometry.type == "polyline") {graphic = new esri.Graphic(geometry, sympon);} 
		graphic = new esri.Graphic(geometry, sympon);
		ev2=graphic;
		LayerObject.add(graphic);
		LayerObject.show();
	}

	</script>
</body>
</html>