ArcGIS JavaScript API 实现基本的地图功能

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>创建一幅地图</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

<link rel="stylesheet" href="http://127.0.0.1:8080/jsapi/3.11/dijit/themes/soria/soria.css">

<link rel="stylesheet" href="http://127.0.0.1:8080/jsapi/3.11/esri/css/esri.css">

<style>

html, body, #mapDiv{

padding: 0;

margin: 0;

height: 100%;

}

</style>

<script src="http://127.0.0.1:8080/jsapi/3.11/init.js"></script>

<script type="application/javascript" src="jsapi_vsdoc10_v38.js"></script>

<script>

var map,lods,fullExtent,tiledMapServiceLayer;

require(["esri/map", "esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"], function(Map, Extent, ArcGISTiledMapServiceLayer) {

lods = [

{"level": 0, "resolution": 0.028553532069963364, "scale": 12000000},

{"level": 1, "resolution": 0.01903568804664224, "scale": 8000000},

{"level": 2, "resolution": 0.00951784402332112, "scale": 4000000},

{"level": 3, "resolution": 0.00475892201166056, "scale": 2000000},

{"level": 4, "resolution": 0.00237946100583028, "scale": 1000000},

{"level": 5, "resolution": 0.00118973050291514, "scale": 500000},

{"level": 6, "resolution": 5.9486525145757E-4, "scale": 250000},

{"level": 7, "resolution": 2.3794610058302802E-4, "scale": 100000},

{"level": 8, "resolution": 1.1897305029151401E-4, "scale": 50000},

{"level": 9, "resolution": 5.9486525145757005E-5, "scale": 25000},

{"level": 10, "resolution": 2.3794610058302804E-5, "scale": 10000},

{"level": 11, "resolution": 1.1897305029151402E-5, "scale": 5000},

{"level": 12, "resolution": 4.75892201166056E-6, "scale": 2000}

];

fullExtent = new Extent({

"xmin": 73.441277, "ymin": 34.334934, "xmax": 96.388373, "ymax": 49.178574,

"spatialReference": {"wkid": 4326}

});

map = new Map("mapDiv", {

extent: fullExtent,

lods: lods,

slider:true,

sliderStyle:"large",

//sliderPosition:"top-left",

zoom: 0,

logo:false

});

tiledMapServiceLayer = new ArcGISTiledMapServiceLayer("http://10.238.208.34/arcgis/rest/services/BaseMap/XjOnline/MapServer");

map.addLayer(tiledMapServiceLayer);

});

</script>

</head>

<body class="soria">

<div id="mapDiv"></div>

</body>

</html>

输出结果：

说明：可以为map对象设置<String[]> sliderLabels属性显示滑动条文字说明。

本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1576164，如需转载请自行联系原作者

ArcGIS JavaScript API 实现基本的地图功能相关推荐

使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...
ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...
ArcGIS JavaScript API本地部署离线开发环境
1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...
使用Arcgis Javascript api 访问其他地图
概述在最初接触GIS开发的时候,手上没有任何的地图数据,只是简单的把ArcGIS提供的或者国家地理信息中心公开的低分辨率矢量数据使用ArcGIS Server发布成地图服务来使用.慢慢的开始下载Go ...
ArcGIS JavaScript api实现点聚合
概述关于web gis中解决前端显示过多要素(点.线.面)时响应时间和美观的问题,现在已知的两种方式:一种是点云(baidu地图中的小红点,其实不是显示了所有的结果)另一种方式就是:点聚合(把临近的 ...
FK JavaScript之:ArcGIS JavaScript API之地图动画
地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度本文目的:对ArcGIS JavaScr ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
空间数据可视化：ArcGIS JavaScript API 二、三维数据一体化
ESRI不愧为GIS业界巨头,从本科起就开始接触ArcGIS系列,桌面端从ArcMap 到 ArcPro,服务端从ArcIMS 到 ArcServer,无不体现了这个了不起的公司在与时俱进.不断创 ...
arcgis javascript api 事件的监听及移除
On Style Events 方式 var mapExtentChange = map.on("extent-change", changeHandler); function ...

ArcGIS JavaScript API 实现基本的地图功能

ArcGIS JavaScript API 实现基本的地图功能相关推荐

最新文章

热门文章