ArcGIS API for JavaScript 调用自定义地图模板总结

ArcGIS API for JavaScript 调用自定义地图模板总结

3.9版本

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Hello World</title>
		<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
		<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
		<script src="http://js.arcgis.com/3.9/"></script>
		<style>
			html,body,
			#mapDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
		<script>
			require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","dojo/domReady!"],function(Map,ArcGISDynamicMapServiceLayer){
				var map = new Map("mapDiv");
				//利用url创建一个动态地图服务对象
				var mapUrl = "...";
				var layer = new ArcGISDynamicMapServiceLayer(mapUrl);
				//将地图服务对象添加到地图容器中
				map.addLayer(layer);
			})
		</script>
	</head>
	<body class="tundra">
		<div id="mapDiv"></div>
	</body>
</html>

4.24版本

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			html,body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
		<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
		<script src="https://js.arcgis.com/4.24/"></script>
		<script>
			require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer"], function (Map, MapView, MapImageLayer) {
				const map = new Map();
				// points to the states layer in a service storing U.S. census data
				let layer = new MapImageLayer({
					url: "..." ,
				});
				map.add(layer);  // adds the layer to the map
	
				// 创建一个map视图 后期视图上的操作都通过这个对象来操作
				const view = new MapView({
					container: "viewDiv",//html容器,即将地图添加到哪个容器里
					map: map,
					// center: [449674.2785, 3567446.0419],
					zoom: 4,
					// center: [15, 65] // longitude, latitude 地图初始位置
					logo: false  //不显示Esri的logo
				});
			});
		</script>
	</head>
	<body>
		<div id="viewDiv"></div>
	</body>
</html>

注明:翻译自esri,仅供个人查阅使用,侵删

相关推荐
小菜全23 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风34 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy36 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
车口1 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码1 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Jedi Hongbin4 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
掘金安东尼5 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术5 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun5 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
wanzhong23335 小时前
ArcGIS学习-18 实战-降雨量空间分布插值分析
学习·arcgis