ArcGIS API for JavaScript 控件练习

最新推荐文章于 2022-07-29 12:56:50 发布

我就是你的语法糖️

最新推荐文章于 2022-07-29 12:56:50 发布

阅读量345

点赞数

分类专栏： TANG的ArcGIS API for JavaScript

本文链接：https://blog.csdn.net/qq_43274430/article/details/109055131

版权

TANG的ArcGIS API for JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>七月API</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.16/"></script>
    <style>
        #viewDiv{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;">
        <div id="bookmarks"></div>
        <div id="basemapGalleryDiv"></div>
       </div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer", 
            "esri/widgets/Locate",
            "esri/widgets/BasemapToggle",
            // "esri/widgets/BasemapGallery",
            
            "esri/widgets/Search",
            "esri/widgets/Bookmarks",
            "dojo/dom",
            
            "esri/widgets/Print",
             "esri/widgets/Legend",          
            "esri/widgets/Track",
            "esri/widgets/Measurement"
            
        ],function(Map,MapView,FeatureLayer,Locate,BasemapToggle,Search,Bookmarks,dom,Print,Track,Measurement,Legend){
            var map=new Map({
                basemap:"topo-vector"
            });
            var view=new MapView({
                container:"viewDiv",
                map:map,
                center:[117, 32],
                zoom:7
            });
            var mapLayer=new FeatureLayer({
                url:"http://localhost:6080/arcgis/rest/services/安徽省县级行政区划/MapServer"
                
            });
            map.add(mapLayer);
            
            //显示经纬度和比例尺
            var coordsWidget = document.createElement("div");
            coordsWidget.id = "coordsWidget";
            coordsWidget.className = "esri-widget esri-component";
            coordsWidget.style.padding = "7px 15px 5px";
            view.ui.add(coordsWidget,"bottom-right");

            function showCoordinates(pt){
                var coords = "经/纬度：" + pt.latitude.toFixed(3) + "/" + pt.longitude.toFixed(3) +
                "|| 比例尺 1：" + Math.round(view.scale * 1) / 1 +
                "|| 缩放级别： " + view.zoom;
                coordsWidget.innerHTML = coords;
            }

            view.watch("stationary",function(isStationary){
                showCoordinates(view.center);
            });

            view.on("pointer-move",function(evt){
                showCoordinates(view.toMap({x:evt.x , y:evt.y}));
            });
            //添加定位
            var locate = new Locate({
                view:view,
                useHeadingEnabled:false,
                goToOverride:function(view,options){
                    option.target.scale=1500;
                    return view.goTo(options.target);
                }
            });
            view.ui.add(locate,"top-left");

            //添加底图
           var basemapToggle = new BasemapToggle({
               view: view,
               nextBasemap: "satellite"
           });
           view.ui.add(basemapToggle,"top-right");
           
        //    //BasemapGallery控件
        //     const basemapGallery = new BasemapGallery({
        //         view: view,
        //         container:document.createElement("div"),
        //         //container:basemapGalleryDiv
        //     });
        //     view.ui.add(basemapGallery,{
        //         position:"top-right"
        //     });

           //添加搜索功能
            var searchWidget = new Search({
                view:view,
            });
            view.ui.add(searchWidget,{
                position:"top-left",
                index:0
            });


         //书签 bookmarks
         var bookmarks = new Bookmarks({
             map: map,
             editable: true,
             bookmarks:bookmarks,
         },dom.byId('bookmarks'));
         //添加图例
        var legend = new Legend({
        view: view,
        layerInfos: [
            {
            layer: mapLayer,
            title: "NY Educational Attainment"
            }
        ]
        });
        view.ui.add(legend, "bottom-left");

        //Print控件
        view.when(function(){
             var print = new Print({
                 view:view,
                 printServiceUrl:
                 "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
             });
             view.ui.add(print,"top-right");
         })

        //Track控件
        var track = new Track({
             view:view,
         });
         view.ui.add(track,"top-left");
         view.when(function(){
             track.start();
         });
         //Measurement控件
         var measurement = new Measurement({
             view: view,
             activeTool: "distance"
         });
         view.ui.add(measurement, "top-right");

      

        
        });
    </script>
</body>
</html>

我就是你的语法糖️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ArcGIS API for JavaScript 控件练习

<html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>七月API</title> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri.
复制链接

扫一扫