arcgis for js 加载天地图

1 篇文章 0 订阅
1 篇文章 0 订阅

1源码地址:https://download.csdn.net/download/u010878640/10977878

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 = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
        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.效果图:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值