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,仅供个人查阅使用,侵删

相关推荐
PandaCave5 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟7 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾29 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧37 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
疯狂学习GIS44 分钟前
ArcGIS填补面图层的细小空白并删除主体部分外的零散部分
arcgis·gis·学术工作效率·gis数据
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚3 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷3 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
sinat_384241094 小时前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron