学习记录

ArcGis点线面demo

http://192.168.1.49:6080/arcgis/rest/services/雁塔区/MapServer 这是王侃的雁塔区图层访问连接

<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="./arcgis.js"></script>
<style>
    html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>
<script>
    require([
        "esri/Map", 
          "esri/views/MapView",
          "esri/layers/TileLayer",
          "esri/Basemap",
        "esri/layers/FeatureLayer",
        "esri/Graphic"
    ], function( Map, MapView, TileLayer, Basemap, FeatureLayer, Graphic ) {
        // var layer = new FeatureLayer({
        //     url: "http://192.168.1.49:6080/arcgis/rest/services/雁塔区/MapServer",
        // });
        var customBasemap = new Basemap({
            baseLayers:[
                new TileLayer({ // 可配置属性，见TileLayer类
                    id: 'TL',
                    url: "http://192.168.1.49:6080/arcgis/rest/services/雁塔区/MapServer"
                })
            ],
        });
        var map = new Map({
            basemap: customBasemap,
        });
        var view = new MapView({
            center: [108.873, 34.195],
            container: "viewDiv",
            map: map,
            zoom: 16
        });
        /*************************
         * 创建点图。
         *************************/
        var point = {
            type: "point", // autocasts as new Point()
            longitude: 108.873,
            latitude: 34.195
        };
        // 创建绘制点的符号。
        var markerSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: [23, 137, 216],  // 填充颜色。
            outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        };
        var pointLineAtt = {
            '名称': "锦业时代B3",
        };
        // 创建图形并将几何图形和符号添加到图形中。
        var pointGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol,
            attributes: pointLineAtt,
            popupTemplate: {
                visible: true,
                // autocasts as new PopupTemplate()
                title: "{名称}"
            }
        });
        /****************************
         * 创建折线图形。
         ****************************/
        // 首先，创建一条折线几何图形。
        var polyline = {
            type: "polyline", // autocasts as new Polyline()
            paths: [[108.88592720, 34.19329405], [108.87545586, 34.19307947], [108.86471629, 34.19283271], [108.85186315, 34.19266105], [108.83697152, 34.19263959]]
        };
        // 创建用于绘制线的符号。
        var lineSymbol = {
            type: "simple-line", 
            color: [23, 137, 216],
            width: 4
        };
        // 创建对象，用于存储与该polyline相关的属性。
        var lineAtt = {
            '名称': "锦业一路",
            '距离': "4,481 km"
        };
        /*******************************************
         * 创建一个新图形，并给它添加几何图形、符号、属性。
         * 你也可以给该图形添加一个简单的弹窗模板。
         * 当在该图形上单击时，这将允许用户查看该图形的属性。
         ******************************************/
        var polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: lineSymbol,
            attributes: lineAtt,
            popupTemplate: {
                // autocasts as new PopupTemplate()
                title: "{名称}",
                content: [
                    {
                        type: "fields",
                        fieldInfos: [
                            {
                                fieldName: "名称"
                            },
                            {
                                fieldName: "距离"
                            }
                        ]
                    }
                ]
            }
        });
        /***************************
         * 创建一个面图形。
         ***************************/
        var polygon = {
            type: "polygon", // autocasts as new Polygon()
            rings: [
                [108.87102485, 34.19532180],
                [108.87107849, 34.19299364],
                [108.87544513, 34.19309020],
                [108.87544513, 34.19538617]
            ]
        };
        var fillSymbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [227, 139, 79, 0.8],  // 填充颜色。
            outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 1
            }
        };
        var polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: fillSymbol,
            popupTemplate: {
                // autocasts as new PopupTemplate()
                title: "锦业时代区域",
            }
        });
        // 把所有的图形，添加到视图的图形层。
        view.graphics.addMany([
            polygonGraphic,
            polylineGraphic,
            pointGraphic,
        ]);
    });
</script>

站点架构

Arcgis api for js 知识点

建议查看详细描述：
https://www.cnblogs.com/onsummer/p/9080204.html

• arcgis api包含内容

• 左侧为二维，右侧为三维；

分别用两个对象来描述“数据”和“视图”；
在arcgis中，用【Map类】构造地理数据、用【View类】构造视图。
通过以下桥梁可以连接它们

Map有WebMap和WebScene两个子类，由于继承和多态的特征，视图中map属性也可以设为WebMap和WebScene。


Map常用的有三个属性，底图、可操作图层集合、地形图层。

1. basemap属性可使用预置的底图，也可以使用自定义的Basemap对象；
2. [★]layers属性是可操作的Layer对象的集合，Layer类有很多子类，如几何图层、地图图层、要素图层等，这些都是由数据组成！
3. ground属性表示地图高程，可以用预置的世界高程数据，也可以自定义高程图层。