ArcGis For JavaScript4.x学习(一)——第一个demo
来源:互联网 发布:苹果内存清理软件 编辑:程序博客网 时间:2024/05/01 09:43
一、前提介绍:
博主公司之前的WebGis使用的是ArcGis For Flex,但是由于adobe公司和esri公司对flex不维护了和支持了,所以决定定放弃ArcGis For Flex,换成使用ArcGis For JavaScript,网上很多ArcGis For JavaScript的例子但都是3.x的版本,不是最新的4.x,特写博文记录学习路程。二、资源的引用:
4.x和3.x的目录结构和文件名称都有一些变化,网上很多都是3.x的入门的示例对4.x是不可以直接使用,这儿不详细介绍,可以直接到ArcGis For JavaScript api里去看,这儿给一个入口:ArcGis For JavaScript
4.x的官网api里的示例都是自己的服务,所以只要把它的静态页面复制过去就可以看到效果了,这样对学习会有误导作用,建议还是自己起一个服务学习。
三、自己起服务丰衣足食:
自己起服务:下载官网的那个sdk里有相关的介绍这儿直接贴出来:
1:替换:
- Open
C:\Inetpub\wwwroot\arcgis_js_api\library\4.0\4.0\init.js
in a text editor and search for the text[HOSTNAME_AND_PATH_TO_JSAPI]
, and replace this text withfqdn.tld/arcgis_js_api/library/4.0/4.0/
- Open
C:\Inetpub\wwwroot\arcgis_js_api\library\4.0\4.0\dojo\dojo.js
in a text editor and search for the text[HOSTNAME_AND_PATH_TO_JSAPI]
, and replace this text withfqdn.tld/arcgis_js_api/library/4.0/4.0/
2、设计页面:
<!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>Test Map</title> <link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/esri/css/main.css" /> <style> html, body, #ui-map-view { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <script src="http://www.example.com/arcgis_js_api/library/4.0/4.0/init.js"></script> <script> var myMap, view; require([ "esri/Basemap", "esri/layers/TileLayer", "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function (Basemap, TileLayer, Map, MapView){ // -------------------------------------------------------------------- // If you do not have public Internet access then use the Basemap class // and point this URL to your own locally accessible cached service. // // Otherwise you can just use one of the named hosted ArcGIS services. // -------------------------------------------------------------------- var layer = new TileLayer({ url: "http://www.example.com/arcgis/rest/services/Folder/Custom_Base_Map/MapServer" }); var customBasemap = new Basemap({ baseLayers: [layer], title: "Custom Basemap", id: "myBasemap" }); myMap = new Map({ basemap: customBasemap }); view = new MapView({ center: [-111.87, 40.57], // long, lat container: "ui-map-view", map: myMap, zoom: 6 }); }); </script> </head> <body class="claro"> <div id="ui-map-view"></div> </body></html>
四、注意:
1、对于上面的页面代码需要把js和css引用url修改成自己项目的url
2、对于图层的地图服务这儿需要自己启动个arcgis service用来调用,如果觉得麻烦,esri也提供了相应的服务给我们调用了,这个博主提供出来,不知游客们看到时这些服务还在不在:esri提供的各种样式的地图服务,随意选
0 0
- ArcGis For JavaScript4.x学习(一)——第一个demo
- arcgis for javascript4.2 离线部署
- Cocos2d-x 学习(1)—— 通过Cocos Studio创建第一个Demo
- Arcgis api for javascript4.0beta3本地安装部署IIS
- arcgis for js 3.x 学习记录(一)
- Selenium Webdriver学习记录(一):环境搭建(Java+Maven+Eclipse+Selenium3.x)+第一个测试demo+部分问题解决
- Selenium Webdriver学习记录(一):环境搭建(Java+Maven+Eclipse+Selenium3.x)+第一个测试demo+部分问题解决
- ploymer (一) 第一个demo
- 第一个arcgis server for flex例子
- ArcGIS API for Javascript 第一个地图
- arcgisapi for javascript4.0学习笔记4.0新特性
- android:人品计算器—第一个demo
- Android NDK开发<一>:第一个demo
- Protobuf3 系列一 第一个Java demo
- Struts2学习(一)——第一个项目
- Shader 学习历程(一)——第一个shader
- Django学习(一)——创建第一个响应
- jQuery学习之:jqGrid表格插件——第一个Demo
- Hive排序 cluster by column = distribute by column + sort by column
- 给Unity开发者的C#内存管理(第一部分) C# Memory Management for Unity Developers (part 1 of 3)
- c#学习笔记之Application.DoEvents应用
- android实现APP Linking
- CSS display:inline和float:left两者的区别
- ArcGis For JavaScript4.x学习(一)——第一个demo
- eclipse svn不显示提交人的问题
- IOS 导航栏上的基本控件
- android静默安装和卸载
- java 将一个listBean转换为map
- 本地缓存windows符号服务器
- 一个下雨的下午
- php定界符
- android菜单项无法显示图标