作者:李豪山于 2017年06月23日 发布在分类 / 开发技术 / GIS 下,并于 2017年06月23日 编辑
    Arcgis For JavaScript 根据坐标生成点及点击事件获取坐标

       1566

       0


    首先、吐槽一下,ArcGis 开发的资料真的是太少了,而且有用的更好。好了,下面开始


    关于根据坐标生成点,我搜索了很多资料,看了很多的版本,怎么写的都有,结果都不靠谱,最终,天无绝人之路,还是找到了一个靠谱点了.....
    直接代码拿走、运行试下效果,真的可以用,可是别高兴太早,因为我引用的JS版本是4.2的,这位前辈用的是3.7,所以还要替换掉引用的,好,下面替换、然后运行看效果,结果、我要的点 没 出 来,担心的事还是发生了,没办法,继续查阅各大资料,后来看到别的功能例子,好像知道怎么回事了。。仔细看图!!!



    原来真是4.x版本的做了大的改动,在4.x版本开始新增了MapView类(2D),还有SceneView类(3D),而老版本只有Map,所以,老版本很多东西在新版本上是不能用的,我相信还有其他功能上的改动,不废话了、下面上代码

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
         <title>My fisrt ArcGis Map</title>
         <link rel="stylesheet" type="text/css" href="arcgis_js/dijit/themes/claro/claro.css"/>
         <script type="text/javascript" src="arcgis_js/init.js"></script>
         <link rel="stylesheet" type="text/css" href="arcgis_js/esri/css/main.css" />
         
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
        
      </style>
       <script>
        require([
    	"esri/tasks/Locator",
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/geometry/Point",
          "esri/symbols/SimpleMarkerSymbol", 
          "dojo/domReady!"
        ], function(
          Locator,Map, MapView,Graphic, Point,SimpleMarkerSymbol
        ) {
    	     var locatorTask = new Locator({
    	    	url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    	     });
    	
    	      var map = new Map({
    	        basemap: "osm"
    	      });
    	      var view = new MapView({
    	        center: [116, 30],
    	        container: "viewDiv",
    	        map: map,
    	        zoom: 5
    	      });
    	      //根据坐标打点
    	      ShowLocation(118.76,32.03); 
    		  function ShowLocation(x, y) {  
    		       var point = new Point(x, y);  
    		       var simpleMarkerSymbol = new SimpleMarkerSymbol('circle'); 
    		       simpleMarkerSymbol.color="orange";
    		       simpleMarkerSymbol.size="12";
    		       var graphic = new Graphic(point, simpleMarkerSymbol);  
    		
    		       view.graphics.add(graphic);  
    		  };  
    		   
                       //地图点击事件
    		   view.on("click", function(event) {
    		        // Get the coordinates of the click on the view
    		        var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
    		        var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
    		    	  //alert("经纬度坐标: [" + lon + ", " + lat + "]");
    		        view.popup.open({
    		          title: "经纬度坐标: [" + lon + ", " + lat + "]",
    		          location: event.mapPoint
    		        });
    		
    		    });
          
        });
      </script>
    </head>
    
    <body>
      <div id="viewDiv"></div>
    </body>
    
    </html>

    代码运行效果图如下:


    点击事件:


    访问权限

    创建人 李豪山
    文档编辑权限 创建者私有
    文档阅读权限 来自分类
    分类阅读权限 所有人
    分类编辑权限 所有人
    分类审核权限
    标签

    版本 arcgis simplemarkersymbol 坐标 request graphic script> 效果 mapview 下面
    历史版本

    修改日期 修改人 备注
    2017-06-23 11:47:05[当前版本] 李豪山 CREAT
    附件

    PNG

    同类知识
    相关知识

    睿恒知识库-V3.2.0