arcgis api for javaScript学习-Measurement

it2024-07-15  38

来自弱鸡失望之后觉悟:

  之前在使用官方api加自己发布的随便一个地图服务想要使用测量控件Measurement,直接new了该控件来使一致出问题,开始以为是因为我自己发布我的服务并不是web 墨卡托投影的问题,所以放弃。

   后来我后面查看api发现有个方法可以查看投影是否是web 墨卡托,然后调用isWebMercator()方法查看,令人惊讶的是,error :spatialReference undefined,我也查看了官方的服务也是undefined,不知道是否是因为需要在new Map的时候需要指定spatialReference才可以调用改属性查看到,最近还发现我在调用ArcGISDynamicMapServiceLayer里面的layerInfos属性也查看不到,但是我在打印了ArcGISDynamicMapServiceLayer建立的layer却能看到里面的layerInfos属性,可就是获取不到,真是令人生气,难道是esri不爱了。  机缘巧合,我在使用官方的Measurement例子的时候发现它使用这个小部件的时候给esriConfig的esriConfig.defaults.geometryService添加了一个集合服务,回想我的服务报错貌似就是这个错误,我就添加了这个东西,果然,可以用了!!!。

具体代码如下:

里面包含了一些之前的其他东西,可以忽略,主要就是下面两段代码实现了Measurement小部件,至于为什么有些地图服务可以不用添加这个集合服务的配置,还希望各位大佬解惑。

esriConfig.defaults.geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup();

完整代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图基本操作</title> <style> .MapClass { width: 100%; height: 700px; border: 1px solid #000; /*position: absolute;*/ } #HomeButton{ position: absolute; top: 95px; left: 20px; z-index: 50; } #titlePane{ width:280px; background-color: white; } </style> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css"> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script> require(["esri/map", "dojo/on", "dojo/dom", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/query", "esri/toolbars/navigation", "esri/dijit/HomeButton", "esri/dijit/Measurement", "esri/geometry/webMercatorUtils", "esri/config", "esri/tasks/GeometryService", "dojo/domReady!"], function (Map, on, dom, ArcGISDynamicMapServiceLayer, query, Navigation, HomeButton, Measurement, webMercatorUtils, esriConfig, GeometryService) { esriConfig.defaults.geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var map = new Map("mapDiv", { // basemap: "osm", // // center: [104.072331,30.66303], // // zoom: 11, logo:false }); var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/MyMapService/MapServer"); map.addLayer(layer); //创建地图操作对象 var navToolbar = new Navigation(map); //给按钮添加绑定事件 query("button").on("click", function (event) { var value = this.innerText; switch (value) { case "平移": navToolbar.activate(Navigation.PAN); break; case "拉框缩小": navToolbar.activate(Navigation.ZOOM_OUT); break; case "拉框放大": navToolbar.activate(Navigation.ZOOM_IN); break; case "全图": navToolbar.zoomToFullExtent(); break; case "preView": navToolbar.zoomToPrevExtent(); break; case "漫游": //默认是漫游操作 navToolbar.deactivate(); break; } }); //alert(map.spatialReference); //创建主页按钮 var home=new HomeButton({ map:map },"HomeButton"); home.startup(); console.log(map.spatialReference); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); }); </script> </head> <body> <div id="mapDiv" class="MapClass"> <div id="HomeButton"></div> <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div id="titlePane"> <div id="measurementDiv"></div> </div> </div> </div> <button>拉框放大</button> <button>拉框缩小</button> <button>平移</button> <button>全图</button> <button>漫游</button> <button>preView</button> </body> </html>

结果如下图:1.测面积

2.测距离:

3.点的经纬度:

最新回复(0)