01 创建一个二维地图

最新推荐文章于 2024-03-21 16:16:34 发布

qq_37464021

最新推荐文章于 2024-03-21 16:16:34 发布

阅读量507

点赞数

分类专栏：从零开始的ArcGIS API for JS学习文章标签： arcgis javascript

本文链接：https://blog.csdn.net/qq_37464021/article/details/109465867

版权

从零开始的ArcGIS API for JS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.新建一个HTML文件并初始化HTML页面结构

<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 
<title>Intro to MapView - Create a 2D map</title>
 
<style>
 
html, body, #viewDiv {
 
padding: 0;
 
margin: 0;
 
height: 100%;
 
width: 100%;
 
}
 
</style>
 
</head>
 
<body>
 
<div id="viewDiv"></div>
 
</body>
 
</html>

2.加载ArcGIS JS API的js开发包和css样式包

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

<script src="https://js.arcgis.com/4.9/"></script>

3.加载所需的模块，然后实例化地图

<script>
 
require([
 
"esri/Map",
 
"esri/views/MapView"
 
], function(Map, MapView){
 
var map = new Map({
 
basemap: "osm"
 
});
 
 
});
 
</script>

4.创建地图视角

第三步创建一个地图，除此之外还要创建一个地图视角，我们在这里把这个地图视角可以理解为查看地图的眼睛，只有创建了地图视角，将它和地图做绑定，我们才能查看地图，否则是看不到地图的。

var view = new MapView({
 
container: "viewDiv", // 查看地图的容器
 
map: map, // 绑定创建的地图
 
zoom: 9,
 
center: [104.071469,30.662036] // 视角中心、观察中心
 
});

5.完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Intro to MapView - Create a 2D map</title>
<style>
    html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
    require([
        "esri/Map",
        "esri/views/MapView"
    	],
        function(Map, MapView){
            var map = new Map({
                basemap: "osm"
                });
            var view = new MapView({
                container: "viewDiv", // 产看地图的容器
                map: map, // 绑定创建的地图
                zoom: 9,
                center: [104.071469,30.662036] // 视角中心、观察中心
                });
            });
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

官网地址：https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html

qq_37464021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
01 创建一个二维地图

01 创建一个二维地图1.新建一个HTML文件并初始化HTML页面结构<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Intro to MapView - Create a 2
复制链接

扫一扫