来自弱鸡失望之后觉悟:
之前在使用官方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.点的经纬度: