Web APIs

javascript怎么实现坐标点转面？？

给一堆坐标点，然后把这些点围成一块区域。

编辑于：2016-6-28
已搞定，代码如下，还要启动server自带的GeometryServer服务

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>

<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>



<html>

	<head>

		<script src='${ctx}/assets/jquery/jquery.min.js'></script>

	    <script type="text/javascript" src="${ctx}/assets/arcgis/normal/init.js"></script>

	    <script type="text/javascript" src="${ctx}/assets/arcgis/template.js"></script>

	    <script type="text/javascript" src="${ctx}/assets/js/common.js"></script>

	    

		<script src="${ctx}/assets/js/ace-extra.js"></script>

		<script src="${ctx}/assets/bootstrap/bootstrap.min.js"></script>

		<script src="${ctx}/assets/jquery/freezeheader/jquery.freezeheader.js"></script>

			

		<!-- ace scripts -->

		<script src="${ctx}/assets/js/ace/elements.scroller.js"></script>

		<script src="${ctx}/assets/js/ace/elements.colorpicker.js"></script>

		<script src="${ctx}/assets/js/ace/elements.fileinput.js"></script>

		<script src="${ctx}/assets/js/ace/elements.typeahead.js"></script>

		<script src="${ctx}/assets/js/ace/elements.wysiwyg.js"></script>

		<script src="${ctx}/assets/js/ace/elements.spinner.js"></script>

		<script src="${ctx}/assets/js/ace/elements.treeview.js"></script>

		<script src="${ctx}/assets/js/ace/elements.wizard.js"></script>

		<script src="${ctx}/assets/js/ace/elements.aside.js"></script>

		<script src="${ctx}/assets/js/ace/ace.js"></script>

		<script src="${ctx}/assets/js/ace/ace.ajax-content.js"></script>

		<script src="${ctx}/assets/js/ace/ace.touch-drag.js"></script>

		<script src="${ctx}/assets/js/ace/ace.sidebar.js"></script>

		<script src="${ctx}/assets/js/ace/ace.sidebar-scroll-1.js"></script>

		<script src="${ctx}/assets/js/ace/ace.submenu-hover.js"></script>

		<script src="${ctx}/assets/js/ace/ace.widget-box.js"></script>

		<script src="${ctx}/assets/js/ace/ace.settings.js"></script>

		<script src="${ctx}/assets/js/ace/ace.settings-rtl.js"></script>

		<script src="${ctx}/assets/js/ace/ace.settings-skin.js"></script>

		<script src="${ctx}/assets/js/ace/ace.widget-on-reload.js"></script>

		<script src="${ctx}/assets/js/ace/ace.searchbox-autocomplete.js"></script>	

	    

		<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/bootstrap/css/bootstrap.min.css" />

		<link rel="stylesheet" type="text/css" href="${ctx}/assets/arcgis/normal/dijit/themes/tundra/tundra.css"/>

		<link rel="stylesheet" type="text/css" href="${ctx}/assets/arcgis/normal/esri/css/esri.css" />

        <style>

      		html, body, #mapDiv {

        		padding:0;

        		margin:0;

        		height:100%;

      		}

      		#mapDiv {

        		position: relative;

      		}

      		#info {

        		background: #fff;

        		box-shadow: 0 0 5px #888;

        		left: 1em;

        		padding: 0.5em;

        		position: absolute;

        		top: 1em;

        		z-index: 40;

        		display:none;

      		}

    	</style>

	</head>

	<body>

		<div id="mapDiv">

		</div>

		

		<!-- inline scripts related to this page -->

        <script type="text/javascript">

       		var map, dialog,fpLayer,gLyr;



     			require([

						"esri/basemaps",

     	         		"esri/map",

     	         		"esri/layers/ArcGISImageServiceLayer", 

     	         		"esri/layers/ArcGISDynamicMapServiceLayer",

     	         		"esri/layers/FeatureLayer",

     	         		"esri/symbols/SimpleFillSymbol", 

     	         		"esri/symbols/SimpleLineSymbol",

     	         		"esri/renderers/SimpleRenderer", 

     	         		"esri/graphic", "esri/lang",

     	         		"esri/Color", "dojo/number", 

     	         		"dojo/dom-style",

     	         		"dijit/TooltipDialog", 

     	         		"dijit/popup", 

     	         		"esri/geometry/Point",

     	         		"esri/layers/ImageParameters",

           	         	"esri/geometry/Circle",

              	        "esri/geometry/Polygon",

      	         		"esri/layers/GraphicsLayer",

      	         		"esri/SpatialReference",

      	         		"esri/layers/ArcGISTiledMapServiceLayer",

      	         		"esri/layers/WebTiledLayer",

      	         		"esri/tasks/GeometryService",

      	         		"esri/symbols/PictureMarkerSymbol",

      	         		"esri/graphic",

      	         		"esri/geometry/Polygon",

     	         		"dojo/domReady!"

     	       		], function(

     	       			esriBasemaps,

     	         		Map, 

     	         		ArcGISImageServiceLayer,

     	         		ArcGISDynamicMapServiceLayer,

     	         		FeatureLayer,

     	         		SimpleFillSymbol, 

     	         		SimpleLineSymbol,

     	         		SimpleRenderer, 

     	         		Graphic, 

     	         		esriLang,

     	         		Color, 

     	         		number, 

     	         		domStyle,

     	         		TooltipDialog, 

     	         		dijitPopup,

     	         		Point,

     	         		ImageParameters,

      	         		Circle,

      	         		Polygon,

      	         		GraphicsLayer,

      	         		SpatialReference,

      	         		Tiled,

      	         		WebTiledLayer,

      	         		GeometryService,

      	         		PictureMarkerSymbol,

      	         		graphic,

      	         		Polygon

     	       		) {

	     				if(map != null) {

	 						map.destroy();

	 						$("#mapDiv").html("");

	 					}

	     				

	     				esriBasemaps.selfBasemap = {baseMapLayers: [{url: "http://map.geoq.cn/ArcGIS/rest ... ot%3B}]};

     	       			map = new Map("mapDiv",{logo : false,center:[108.4707150000, 23.6133290000],basemap: "selfBasemap",zoom: 8});//,basemap: "gray",zoom: 9



     	       			var gLyr = new GraphicsLayer({"id":"gLyr"}); 

     	       			var gsvc = new GeometryService("http://116.252.142.191:6080/ar ... 6quot;);

     	       			var points = [

new Point(108.444392,23.111668, new SpatialReference({ wkid: 4326 })),

new Point(108.400505,23.134048, new SpatialReference({ wkid: 4326 })),

new Point(108.50959,23.160524, new SpatialReference({ wkid: 4326 })),

new Point(108.377945,23.158886, new SpatialReference({ wkid: 4326 })),

new Point(108.288356,23.149618, new SpatialReference({ wkid: 4326 })),

new Point(108.268263,23.144011, new SpatialReference({ wkid: 4326 })),

new Point(108.278813,23.1605, new SpatialReference({ wkid: 4326 })),

new Point(108.263102,23.162538, new SpatialReference({ wkid: 4326 })),

new Point(108.2902,23.170248, new SpatialReference({ wkid: 4326 }))

     	       			             ];

     	       			

     	       			for(var i = 0;i < points.length;i++) {



     	       				var url = "${ctx}/assets/images/map/localtion_se_small.png";

		             	    var pms = new esri.symbol.PictureMarkerSymbol({

		    	    			"angle": 0,

		    	    			"xoffset": 0,

		    	    			"yoffset": 0,

		    	    			"type": "esriPMS",

		    	    			"url": url,

		    	    			"contentType": "image/png",

		    	    			"width": 12,

		    	    			"height": 12

		             	    }); 

		             	    

							var attrs = {};

		             	    var gImg = new esri.Graphic(points[i],pms,attrs); 

		             	    gLyr.add(gImg); 

     	       			}

     	       			

     	       			gsvc.convexHull(points,function() {});

     	       			

     	       			gsvc.on("convex-hull-complete",function(geometry) {

     	       				var graLayer = new GraphicsLayer();  

 	       					var polygon = new Polygon(new SpatialReference({wkid:4326}));  

 	       					polygon.addRing(geometry.geometry.rings[0]);

//      	       				for(var i = 0;i < geometry.geometry.rings[0].length;i++) {

//      	       					console.log(geometry.geometry.rings[0][i][0] + "=" + geometry.geometry.rings[0][i][1]);

//      	       				}



							var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

							    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

							    new Color([255,0,0]), 2),new Color([255,255,0,0.25])

							);

 			     		    var graphic = new Graphic(polygon,symbol);  

 		     		        graLayer.add(graphic);  

 			     		    map.addLayer(graLayer); 

     	       			});

     	       			

     	       			map.addLayer(gLyr);

     	       		});

       		

        </script>



	</body>

</html>