加载天地图"/>
arcgis for js 加载天地图
1源码地址:
js引用代码:
<script type="text/javascript">
//配置arcgis拓展解析天地图服务类引用的路径
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'tdlib',
location: this.location.pathname.replace(/\/[^/]+$/, "") + "/plug-in/arcgis-js/js/tdlib"
}],
paths: {
Extension: location.pathname.replace(/\/[^/]+$/, "") + "/plug-in/arcgis-js/js/main/drawExtension/Extension",
ExtensionDraw: location.pathname.replace(/\/[^/]+$/, "") + "/plug-in/arcgis-js/js/main/drawExtension/plotDraw"
}
};
</script>
js代码:
<script type="text/javascript">
var vecMap,tdtimglayer,annolayer,tdtimgcialayer;
function init2D() {
var mapId = document.getElementById("layout-map");
ArcGIS_util.init(mapId);
/* var mapServiceURL = "";
ArcGIS_util.addLayer(mapServiceURL, null); */
vecMap = new tdlib.TDTLayer();
ArcGIS_util.map.addLayer(vecMap);
tdtimglayer = new tdlib.TDTImgLayer();
ArcGIS_util.map.addLayer(tdtimglayer);
tdtimglayer.hide();
annolayer = new tdlib.TDTAnnoLayer();
ArcGIS_util.map.addLayer(annolayer);
tdtimgcialayer = new tdlib.TDTImgCiaLayer();
ArcGIS_util.map.addLayer(tdtimgcialayer);
tdtimgcialayer.hide();
var pro = new esri.layers.FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/HBMapService/MapServer/0");
ArcGIS_util.map.addLayer(pro);
DCI.Measure.Init(ArcGIS_util.map);
}
var showMap = function(layer){
//设置按钮样式
var baseMap = ["vec","img"];
for(var i= 0, dl=baseMap.length;i<dl;i++){
$("#"+baseMap[i]).removeClass("base-map-switch-active");
}
$("#"+layer).addClass("base-map-switch-active");
//设置显示地图
switch(layer){
case "img":{//影像
annolayer.hide();
vecMap.hide();
tdtimglayer.show();
$("#ano").show();
break;
}
default :{//地图
vecMap.show();
annolayer.show();
tdtimglayer.hide();
tdtimgcialayer.hide();
$("#ano").hide();
$("#chkAno").attr("checked",false);
break;
}
}
};
var anoCtrl = function(){
if($("#chkAno").prop("checked")){
tdtimgcialayer.show();
}
else{
tdtimgcialayer.hide();
}
}
</script>
<div class="layout-main" id="layout-map">
<span id="info"
style="position: absolute; left: 25px; bottom: 5px; color: #000; z-index: 50;"></span>
<div id="basis-function">
<ul id="nav">
<!-- <li><a href="#" οnclick="ArcGIS_util.MeasureTool_clear()">清除</a></li>
<li><a href="#" οnclick="ArcGIS_util.deactivate()">漫游</a></li>
<li><a href="#" οnclick="ArcGIS_util.zoomToFullExtent()">全图</a></li>
<li><a href="#" οnclick="ArcGIS_util.ZOOM_IN()">放大</a></li>
<li><a href="#" οnclick="ArcGIS_util.ZOOM_OUT()">缩小</a></li>
<li><a href="#" οnclick="ArcGIS_util.MeasureTool_Polyline()">长度测量</a></li>
<li><a href="#" οnclick="ArcGIS_util.MeasureTool_Polygon()">面积测量</a></li>
<li><a href="#">图层管理</a></li> -->
<li><a href='javascript:void(0)' οnclick="ArcGIS_util.ZOOM_OUT()"><span >缩小</span> </a> </li>
<li><a href='javascript:void(0)' οnclick="ArcGIS_util.ZOOM_IN()"><span >放大</span></a> </li>
<li><a href='javascript:void(0)' id="panMove"><span >漫游</span></a> </li>
<li><a href='javascript:void(0)' id="bClear"><span >清除</span></a> </li>
<li><a href='javascript:void(0)' id="bPlot"><span>动态标会</span></a> </li>
<li><a href='javascript:void(0)' id="bMeasureLine"><span>长度测量</span></a> </li>
<li><a href='javascript:void(0)' id="bMeasureArea"><span>面积测量</span></a> </li>
<li><a href='javascript:void(0)'><span>图层测量</span></a> </li>
</ul>
</div>
<div class="base-map">
<div id="vec" class="base-map-switch base-map-switch-active" οnclick="showMap('vec')">地图</div>
<div id="img" class="base-map-switch base-map-switch-center" οnclick="showMap('img')">影像
<div id="ano" class="base-map-ano">
<input id="chkAno" type="checkbox" name="chkAno" value="chkAno" οnchange="anoCtrl()"/>标注
</div>
</div>
</div>
</div>
2.效果图:
更多推荐
arcgis for js 加载天地图
发布评论