总结（1）--引用在线地图并显示地图

最新推荐文章于 2025-04-01 08:01:36 发布

原创最新推荐文章于 2025-04-01 08:01:36 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用ArcGIS API加载在线地图并展示在中国区域的地图视图，包括设置HTML与CSS样式，引入必要的JavaScript库，以及配置地图的中心点和缩放级别。

body与css中：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
    <script src="js/map.js" type="text/javascript"></script>
    <title>Loading Online Map</title>
</head>

<body>
    <!-- map -->
    <div id="viewDiv"></div>
</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

在js中

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/TileLayer",
    "esri/widgets/Search",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
], function (Map, MapView, TileLayer, Search, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer) {
    //引用在线中文地图
    var layer = new TileLayer({
        url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
    });
    //将引用在线地图进行添加
    var map = new Map({

        layers: [layer]
    });
    //将添加好的地图进行显示
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116, 36],
        zoom: 13
    });
    }

地图显示
在这里插入图片描述