Create web map from id.html

最新推荐文章于 2020-01-09 22:50:25 发布

学无止境慢慢来

最新推荐文章于 2020-01-09 22:50:25 发布

阅读量178

点赞数

分类专栏： arcgis_js_api_demo3.27

arcgis_js_api_demo3.27 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>从id创建web地图</title>
    <!--导入这个主题样式，应用在body中了。-->
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/esri/css/esri.css">
    <script src="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/init.js" data-dojo-config="async:true"></script>
    <script>
        require([
            "dojo/parser",
            "dojo/ready",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/dom",
            "esri/map",
            "esri/urlUtils",
            "esri/arcgis/utils",
            "esri/dijit/Legend",
            "esri/dijit/Scalebar",
            "dojo/domReady!"
        ], function (
            parser, ready, BorderContainer,
            ContentPane, dom, Map,
            urlUtils,  arcgisUtils, Legend,
            Scalebar
        ) {
            ready(function () {
                parser.parse();
                //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
                //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
                // 使用arcgis.com项目中的信息创建地图。
                arcgisUtils.createMap("4abe6a830b8f466dacf8abfde567a781", "map").then(function (response) {
                    // 更新应用。
                    dom.byId("title").innerHTML = response.itemInfo.item.title;
                    dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                    var map = response.map;

                    // 添加标尺
                    var scalebar = new Scalebar({
                        map: map,
                        // "dual"(双的)显示英里和公里。
                        // "english" 是默认值，它显示英里数。
                        // 用"metric"(公制的)显示千米。
                        scalebarUnit: "metric"
                    });

                    // 添加图例。
                    var legendLayers = arcgisUtils.getLegendLayers(response);
                    var legendDijit = new Legend({
                        map: map,
                        layerInfos: legendLayers
                    }, "legend");
                    legendDijit.startup();
                });
            });
        });
    </script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Helvetica";
        }
        #header {
            background-color: #E8E8E8;
            height: 65px;
            margin: 5px 5px;
        }
        #mainWindow {
            width: 100%;
            height: 100%;
        }
        #title {
            padding-top: 2px;
            padding-left: 10px;
            font-size: 18pt;
            /*字体加粗有效范围[100,900], 400等同于normal，700等同于bold*/
            font-weight: 700;
        }
        #subtitle {
            font-size: x-large;
            padding-left: 40px;
        }
        #rightPane {
            background-color: #E8E8E8;
            margin: 5px;
            width: 20%;
        }
        #map {
            margin: 5px;
            padding: 0;
        }
    </style>
</head>

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <div id="title"></div>
            <div id="subtitle"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="legend"></div>
        </div>
    </div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Create web map from id.html

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, max
复制链接

扫一扫