arcgis for js 基本操作功能,测量,标会,标注等功能

想要源码的,联系我,或者在csdn中下载,地址


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
    content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>esri Deom</title>

<link rel="stylesheet"
    href="arcgis_js_api/library/3.27/3.27/dijit/themes/claro/claro.css" />
<link rel="stylesheet"
    href="arcgis_js_api/library/3.27/3.27/esri/css/esri.css" />
<style>
html, body, #map {
    height: 100%;
    width: 100%;
}

body {
    background-color: #fff;
    overflow: hidden;
}

#BasemapToggle {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 50;
}

#HomeButton {
    left: 25px;
    position: absolute;
    top: 93px;
    z-index: 50;
}

#LocateButton {
    left: 25px;
    position: absolute;
    top: 130px;
    z-index: 50;
}

#search {
    z-index: 20;
    height: 35px;
    width: 300px;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
}
</style>

<script type="text/javascript">
    var ArcGIS_js_api_path = "arcgis_js_api/library/3.27/3.27";

    
</script>
<script src="js/main/drawExtension/tween.js"></script>  
    <script type="text/javascript">
        //配置arcgis拓展解析天地图服务类引用的路径
        
        alert(location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/Extension");
        dojoConfig = {
            parseOnLoad: true,
           /*  packages: [{
                name: 'tdlib',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib"
            }], */
            paths: {
                Extension: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/Extension",
                ExtensionDraw: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/plotDraw"
            }
        };
        </script>
<script type="text/javascript" src="arcgis_js_api/library/3.27/3.27/init.js"></script>

<script src="js/jquery-1.12.3.min.js"></script>
   
     <link href="Content/map/map-index.css" rel="stylesheet" type="text/css" />
    <link href="Content/map/mapcss.css" rel="stylesheet" type="text/css" />
        <link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
        
      <link rel='stylesheet' href='js/plugins/jqueryDialog/jDialog/jDialog.css' />
    <script src='js/plugins/jqueryDialog/jDialog.js' type='text/javascript'></script>

    
    <script src="arcgisjs/ArcGIS_util.js"></script>
     <script type="text/javascript" src="js/main/measure.js"></script>
     <script type="text/javascript" src="js/main/map.plot.js"></script>
<script>
    var findTask;
    var myFeatureLayer; 
    function init2D(position2DArr) {
        var mapId = document.getElementById("map");
        ArcGIS_util.init(mapId);
          var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
        ArcGIS_util.addLayer(mapServiceURL, null); 
         DCI.Measure.Init(ArcGIS_util.map);
    }

    $(function(){
        
        //态势标绘
        $("#bPlot").click(function () {
            //初始化军势标绘接口
             if (!DCI.Plot.isload)
                DCI.Plot.Init(ArcGIS_util.map);
            if (DCI.Plot.dialog)
                DCI.Plot.dialog.close(); 
            DCI.Plot.dialog = jDialog.dialog({
                title: '态势标绘',
                width: 370,
                height: 200,
                left: 450,
                top: 200,
                modal: false, // 非模态,即不显示遮罩层
                content: DCI.Plot.Html
            });
            DCI.Plot.InitEvent();

        });
        
        //测距
        $("#bMeasureLine").click(function () {
            DCI.Measure.measureDistance();
        });

        //测面积
        $("#bMeasureArea").click(function () {
            DCI.Measure.measureArea();
        });
        
        //清除
        $("#bClear").click(function () {
            ArcGIS_util.map.graphics.clear();
            for (var i = 0; i < ArcGIS_util.map.graphicsLayerIds.length; i++) {
                var layer = ArcGIS_util.map.getLayer(ArcGIS_util.map.graphicsLayerIds[i]);
                layer.clear();
            }
            ArcGIS_util.map.infoWindow.hide();
        });
        
    })
    
</script>

</head>
<body class="claro" onload="init2D()">
<button id="bPlot">动态标会</button>

<button id="bPlot">动态标会</button>
<button id="bMeasureLine">测量</button>
<button id="bMeasureArea">面积</button>
<button id="bClear">方法</button>

    <div id="map" style="padding: 0">
        <span id="info"
                style="position: absolute; left: 25px; bottom: 5px; color: #000; z-index: 50;"></span>
    </div>
</body>
</html>

1.标注

2.标会

 

3.测量

猜你喜欢

转载自blog.csdn.net/u010878640/article/details/87881901