ArcGis图形

Posted 2020-11-25 lucky-ck

    require([
        "esri/Map",
        //底图
        "esri/Basemap",
        //视图
        "esri/views/MapView",
        //图层  瓦片层
        "esri/layers/WebTileLayer",
        //几何 点
        "esri/geometry/Point",
        // 符号/简单标记符号
        "esri/symbols/SimpleMarkerSymbol",
        //图形
        "esri/Graphic",
        //文档加载完成
        "dojo/domReady!"
    ], function (Map, Basemap, MapView, WebTileLayer, Point, SimpleMarkerSymbol, Graphic)
      {
        //图形
        var tdtLayer = new WebTileLayer({
            urlTemplate: 
            "http://{subDomain}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=e30af8b1302f1497eb42b6343b228cf5",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            copyright: "天地图"
        });

        //注释
        var tiledLayer_poi = new WebTileLayer({
            //地图地址
            urlTemplate: 
            "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=e30af8b1302f1497eb42b6343b228cf5",
            //子网域
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        });

        //底图
        var customBasemap = new Basemap({
            baseLayers: [tdtLayer, tiledLayer_poi],
            title: "Custom Basemap",
            id: "myBasemap"
        });
        //定义地图
        var map = new Map({
            basemap: customBasemap
        });

        /************************************************************
         * 将WebMap实例设置为MapView中的map属性
         *Set the WebMap instance to the map property in a MapView.
         ************************************************************/
        //创建视图
        var view = new MapView({
            map: map,
            container: "viewDiv",
            zoom: 6,
            center: [113, 32]
        });

        //视图回调函数
        view.then(function () {
            var point = new Point({
                longitude: 113,
                latitude: 32
            });
            //符号
            var symbol = {
                type: "simple-marker",
                style: "square",
                color: "red",
                size: "10px",
                outline: {
                    color: [255, 0, 0],
                    width: 10
                }
            };
            //图形
            var graphic = new Graphic({
                geometry: point,
                symbol: symbol
            });
            //添加图形
            view.graphics.add(graphic);
            //视图放大缩小
            view.goTo({
                target: point,
                zoom: 11
            });
        });
    });