ArcGIS for js简单实现

最新推荐文章于 2024-07-27 23:17:42 发布
最新推荐文章于 2024-07-27 23:17:42 发布
阅读量4k 收藏
点赞数 2
分类专栏： arcgis server javascript api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wt346326775/article/details/50459810
版权 
<html>
<head>
<title>ItcastOA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style/blue/top.css" />
<script language="JavaScript" src="script/jquery.js"></script>
<script language="JavaScript" src="script/menu.js"></script>
<link type="text/css" rel="stylesheet" href="style/blue/menu.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #mainWindow {
        font-family: sans-serif; 
        height: 100%; 
        width: 100%; 
      }
      html, body {
        margin: 0; 
        padding: 0;
      }
      #header {
        height: 80px; 
        overflow: auto;
        padding: 0.5em;
      }
    </style>
	<script type="text/javascript">
        var map, toolbar, symbol, geomTask,flag;
        //dojo.require("esri.tasks.query");
        require([
          "esri/map",
          "esri/toolbars/navigation",
          "esri/tasks/IdentifyTask",
          "esri/tasks/IdentifyParameters",
          
          "esri/dijit/OverviewMap",
          "esri/toolbars/draw",
          "esri/graphic",

          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",

          "dojo/parser", "dijit/registry",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
        ], function (
          Map, Navigation,IdentifyTask,IdentifyParameters,OverviewMap, Draw, Graphic,
          SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
          parser, registry
        ) {
            parser.parse();

            map = new Map("map", {
            });
           // var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
           // map.addLayer(layer1);
           // map.setZoom(4);
            map.on("load", createToolbar); //地图加载创建绘图工具对象
			 dojo.declare("TianDiTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
                constructor: function() {
            		  this.spatialReference = new esri.SpatialReference({ wkid:4326 });
            		  this.initialExtent = (this.fullExtent = 
                      new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
            		  this.tileInfo = new esri.layers.TileInfo({
            		        "rows" : 256,
            				"cols" : 256,
            				"compressionQuality" : 0,
            				"origin" : { "x" : -180,"y" : 90},
            				"spatialReference" : {"wkid" : 4326},
            				"lods" : [
            				     {"level" : 0, "resolution" : 0.703125, "scale" : 295497593.05875},
                                 {"level" : 1, "resolution" : 0.3515625, "scale" : 147748796.529375},
                                 {"level" : 2, "resolution" : 0.17578125, "scale" : 73874398.264688},
                                 {"level" : 3, "resolution" : 0.087890625, "scale" : 36937199.132344},
                                 {"level" : 4, "resolution" : 0.0439453125, "scale" : 18468599.566172},
                                 {"level" : 5, "resolution" : 0.02197265625, "scale" : 9234299.783086},
                                 {"level" : 6, "resolution" : 0.010986328125, "scale" : 4617149.891543},
                                 {"level" : 7, "resolution" : 0.0054931640625, "scale" : 2308574.945771},
                                 {"level" : 8, "resolution" : 0.00274658203125, "scale" : 1154287.472886},
                                 {"level" : 9, "resolution" : 0.001373291015625, "scale" : 577143.736443},
                                 {"level" : 10, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558},
                                 {"level" : 11, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779},
                                 {"level" : 12, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895},
                                 {"level" : 13, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447},
                                 {"level" : 14, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724},
                                 {"level" : 15, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619},
                                 {"level" : 16, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309},
                                 {"level" : 17, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655}]
            		  });
            		  this.loaded = true;
            		  this.onLoad(this);
                },
                getTileUrl: function(level, row, col) {
                	var levelMap = "";
                	if(level<10){
                		levelMap = "A0512_EMap";
                	}else if(level<12){
                		levelMap = "B0627_EMap1112";
                	}else if(level<18){
                		levelMap = "siwei0608";
                	}
                	return "http://t1.tianditu.cn/DataServer?T=vec_c&"+levelMap+"&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
                }
            });
            
            dojo.declare("TianDiBiaoZhuMapServiceLayer", TianDiTiledMapServiceLayer, {
                getTileUrl: function(level, row, col) {
                	return "http://t1.tianditu.cn/DataServer?T=cva_c&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
                }
            });

     
            dojo.declare("TianDiYXMapServiceLayer", TianDiTiledMapServiceLayer, {
                  getTileUrl: function(level, row, col) {//wmts
                	  return "http://t1.tianditu.cn/DataServer?T=img_c&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
                  }
            });
            map.addLayer(new TianDiTiledMapServiceLayer());
            map.addLayer(new TianDiBiaoZhuMapServiceLayer());
            map.addLayer(new TianDiYXMapServiceLayer());
            var button1 = dojo.byId("Button1");
            var button2 = dojo.byId("Button2");
            var button3 = dojo.byId("Button3");
            var button4 = dojo.byId("Button4");
            var button5 = dojo.byId("Button5");
            var button6 = dojo.byId("Button6");
            var button7 = dojo.byId("Button7");
            var button8 = dojo.byId("Button8");
            var button9 = dojo.byId("Button9");
            var button10 = dojo.byId("Button10");
            
            // dojo.connect(button10,"click",function(evt){
            //	// map.on("click",executeQueryTask);
            //	map.graphic.on("click",aa);
            //});
            
            var navToolbar = new esri.toolbars.Navigation(map);

            dojo.connect(button1, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);

            });
            dojo.connect(button2, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);


            });
            dojo.connect(button3, "click", function (evt) {

                map.panUp();


            });
            dojo.connect(button4, "click", function (evt) {

                map.panDown();


            });
            dojo.connect(button5, "click", function (evt) {

                map.panLeft();


            });
            dojo.connect(button6, "click", function (evt) {

                map.panRight();

            });
            dojo.connect(button7, "click", function (evt) {
                navToolbar.zoomToFullExtent()
                ;
            });
            dojo.connect(button8, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.PAN);

            });
            dojo.connect(button9, "click", function (evt) {

                var overviewMap = new esri.dijit.OverviewMap({
                    map: map,
                    visible: true
                });
                overviewMap.startup();
            });
			dojo.connect(dian,"click",function(evt){
				toolbar.activate(Draw["POINT"]);//执行绘图
                map.hideZoomSlider();
			});
			dojo.connect(Multi_Point,"click",function(evt){
				toolbar.activate(Draw["MULTI_POINT"]);//执行绘图
                map.hideZoomSlider();
			});
            dojo.connect(Linee,"click",function(evt){
				toolbar.activate(Draw["LINE"]);//执行绘图
                map.hideZoomSlider();
			});
			dojo.connect(Polylinee,"click",function(evt){
				toolbar.activate(Draw["POLYLINE"]);//执行绘图
                map.hideZoomSlider();
			});
			dojo.connect(Polygonn,"click",function(evt){
				toolbar.activate(Draw["POLYGON"]);//执行绘图
                map.hideZoomSlider();
			});
			
            // 遍历所有dijit,连接onClick事件
            //为按钮来激活绘图工具
            registry.forEach(function (d) {
                //D是引用的dijit
                //可能是一个布局容器或一个按钮
                if (d.declaredClass === "dijit.form.Button") {//判断是不是按钮
                    d.on("click", activateTool);
                }
            });

            function activateTool() {
                var tool = this.label.toUpperCase().replace(" ", "_");//转换为大写
                alert(tool);
                toolbar.activate(Draw[tool]);//执行绘图
                map.hideZoomSlider();
            }

            function createToolbar(themap) {
                toolbar = new Draw(map);
                toolbar.on("draw-end", addToMap);
            }

            function addToMap(evt) {
                var symbol;
                toolbar.deactivate();//试对象无效
                map.showZoomSlider();//地图放大缩小标尺显示
                switch (evt.geometry.type) {
                    case "point":
                    case "multipoint":
                        symbol = new SimpleMarkerSymbol();
                        break;
                    case "polyline":
                        symbol = new SimpleLineSymbol();
                        break;
                    default:
                        symbol = new SimpleFillSymbol();
                        break;
                }
                var graphic = new Graphic(evt.geometry, symbol);
                map.graphics.add(graphic);
            }
        });

	</script>
</head>
<body>
	<div >
		<div>
				<div id="Head1">
					<div id="Logo">
						<a id="msgLink" href="javascript:void(0)"></a>
						<font color="#0000CC" style="color:#F1F9FE; font-size:28px; font-family:Arial Black, Arial">热力管线系统</font> 
					</div>
				</div>
				<div id="Head2">
				<div>
						<input id="Button1" type="button" value="放大" />
						<input id="Button2" type="button" value="缩小" />
						<input id="Button3" type="button" value="上移" />
						<input id="Button4" type="button" value="下移" />
						<input id="Button5" type="button" value="左移" />
						<input id="Button6" type="button" value="右移" />
						<input id="Button7" type="button" value="全屏" />
						<input id="Button8" type="button" value="拖动" />
						<input id="Button9" type="button" value="鹰眼" />
						<input id="Button10" type="button" value="图属查询" />
						<input id="BaoGuan" type="button" value="爆管分析" />
						<input id="dian" type="button" value="点" />
						<input id="Multi_Point" type="button" value="多点" />
						<input id="Linee" type="button" value="线" />
						<input id="Polylinee" type="button" value="线2" />
						<input id="Polygonn" type="button" value="面" />
						
						<button data-dojo-type="dijit/form/Button">Point</button>
						<button data-dojo-type="dijit/form/Button">Multi Point</button>
						<button data-dojo-type="dijit/form/Button">Line</button>
						<button data-dojo-type="dijit/form/Button">Polyline</button>
						<button data-dojo-type="dijit/form/Button">Polygon</button>
						<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
						<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
					</div>
			</div>
		</div>
		<div style=" width:1350px;height:467px;border:1px solid #0000FF;">
			<div id="Menu"style="width:200px;height:467px;float:left;>
				<ul id="MenuUl">
					<li class="level1">
						<div onClick="menuClick(this)" class="level1Style"><img src="style/images/MenuIcon/FUNC20001.gif" class="Icon" />数据列表</div>
						<div>111111</div>
						<div>222222</div>
					</li>
				</ul>
			</div>
			
			<div style="width:1150px;height:467px;float:left;">
			
			<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
			
			<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
		  </div>
		  </div>
		</div>
	</div>
</body>
</html>

绛门人
关注
专栏目录
ArcGIS for js开发教程
12-29
很详细的注释，Arcgis for js 的例子很适合新手看，属性查询，空间查询，专题图，缓冲区分析等
ArcGIS API for JS开发教程
12-17
ArcGIS API for JS开发教程，ArcGIS API for JS开发教程，仅供交流学习使用。
arcgisjs 实现十万级海量数据点位栅格等值图显示
最新发布
喜大普奔
07-27 318
3.厂商所提供的点位的坐标系是否相同，投影坐标系的区别(二维地图因为坐标系多，存在投影坐标系偏移问题)2.使用位图，将栅格bbox，和数值传给位图，将输出的结果，作为图片图层，达到颜色填充效果(准确性?4.基于以上，如果需求上再加一条时间轴，需要达到十万级别数据，秒级更新，点位数据接口是否需要添加。以上两种方案，因为后续的坑有点多，比如不同的坐标系的偏移，计算时js的小数点丢失…1.使用视窗范围，去限制一次性加载栅格的数量，从而达到性能优化的效果。1.十万级别数据，加入地图的性能问题(开始的10多秒 ->
ArcGIS API for Javascript 开发基础教程中文版
11-02
ArcGIS API for Javascript 开发基础教程中文版，对于需要开发arcgis地图的朋友，可以下载学习下
arcgis for js——1.显示2D地图
独学而无友，则孤陋而寡闻
03-30 908
目录1.引入ArcGIS API for JavaScript2.加载模块3.创建地图4.创建2D视图5.定义页面内容与样式表6.效果展示7.完整源码 1.引入ArcGIS API for JavaScript 首先，建立基本的html文档，然后在<head>标签内，使用<script>和<link>标签引入ArcGIS API for JavaScript ：...
arcgis api for javascript 3.23实现的简单编辑功能
01-19
用arcgis api for javascript 3.23实现的简单编辑功能 能绘制点线面
arcgis api for javascript 4.5实现二三维地图添加geojson数据
12-13
本文将深入探讨如何利用ArcGIS API for JavaScript 4.5版本实现二三维地图中添加GeoJSON数据，以及GeoJSON数据与ArcGIS JSON数据格式之间的转换。 GeoJSON是一种开放的标准格式，用于存储地理空间数据，它基于JSON...
arcgis api for javascript v4.23
06-26
《ArcGIS API for JavaScript v4.23：深入解析与应用》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。v4.23版本作为其一个重要更新，引入了众多新特性和...
9.（arcgis api for js篇）arcgis api for js接入百度地图（有偏移）.zip
03-08
ArcGIS API for JS是Esri公司提供的JavaScript库，用于创建基于Web的地理信息系统（GIS）应用。它支持多种地图服务，包括地图图层、地理编码、空间分析等功能。而百度地图API则提供了类似的服务，但使用的是百度自己...
ArcGIS for js 4.X-热力图.rar
10-12
在ArcGIS for JavaScript（简称ArcGIS for JS）4.X版本中，热力图的实现相比3.X版本有所改变。在3.X版本中，热力图的加载通常依赖于内置的插件，操作相对简单。然而，随着4.X版本的发布，开发者发现热力图的创建多...
ArcGis-for-javaScript最全中文API
03-01
ArcGis-for-javaScript最全中文API
arcgis for js 基础功能实现
08-18
实现arcgis for js中的基础功能，适合初学者
ArcGIS api for javascript全套教程
明耀的博客
01-19 8952
ArcGIS api for javascript全套教程
ArcGIS4Js重要概念3：编程模式1
yifei1989的专栏
01-05 359
在ArcGIS for JavaScript 的架构体系中，有挺多我们需要了解的编程模式（ Programming patterns ），其中有些是撸代码过程必须要使用，有些是可以简化我们工作量的。 了解和熟悉这些模式，我们将能更加愉快的撸代码。 涉及概念有： 类加载 (Loading Classes)、构造方法（Constructors）、属性（Properties）、自动构造（Autocast...
部署arcgis-for-js
孙霸天的专栏
03-22 367
部署在nginx下为例 下载对应的arcgis for js的安装包 在ubuntu系统上启动nginx服务 将安装包上传至nginx的html目录下并解压 /var/www /etc/nginx 修改init.js和dojo/dojo.js /var/www/html/arcgis_js_api/library/arcgis_js_api/library/4.11/dojo/dojo.js在文本编辑器中打开并搜索文本[HOSTNAME_AND_PATH_TO_JSAPI]，然后将
arcgis api for js共享干货系列之二自定义Navigation控件样式风格
07-05 137
arcgis api for js默认的Navigation控件样式风格如下图： 这样的风格不能说不好，各有各的爱好，审美观，这里也不是重点，这里的重点是如何自定义一套自己喜欢的样式风格呢；自己自定义一个NavigationControl控件类，最终实现的效果如下图： 思路如下：其实就是在网上参照天地图或者谷歌地图的Navigation风格样式，下载它们的图片模版，然后...
ArcGIS4Js重要概念2：图层
yifei1989的专栏
01-05 796
图层作为地图中最基本的要素，我们撸代码过程肯定会使用到。ArcGIS for Js 中定义很多的图层类，有的可以展示矢量数据（例如：FeatureLayer 和 GraphicsLayer）, 有的可以展示栅格数据（如： ImageryLayer）。 这些图层类都有一个共同的基类 Layer ， 我们先看看 Layer 中常用的属性和方法。 Layer 常用属性和方法 Layer 常用属性 fu...
ArcGIS API for JavaScript学习
weixin_43395693的博客
08-29 3429
三、ArcGIS API for JavaScript 类包 3.1 API API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。——百度百科 An application programming interface (API) is an interface or communication pro
ArcGIS API for JavaScript 实现轨迹移动功能解析
在开发环境中，首先需要准备好ArcGIS API for JavaScript的离线部署，包括API库和离线帮助文档。智能提示功能有助于提高开发效率。通过编写简单的HTML和JavaScript代码，可以快速构建出第一个显示地图的应用程序。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值