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属性显示滑动条文字说明。

时间: 2024-08-18 13:03:37

ArcGIS JavaScript API 实现基本的地图功能的相关文章

[转]ArcGIS JavaScript API本地部署离线开发环境

1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk的下载链接,api是我们开发需要的库,sdk是说明文档和例子,点击下载api的最新版3.2. 2 本地部署API 打开API包中的arcgis_js_api/library/install.htm安装说明,本文依据此英文说明而来. 解压后在IIS中建立应用程序,如下图.配置好API应用程序后,其路径

ArcGIS Javascript API 加载高德在线地图扩展

利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo",

ArcGIS JavaScript API本地部署离线开发环境[转]

原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk的下载链接,api是我们开发需要的库,sdk是说明文档和例子,点击下载api的最新版3.2. 2 本地部署API 打开API包中的arcgis_js_api/libr

使用ArcGIS JavaScript API 3.18 加载天地图

对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. ArcGIS JavaScript API最近新推出了3.18版本.所以下面示例代码将基于该版本. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

如何正确响应ArcGIS JavaScript API中图形的鼠标事件

在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于专题GIS图形是叠加在底图上的,所以我们在处理地图的鼠标点击事件时,就需要根据实际点击的位置和内容来对不同的数据进行查询. ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件. 下面是示例代码: 1 <!DOCTYPE html> 2 <htm

FK JavaScript之:ArcGIS JavaScript API之地图动画

地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScript 官网示例中的代码进行分析注解.下述代码对官网示例进行了部分调整 示例网址1: 示例网址2: 示例中csv文件 以下为代码注释: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&

ArcGIS JavaScript API 3.11本地化安装

1.下载API 美国站点:http://www.esri.com/apps/products/download/index.cfm?fuseaction=download.all#ArcGIS_API_for_JavaScript 中国ESRI网站:http://support.esrichina-bj.cn/support/download/software/ 2.安装 下载完毕后,解压Library:arcgis_js_v311_api.zip和SDK:arcgis_js_v311_sdk.

空间数据可视化:ArcGIS JavaScript API 二、三维数据一体化

  ESRI不愧为GIS业界巨头,从本科起就开始接触ArcGIS系列,桌面端从ArcMap 到 ArcPro,服务端从ArcIMS 到 ArcServer,无不体现了这个了不起的公司在与时俱进.不断创新.现在的一些列产品好多我都没有用过,像 portal,pro,webbuilder.........网络GIS 现在好像是只更新JavaScript了,GIS与计算机的关系,都被ESRI公司的产品体现的淋漓尽致.今天来劲,就看了下新的API,果然是集美貌与才华于一身的API-- 先上个官方的案例,

ArcGIS JavaScript API动态图层

? 矢量动态图层 ? ? <!DOCTYPE HTML> <html> ? <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Map</title> <link rel="stylesheet" href="http://172.16