您的当前位置：首页正文

从0到1，开启我的arcgis之旅

来源：榕意旅游网

本地使用js创建一个简单的arcgis项目

创建一个简单的html文档
参考用于javascript的arcgis api
加载模块
创建地图
定义页面内容
设置页面样式

创建一个简单的html文档

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
  </head>
</html>

参考用于javascript的arcgis api
引入js时，我本地程序无法像官方呢样直接引用，而是将js代码copy到本地，新创建的js文件和css文件：

<link rel="stylesheet" href="./css/esri.css">
<script src="./js/init.js"></script>

加载模块

<script>
  require(["esri/map"], function(Map) { ... });
</script>

创建地图

var map;
require(["esri/map"], function(Map) {
  map = new Map("map", {
    basemap: "topo",
    center: [-122.45, 37.75],
    zoom: 13
  });
});

定义页面内容

<body class="claro">
  <div id="map"></div>
</body>

设置页面样式

<style>
	html,
	body,
	#map {
		height: 100%;
		margin: 0;
		padding: 0;
	}
</style>

完整代码附上：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
		<title>Simple Map</title>
		<link rel="stylesheet" href="./css/esri.css">
		<style>
			html,
			body,
			#map {
				height: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
		<script src="./js/init.js"></script>
		<script>
			var map;

			require(["esri/map", "dojo/domReady!"], function(Map) {
				map = new Map("map", {
					basemap: "topo",
					center: [-122.45, 37.75], // longitude, latitude
					zoom: 13
				});
			});
		</script>
	</head>

	<body>
		<div id="map"></div>
	</body>
</html>

最终实现效果：

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文