ArcGIS API for JavaScript中的三要素和地图底图库

网上邻居YY

已于 2023-12-08 14:53:15 修改

阅读量517

点赞数 11

文章标签：经验分享 arcgis

于 2023-12-08 14:42:36 首次发布

本文链接：https://blog.csdn.net/yywwqq5656/article/details/134878292

版权

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在地图上添加要素</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<!--    //调用API-->
    <script src="https://js.arcgis.com/4.13/"></script>
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="viewDiv"></div>
<script>
        require([
        "esri/Map",  //引用地图类
        "esri/views/MapView",
            "esri/widgets/Compass",
            "esri/widgets/ScaleBar",
            "esri/widgets/Legend",
            "esri/widgets/BasemapToggle",
            "esri/widgets/BasemapGallery"
        ], function(Map, MapView,Compass,ScaleBar,Legend,BasemapToggle,BasemapGallery) {  //参数位置要和引用类的顺序一致

//新建一个地图
        var map = new Map({
        basemap: "topo" //地图底图
    });
//新建一个地图视图
        var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.31357, 39.97104], // 地图中心的经纬度坐标
        zoom: 13 //地图缩放级别
    });
            var compass = new Compass({
                view:view
            });
            view.ui.add(compass,"top-right");

            //添加比例尺
            var scalebar = new ScaleBar({
                view:view
            });
            view.ui.add(scalebar,"bottom-right");

            //添加图例
            var legend = new Legend({
                view:view
            });
            view.ui.add(legend,"bottom-left");
            //切换底图
            var toggle = new BasemapToggle({
                view:view,
                nextBasemap:"osm"
            });
            view.ui.add(compass,"bottom-right");

            //添加底图库
            var gallery = new BasemapGallery({
                view:view,
                source:{
                    portal:{
                        url: "https://www.arcgis.com",
                        useVectorBasemaps: true //加载切片底图
                    }
                }
            });
            view.ui.add(gallery,"top-right");
    });

</script>
</body>
</html>

网上邻居YY

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫