vscode配置ArcGIS API forJavaScript的html文件模板

最新推荐文章于 2024-06-24 14:21:19 发布

破晓aa

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量4.9k

点赞数

分类专栏： WebGIS 文章标签： html

本文链接：https://blog.csdn.net/aqa2037299560/article/details/105508975

版权

WebGIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

普通模板 (包括引入css样式文件和js api)

"ArcGIS api for js": {
		"prefix": "arcgis",    // 使用的时候输入arcgis，然后回车即可
		"body": [     // 模板的主体
			"<html>",
			"<head>",
			"    <meta charset=\"utf-8\">",
			"    <title>arcgis for js api</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\">",
			"    <style type=\"text/css\">",
			"        html, body {",
			"            padding: 0;",
			"            margin: 0;",
			"            width: 100%;",
			"            height: 100%;",
			"        }",
			"    </style>",
			"    <script src=\"http://js.arcgis.com/3.9/\"></script>",
			"    <script>",
			"        require([\"esri/map\", \"esri/layers/ArcGISTiledMapServiceLayer\", \"dojo/domReady!\"], ",
			"            function(Map, TiledLayer) {",
			"                $0",
			"        });",
			"    </script>",
			"</head>",
			"<body class=\"tundra\">",
			"    ",
			"</body>",
			"</html>"
		]
	},

包含例子的模板 (可以快速生成一个可使用的例子）

"Arcgis api demo": {
		"prefix": "arcgis:demo",    // 使用的时候输入arcgis:demo,然后回车
		"body": [
			"<html>",
			"<head>",
			"    <meta charset=\"utf-8\">",
			"    <title>arcgis for js api</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\">",
			"    <style type=\"text/css\">",
			"        html, body, #mapDiv{",
			"            padding: 0;",
			"            margin: 0;",
			"            width: 100%;",
			"            height: 100%;",
			"        }",
			"    </style>",
			"    <script src=\"http://js.arcgis.com/3.9/\"></script>",
			"    <script>",
			"        require([\"esri/map\", \"esri/layers/ArcGISTiledMapServiceLayer\", \"dojo/domReady!\"], ",
			"            function(Map, TiledLayer) {",
			"                var map = new Map(\"mapDiv\");",
			"                var url = \"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer\";",
			"                var layer = new TiledLayer(url);",
			"                map.addLayer(layer);",
			"                $0",
			"        });",
			"    </script>",
			"</head>",
			"<body class=\"tundra\">",
			"    <div id=\"mapDiv\"></div>",
			"</body>",
			"</html>"
		]
	},

dojo页面布局（注意还要为body添加class，以及在js里面使用dojo/parser解析页面，同时还要在js中导入BorderContainer和ContentPane模块

"Arcgis api layout": {
		"prefix": "layout:headline",
		"body": [
			"<div id=\"main\" data-dojo-type=\"dijit/layout/BorderContainer\" data-dojo-props=\"design:'headline'\">",
			"  <div id=\"top\" data-dojo-type=\"dijit/layout/ContentPane\" data-dojo-props=\"region: 'top'\" style=\"width: 100%; height: 40px;\">",
			"      顶部导航栏",
			"  </div>",
			"  <div id=\"left\" data-dojo-type=\"dijit/layout/ContentPane\" data-dojo-props=\"region: 'left', splitter: true\" style=\"width: 80px;\">",
			"      左侧菜单栏",
			"  </div>",
			"  <div id=\"center\" data-dojo-type=\"dijit/layout/ContentPane\" data-dojo-props=\"region: 'center'\">",
			"      中间正文",
			"  </div>",
			"</div>"
		]
	},

破晓aa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode配置ArcGIS API forJavaScript的html文件模板

普通模板 (包括引入css样式文件和js api)"ArcGIS api for js": { "prefix": "arcgis", // 使用的时候输入arcgis，然后回车即可 "body": [ // 模板的主体 "<html>", "<head>", " <meta charset=\"utf-8\"&gt...
复制链接

扫一扫

专栏目录