ArcGIS API for JavaScript 4.8 创建地图

软件:WebStorm2018.1.5

内容:显示2D地图

  一: 创建HTML5文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

二:使用<link> 标签链接一个外部样式表,<script> 标签在 HTML 页面中插入一段 JavaScript 。

这样就能够使用ArcGIS的API,注意:匹配新发布的版本

<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>

三:加载模块,这里有两种方式,跟HTML一样,外部和内部

需要什么模块都需要在这里添加


    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/domReady!"
        ], function(Map, MapView) {
            
        });
    </script>

在require的方括号中加入模块,模块之间使用逗号(,)分隔。
"esri/Map"   加载用于创建地图的代码
"esri/views/MapView"   加载以2D模式查看地图的代码,类似于摄像机(视角)
"dojo/domReady!"      等待DOM准备就绪并等待所有未完成的require调用完成,所有的都需要这个模块

四:创建地图和2D视图


    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/domReady!"
        ], function(Map, MapView) {

            var map = new Map({
                basemap: "osm",    
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 4,//放大量,数字越大则为地图放大多少倍
                center: [15, 65] //设置初始经纬度
            });

        });
    </script>
街道 卫星 混合 地形 灰色 深灰色 海洋  
åºå¾ï¼è¡é åºå¾å«æ åºå¾æ··åå¨å åºå¾ï¼å°å½¢ åºå¾ç°è² åºå¾æç°è² åºå¾ï¼æµ·æ´  
streets satellite hybrid topo gray dark-gray oceans  
osm 暗灰色矢量 灰色矢量 街道矢量 TOPO载体 街道夜间矢量 街道浮雕矢量 街道导航矢量
åºå¾-OSM æ·±ç°è²ç¢é ç°åº¦ç¢é è¡éç¢é TOPOè½½ä½ è¡éå¤ç¢é è¡éæµ®éç¢é è¡é导èªç¢é
dark-gray-vector dark-gray-vector gray-vector streets-vector streets-night-vector streets-night-vector streets-relief-vector streets-navigation-vector

 

 

 

 

 

 

 

 

 

 

 

在basemap后填写地图样式,可以使用不同的地图

五:添加DIV,写CSS,完成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
    <script src="https://js.arcgis.com/4.8/"></script>
    <title>地图显示</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/domReady!"
        ], function(Map, MapView){
            var map = new Map({
                basemap: "osm"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 13,   //放大量,数字越大则为地图放大多少倍
                center: [15, 65]  //设置初始经纬度
            });
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

 

 

展开阅读全文

没有更多推荐了,返回首页