arcgis_js_api_demo4.11 hello_world.html_arcgis api for javascript4.11实例-优快云博客

本文介绍了一个使用 ArcGIS JavaScript API 版本4.11创建的基本地图应用程序。该示例展示了如何加载一个包含开放街道地图底图的地图，并在指定的地理坐标上设置视图中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>arcgis_js_api_demo4.11 hello_world</title>
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--官网接口。-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
    <script src="https://js.arcgis.com/4.11/"></script>
    <!--龙哥的接口。-->
    <!--<link rel="stylesheet" href="http://118.89.225.237:8025/arcgis_js_api/library/4.11/4.11/esri/css/main.css">-->
    <!--<script src="http://118.89.225.237:8025/arcgis_js_api/library/4.11/4.11/init.js"></script>-->
    <!--我的接口。-->
    <!--<link rel="stylesheet" href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/css/main.css">-->
    <!--<script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/dojo/dojo.js"></script>-->
    <!--上下两接口都行。-->
    <!--<script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>-->

    <script>
        /*参考：https://developers.arcgis.com/javascript/latest/guide/create-a-starter-app/*/
        require([
            "esri/Map",
            "esri/views/MapView"
        ], function(Map, MapView) {
            let map = new Map({
                // osm,中文地图。
                // topo,streets,satellite,hybrid,dark-gray,gray,national-geographic,
                // oceans,osm,terrain,dark-gray-vector,gray-vector,streets-vector,
                // streets-night-vector,streets-navigation-vector
                // topo-vector,streets-relief-vector
                basemap: "osm"
            });
            let view = new MapView({
                container: "viewDiv",
                map: map,
                center: [116.397245, 39.900930],  // 经度范围：[-180, 180], 纬度范围：[-90,90]
                zoom: 8  // 缩放比例。
            });
            view.when(function(){
                // This function will execute once the promise is resolved
                console.log("view:", view);
                console.log("view.spatialReference.isWGS84:", view.spatialReference.isWGS84);
            }, function(error){
                // This function will execute if the promise is rejected due to an error
            });
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>