ArcGIS API for Javascript(一)

最新推荐文章于 2024-04-06 14:15:18 发布

会飞的鱼@

最新推荐文章于 2024-04-06 14:15:18 发布

阅读量1.4k

点赞数 2

分类专栏： WebGIS ArcGIS API for Javascript

本文链接：https://blog.csdn.net/wenming111/article/details/105903184

版权

WebGIS 同时被 2 个专栏收录

8 篇文章 2 订阅

订阅专栏

ArcGIS API for Javascript

7 篇文章 2 订阅

订阅专栏

Map

1、加载Map地图：

本地部署下载地址：传送门（https://localhost/4.17/esri/themes/light/main.css）

1)开篇不使用本地部署，应用官网api；（因为底图加载需要联网，所以本地部署也需要联网，故本系列不使用本地部署）

2)本教程全部使用官网api,可直接复制到文本中（xx.html），使用浏览器可直接打开;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>js地图</title>
    <!-- 加载官方api -->
	<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
	<script src="https://js.arcgis.com/4.15/"></script>
	<style type="text/css">
		html,body,#mapdiv
		{
			height: 100%;
			width:100%;
			margin: 0;
			padding: 0;
		}
		body	
		{
			background: #FFF;
			overflow: hidden;
			font-family: "Trebuchet MS";
		}
	</style>
	<script type="text/javascript">
		require(["esri/Map",
			"esri/views/MapView",
			],function(Map,MapView){
            //加载地图底图
            var map=new Map({
             	basemap:"topo"
             });
            //加载视图
            var mapview=new	MapView({
            	container:"mapdiv",
            	map:map,
            	zoom:10,
            	center:[117,31]

            });
            // 去除初始化控件
            // mapview.ui.components=[];
			});
	</script>
</head>
<body>
<div id="mapdiv"></div>
</body>
</html>

2、加载地图：

1）默认会加载放大缩小和商标；

2）地图加载成功；

3、移除商业logo：

（官方api方法：如图：）

这个有两个方法：

1）可以使用view.ui.remove("组件名")，移除指定组件；

2）使用view.ui.components=[];清空所有初始化控件，可以自由放置，可以放在自己定义的控件之后，不会清空自己定义的控件

本文使用的是 mapview.ui.components=[]; 将示例中的注释释放即可达到去除初始化控件目的；

4、常用的底图：

Additional basemap options are: satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic

5、声明

1）文章来源于项目实践，文中存在错误或任何问题请留言，谢谢你的阅读

2）转载请标注来源，感谢

会飞的鱼@

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for Javascript(一)

arcgis api for js <一>1、加载Map地图：1)开篇不使用本地部署，应用官网api；2)本教程全部使用官网api,可直接复制到文本中（xx.html），使用浏览器可直接打开;<!DOCTYPE html><html><head> <meta charset="utf-8"> <title&...
复制链接

扫一扫

专栏目录