A-Zero

# 基本概念

# Graphic 和 Feature

  • Graphic 包含几何图形、符号、属性和信息模板（infoTemplate）。Graphic 显示在 GraphicsLayer 中
  • ArcGIS API for JavaScript 并没有一个类叫做 Feature，但可以看出，一个 Graphic 就像是一个 Feature

# GraphicsLayer 和 Map.graphics

  • GraphicsLayer 是一个包含一个或者多个 Graphic 要素的图层。每个 Map 对象默认包含一个 GraphicsLayer，通过 Map.graphics 属性访问。也可以自己创建一个 GraphicsLayer 添加到 Map 对象
  • Map.graphics 这个图层总是在顶端（所有图层之上），这可能会遮挡其他图层的单击（选中）事件。这种时候就需要自己创建 GraphicsLayer，不用 Map.graphics
  • 所有的 GraphicsLayer 总是会在 TiledMapServicesLayer 和 DynamicMapServiceLayer 上面

# 基本使用

# 项目部署

  • 将下载的arcgis api for javascript4.7开发包下的library文件夹复制到网站arcgis_js_api目录下
  • 修改arcgis_js_api\library\4.7下的init.js文件。打开后搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，并将其替换成 localhost/arcgis_js_api/library/4.7/，并把前面的https替换成http
  • 修改C:\inetpub\wwwroot\arcgis_js_api\library\4.7\dojo下的dojo.js文件。步骤同上
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>渲染点城市</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link href="http://localhost/arcgis_js_api/library/4.6/esri/css/main.css">
    <script src="http://localhost/arcgis_js_api/library/4.6/dojo.js"></script>
    <script>
        //用webtilelayer做的,domain替换的，没有定义 tileInfo的
        require([
            "esri/config",
            "esri/layers/WebTileLayer",
            "esri/Basemap",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Legend",     /*小部件：图例*/
            "esri/widgets/BasemapGallery",
            "esri/widgets/Expand",
            "esri/layers/GraphicsLayer",
            "esri/symbols/SimpleLineSymbol",
            "esri/geometry/Polyline",
            "esri/Graphic",
            "dojo/dom",
            "dojo/domReady!"
        ], function (esriConfig, WebTileLayer, Basemap,
                     Map,MapView, FeatureLayer, Legend,
                     BasemapGallery, Expand,GraphicsLayer,Graphic,
                     Polyline,SimpleLineSymbol,dom
        ) {
            /*************************************************/
            esriConfig.request.corsEnabledServers
                .push("t0.tianditu.com"
				   , "t1.tianditu.com"
				   , "t2.tianditu.com"
				   , "t3.tianditu.com"
				   , "t4.tianditu.com"
				   , "t5.tianditu.com"
				   , "t6.tianditu.com"
				   , "t7.tianditu.com");
				   
			var url = "http://{subDomain}.tianditu.com/DataServer";
			
            //矢量注记
            var vecBaseLayerZj = new WebTileLayer({
                urlTemplate: url + "?T=cva_w&x={col}&y={row}&l={level}&tk=key",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                copyright: "vec Map tiles by Tian Di Tu ZJ"
            });
            //矢量
            var vecBaseLayer = new WebTileLayer({
                urlTemplate: url + "?T=vec_w&x={col}&y={row}&l={level}&tk=key",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                copyright: "vec Map tiles by Tian Di Tu"
            });

            var vecBasemap = new Basemap({
                baseLayers: [vecBaseLayer, vecBaseLayerZj],
                title: '矢量',
                thumbnailUrl: ''
            });
            //去掉logo
            var options = {logo : false};
            var map = new Map({
                basemap: vecBasemap,
                ground: "world-elevation",
                option:options
            });
            //二维视角
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom:13,
                center: [108.6911530953,34.2799666458]//34.2799666458,108.6911530953
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

← ArcGIS Server →