ArcGIS For JavaScript API add topographic map with graphics —— 地形图与图形

此示例显示了如何添加自定义图形的底图上。该示例使用世界地形图作为底图服务。这是ArcGIS Online的缓存地图服务的ArcGIS.com网站,其中包括管理功能,地貌特征,公园,建筑物,土地覆盖阴影救济图像和更。您可以浏览更多的在线底图和参考地图服务的ArcGIS Online的网站,或使用ArcGIS Server作为服务发布自己的地理数据。

添加自定义图形的底图之上的位置,一个流行的行驶路线在加利福尼亚州雷德兰兹,提示有关沿线信息(水,电话,洗手间)。下面是一个代码片段,从应用程序图形的地图,增加了一个新的起点。该图形是创建在指定的x,y位置,在这点设施包含的信息。

演示联接:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_topo_graphics/index.html

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />  
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />  
<title>Topographic Map with graphics</title>  
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">  
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />  
  
<style>  
html,body {  
    height: 100%;  
    width: 100%;  
    margin: 0;  
    padding: 0;  
}  
  
map {  
    padding: 0;  
}  
</style>  
<script type="text/javascript">  
    var djConfig = {    // dojo配置格式  
        parseOnLoad : true  
    };  
</script>  
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>  
<script type="text/javascript">  
      
    dojo.require("dijit.layout.BorderContainer");   //类似导入必要包  
    dojo.require("dijit.layout.ContentPane");  
    dojo.require("esri.map");  
  
    var map;  
  
    function init() {  
        // 设置地图大小范围  
        var initExtent = new esri.geometry.Extent({  
            "xmax" : -117.16,   // 右上角X坐标范围  
            "xmin" : -117.18,   // 左下角X坐标范围  
            "ymax" : 34.04,     // 右上角Y坐标  
            "ymin" : 34.03,     // 左下角Y坐标  
            "spatialReference" : {  // 空间参考  
                "wkid" : 4326  
            }  
        });  
        map = new esri.Map("map", { // 创建map地图并设置区域  
            extent: esri.geometry.geographicToWebMercator(initExtent) // 从地理单元,以Web墨卡托单位的转换几何。返回geometry  
        });  
  
        //添加到地图的地形层。 ArcGIS Online的网站服务http://arcgisonline/home/search.html?t=content&f=typekeywords:service      
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");  
        map.addLayer(basemap);  
  
        dojo.connect(map, 'onLoad', function(map) {  
            //添加行驶路线,图形,地图加载一次  
            drawRoute();  
  
            //当浏览器调整,调整地图的大小  
            dojo.connect(dijit.byId('map'), 'resize', map, map.resize);  
            dojo.connect(map, "onClick", addPoint); // 点击显示坐标信息的窗口提示框  
        });  
    }     
    // 鼠标单击提示框函数  
    function addPoint(evt) {  
        map.infoWindow.setTitle("Coordinates(坐标)"); // 标题  
        map.infoWindow.setContent("</br><b>(经)lat/lon(纬)度:</b>" + evt.mapPoint.y + ", " + evt.mapPoint.x+"</br></br>"+  
                                "<b>窗口显示位置:</b><font color='red' size='-1'>" + map.getInfoWindowAnchor(evt.screenPoint) + "</font>");   // 内容  
        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));  // show(Point point,String placement?):在指定的位置显示信息窗口  
    }  
      
    // 用户绘制路线的函数  
    function drawRoute() {  
        var inputJson = {  
            "paths" : [ [ [ -13043348, 4034155 ], [ -13043274, 4034040 ] ],  
                    [ [ -13043274, 4034040 ], [ -13043226, 4034010 ] ],  
                    [ [ -13043226, 4034010 ], [ -13043201, 4034010 ] ],  
                    [ [ -13043201, 4034010 ], [ -13043193, 4033972 ] ],  
                    [ [ -13043193, 4033972 ], [ -13043248, 4033928 ] ],  
                    [ [ -13043248, 4033928 ], [ -13043275, 4033909 ] ],  
                    [ [ -13043275, 4033909 ], [ -13043284, 4033890 ] ],  
                    [ [ -13043284, 4033890 ], [ -13043319, 4033900 ] ],  
                    [ [ -13043319, 4033900 ], [ -13043341, 4033886 ] ],  
                    [ [ -13043341, 4033886 ], [ -13043349, 4033870 ] ],  
                    [ [ -13043349, 4033870 ], [ -13043341, 4033808 ] ],  
                    [ [ -13043341, 4033808 ], [ -13043171, 4033551 ] ],  
                    [ [ -13043171, 4033551 ], [ -13043097, 4033605 ] ],  
                    [ [ -13043097, 4033605 ], [ -13043097, 4033357 ] ],  
                    [ [ -13043097, 4033357 ], [ -13042661, 4033348 ] ],  
                    [ [ -13042661, 4033348 ], [ -13042660, 4033162 ] ],  
                    [ [ -13042660, 4033162 ], [ -13042661, 4032943 ] ],  
                    [ [ -13042661, 4032943 ], [ -13042501, 4032943 ] ],  
                    [ [ -13042501, 4032943 ], [ -13042498, 4032620 ] ],  
                    [ [ -13042498, 4032620 ], [ -13042455, 4032616 ] ],  
                    [ [ -13042455, 4032616 ], [ -13042446, 4032376 ] ],  
                    [ [ -13042446, 4032376 ], [ -13042419, 4032299 ] ],  
                    [ [ -13042419, 4032299 ], [ -13042314, 4032243 ] ],  
                    [ [ -13042314, 4032243 ], [ -13042250, 4032188 ] ],  
                    [ [ -13042250, 4032188 ], [ -13042237, 4032151 ] ],  
                    [ [ -13042237, 4032151 ], [ -13042243, 4032109 ] ],  
                    [ [ -13042243, 4032109 ], [ -13042243, 4032056 ] ],  
                    [ [ -13042243, 4032056 ], [ -13042240, 4032025 ] ],  
                    [ [ -13042240, 4032025 ], [ -13042254, 4032012 ] ],  
                    [ [ -13042254, 4032012 ], [ -13042284, 4032064 ] ],  
                    [ [ -13042284, 4032064 ], [ -13042315, 4032095 ] ],  
                    [ [ -13042315, 4032095 ], [ -13042674, 4032187 ] ],  
                    [ [ -13042674, 4032187 ], [ -13042704, 4032195 ] ],  
                    [ [ -13042704, 4032195 ], [ -13042739, 4032257 ] ],  
                    [ [ -13042739, 4032257 ], [ -13042765, 4032267 ] ],  
                    [ [ -13042765, 4032267 ], [ -13042834, 4032275 ] ],  
                    [ [ -13042834, 4032275 ], [ -13042868, 4032295 ] ],  
                    [ [ -13042868, 4032295 ], [ -13042882, 4032357 ] ],  
                    [ [ -13042882, 4032357 ], [ -13042883, 4032422 ] ],  
                    [ [ -13042883, 4032422 ], [ -13042926, 4032452 ] ],  
                    [ [ -13042926, 4032452 ], [ -13042992, 4032527 ] ],  
                    [ [ -13042992, 4032527 ], [ -13043059, 4032609 ] ],  
                    [ [ -13043059, 4032609 ], [ -13043116, 4032593 ] ],  
                    [ [ -13043116, 4032593 ], [ -13043278, 4032553 ] ],  
                    [ [ -13043278, 4032553 ], [ -13043324, 4032547 ] ],  
                    [ [ -13043324, 4032547 ], [ -13043488, 4032597 ] ],  
                    [ [ -13043488, 4032597 ], [ -13043561, 4032603 ] ],  
                    [ [ -13043561, 4032603 ], [ -13043773, 4032808 ] ],  
                    [ [ -13043773, 4032808 ], [ -13043889, 4032917 ] ],  
                    [ [ -13043889, 4032917 ], [ -13043963, 4032871 ] ],  
                    [ [ -13043963, 4032871 ], [ -13044030, 4032829 ] ],  
                    [ [ -13044030, 4032829 ], [ -13044206, 4032840 ] ],  
                    [ [ -13044206, 4032840 ], [ -13044286, 4032865 ] ],  
                    [ [ -13044286, 4032865 ], [ -13044391, 4032910 ] ],  
                    [ [ -13044391, 4032910 ], [ -13044509, 4032958 ] ],  
                    [ [ -13044509, 4032958 ], [ -13044658, 4033187 ] ],  
                    [ [ -13044658, 4033187 ], [ -13044265, 4033451 ] ],  
                    [ [ -13044265, 4033451 ], [ -13044065, 4033580 ] ],  
                    [ [ -13044065, 4033580 ], [ -13043994, 4033655 ] ],  
                    [ [ -13043994, 4033655 ], [ -13043946, 4033713 ] ],  
                    [ [ -13043946, 4033713 ], [ -13044097, 4033954 ] ],  
                    [ [ -13044097, 4033954 ], [ -13043891, 4034095 ] ],  
                    [ [ -13043891, 4034095 ], [ -13043482, 4034361 ] ],  
                    [ [ -13043482, 4034361 ], [ -13043381, 4034203 ] ] ],  
            "spatialReference" : {  // 空间参考  
                "wkid" : 102100  
            }  
        };  
  
        /*  
         * esri.symbol.SimpleLineSymbol(线符号)在图形图层上绘制的线性特征。 SimpleLineSymbol可以是实线或短划线和点的预定义的模式。  
         *  esri.symbol.SimpleLineSymbol();esri.symbol.SimpleLineSymbol(json);esri.symbol.SimpleLineSymbol(style,color,width)3种构造函数  
         *  
         *  esri.symbol.PictureMarkerSymbol(标记符号)在图形图层上绘制点和多点。 PictureMarkerSymbol使用作为标记的图像。  
         *  esri.symbol.PictureMarkerSymbol(url, width, height) 和  // esri.symbol.PictureMarkerSymbol(json)2种构造函数  
         */  
        //设置符号的图形(路由线,启动和停止点和水的位置)  
        var polylineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([ 102, 0, 51 ]), 4);  
        var startSymbol = new esri.symbol.PictureMarkerSymbol("images/play.png", 25, 25);   // 起始图标  
        var stopSymbol = new esri.symbol.PictureMarkerSymbol("images/stop.png", 25, 25);    // 结束图标  
        var infoSymbol = new esri.symbol.PictureMarkerSymbol("images/info.png", 30, 30);    // 信息图标  
  
        //创建一个图形的行驶路线,使用的输入JSON   
        var runningRoute = new esri.geometry.Polyline(inputJson);   // (1)polyline(spatialReference),(2)polyline(json):路径数据,其中每一个路径是一个点的数组  
        map.graphics.add(new esri.Graphic(runningRoute, polylineSymbol));   //图形被显示在GraphicsLayer。  
  
        //添加一个图形的行驶路线,开始和停止坐标使用图标显示位置。  
        var startPoint = new esri.geometry.Point({  
            "x" : -13043348,  
            "y" : 4034155,  
            " spatialReference" : {  
                " wkid" : 102100  
            }  
        });  
        var stopPoint = new esri.geometry.Point({  
            "x" : -13044097,  
            "y" : 4033954,  
            " spatialReference" : {  
                " wkid" : 102100  
            }  
        });  
  
        map.graphics.add(new esri.Graphic(startPoint, startSymbol));    // 在map中加入图形,此图形中包含坐标和图标信息。  
        map.graphics.add(new esri.Graphic(stopPoint, stopSymbol));  
  
        /*  
         * InfoTemplate();InfoTemplate(json);InfoTemplate(title,content);InfoTemplate(指定字段显示)4种方式。  
         */  
        //添加兴趣点(水,厕所等) - 添加信息模板描述设施。  
        var infoTemplate = new esri.InfoTemplate("${Name}", "Restroom: ${Facilities}<br />phone: ${Phone}<br />Water: ${Water}</br>");  
           
        var park1 = new esri.Graphic({  // 创建第一个地点显示位置  
            "geometry" : {  // 图形的几何定义  
                "x" : -13043577,  
                "y" : 4034040,  
                "spatialReference" : {  // 空间参考  
                    "wkid" : 102100  
                }  
            },  
            "attributes" : {    // 与图形相关的字段和字段值的名称值对。  
                "Name" : "展望公园_Prosped park",  
                "Facilities" : "Yes",  
                "Water" : "Yes",  
                "Phone" : "<image src='images/bear.jpg' height=130 />"  
            }  
        });  
        park1.setSymbol(infoSymbol);    // 加入图形符号  
        park1.setInfoTemplate(infoTemplate);    // 加入图形信息窗口,用户单击时,显示该模版  
        map.graphics.add(park1);    // 在map中加入图形。  
  
        var park2 = new esri.Graphic({    
            "geometry" : {  
                "x" : -13042885,  
                "y" : 4033247,  
                "spatialReference" : {  
                    "wkid" : 102100  
                }  
            },  
            "attributes" : {  
                "Name" : "金佰利小学",  
                "Facilities" : "No",  
                "Water" : "Yes",  
                "Phone" : "No"  
            }  
        });  
        park2.setSymbol(infoSymbol);  
        park2.setInfoTemplate(infoTemplate);  
        map.graphics.add(park2);  
          
        map.infoWindow.resize(430, 200);    // 设置消息框大小  
    }  
      
    dojo.addOnLoad(init);   // 初始化加载  
</script>  
</head>  
  
<body class="claro">  
    <!-- 引入了dijit中的小部件;dojotype:dojo容器类型,design:样式,gutters:装订线 -->  
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">  
        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow: hidden;"></div>  
    </div>  
</body>  
  
</html>

实现效果:单击显示经纬度,单击图标显示信息。

ArcGIS For JavaScript API add topographic map with graphics —— 地形图与图形

ArcGIS For JavaScript API add topographic map with graphics —— 地形图与图形

涉及到的重要知识点:

服务:

    esri.layers.ArcGISTiledMapServiceLayer

提示框:

    esri.InfoTemplate、esri.infoWindow

图标(符号):

    esri.symbol.SimpleLineSymbol、esri.symbol.PictureMarkerSymbol

具体使用方法和属性和参数请参考API文档:http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm

配置符号API:http://help.arcgis.com/zh-CN/webapps/sharepoint/help/index.html#//015900000024000000


未经允许请勿转载:程序喵 » ArcGIS For JavaScript API add topographic map with graphics —— 地形图与图形

点  赞 (1) 打  赏
分享到: