ArcGis For JavaScript API (测量工具)

最新推荐文章于 2025-05-30 09:44:51 发布

qq_41622016

最新推荐文章于 2025-05-30 09:44:51 发布

阅读量2.4k

点赞数 1

本文介绍了一个基于ArcGIS API实现的地图测量工具，该工具能够帮助用户获取当前位置、测量距离及面积等。通过定义不同的线和点符号，用户可以自定义测量结果在地图上的显示样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测量组件提供工具，用于计算当前位置（获取位置），测量距离测量距离：面积

var measurement = new esri 。迪吉特。测量（{ 地图：地图}，道场。byId （'measurementDiv' ））;

测量。startup （）;

你也可选择定义一个自定义的线和点符号，测量的部件将在地图上绘制时使用

SimpleFillSymbol的常量

常量	描述
STYLE_BACKWARD_DIAGONAL	填充是向后对角线。（向后的对角线）
STYLE_CROSS	填充是一个十字架。（交叉线）
STYLE_DIAGONAL_CROSS	填充是对角交叉。（对角交叉）
STYLE_FORWARD_DIAGONAL	填充是前向对角线。（向前的对角线）
STYLE_HORIZONTAL	填充是水平线。（水平线）
STYLE_NULL	多边形没有填充。（无）
STYLE_SOLID	填充是实心的。（实线）
STYLE_VERTICAL	填充是垂直线。（垂直线）

<！DOCTYPE html>
<HTML>
  <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>测量工具</ title>
    <link rel =“stylesheet”href =“https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css”>
    <link rel =“stylesheet”href =“https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css”>
    <风格>
      html，body {
        高度：100％;
        宽度：100％;
        余量：0;
      }
      身体 {
        背景色：#FFF;
        溢出：隐藏;
        font-family：“Trebuchet MS”;
      }
      #map {
        border：solid 2px＃808775;
        -moz-边界半径：4PX;
        -webkit-边界半径：4PX;
        边界半径：4PX;
        保证金：5px的;
        填充：0像素;
      }
      #titlePane {
        宽度：280像素;
      }
      </样式>
      <script src =“https://js.arcgis.com/3.25/”> </ script>
    <SCRIPT>
    var map;
	//导入包
    要求（[
        “道场/ DOM”，
        “ESRI /颜色”，
        “道场/键”，
        “道场/分析器”，

        “ESRI /配置”，
        “ESRI /嗅”，
        “ESRI /地图”，
        “ESRI / SnappingManager”
        “ESRI /的dijit /测量”，
        “ESRI /层/ FeatureLayer”，
        “ESRI /渲染/ SimpleRenderer”
        “ESRI /任务/ GeometryService”
        “ESRI /符号/的SimpleLineSymbol”，
        “ESRI /符号/ SimpleFillSymbol”，

        “ESRI /的dijit /比例尺”
        “的dijit /布局/使用BorderContainer”，
        “的dijit /布局/的contentPane”，
        “的dijit / TitlePane”
        “的dijit /形式/复选框”，
        “道场/ domready中！”
      ]，功能（
        dom，颜色，键，解析器，
        esriConfig，has，Map，SnappingManager，Measurement，FeatureLayer，SimpleRenderer，GeometryService，SimpleLineSymbol，SimpleFillSymbol
      ）{
        parser.parse（）;
        //这个示例可能需要一个代理页面来处理与ArcGIS的服务器服务的通信。您需要
	//将下面的网址替换为您机器上的代理的位置。请参阅“使用代理页面”帮助主题。
	//关于设置代理页面的详细信息
        esriConfig.defaults.io.proxyUrl =“/ proxy /”;
        esriConfig.defaults.io.alwaysUseProxy = false;

        //此服务仅用于开发和测试目的。我们建议您创建自己的几何服务，以便在应用程序中使用，可以直接使用
        esriConfig.defaults.geometryService = new GeometryService（“https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer”）;

        map = new Map（“map”，{
          basemap：“satellite”，//指定的地图底图。（如果自己的地图当然也可以，修改相应地图服务即可）默认有效的选项：“streets”，“satellite”，“hybrid”，“topo” ， “灰色”， “海洋”， “国家地理”， “OSM”。
          中心：[ -  85.743,38.256]，
          zoom：17 //缩放度
        }）;
		// SimpleFillSymbol用于在图形图层上绘制的功能
        var sfs = new SimpleFillSymbol（
          “固体”，
          new SimpleLineSymbol（“solid”，new Color（[195,176,23]），2），//颜色像素
          空值
        ）;

        var parcelsLayer = new FeatureLayer（“https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0”，{
          模式：FeatureLayer.MODE_ONDEMAND，
          outFields：[“*”]
        }）;
        parcelsLayer.setRenderer（new SimpleRenderer（sfs））;
        map.addLayers（[parcelsLayer]）; //所有图层使用map.addLayers方法添加到地图后触发

        // copyKey映射到窗户上的CTRL和苹果机上的Cmd的
        var snapManager = map.enableSnapping（{
          snapKey：有（“mac”）？keys.META：keys.CTRL
        }）;
        var layerInfos = [{
          layer：parcelsLayer
        }];
        snapManager.setLayerInfos（layerInfos）;

        var measurement = new Measurement（{//测量工具
          地图：地图
        }，dom.byId（“measurementDiv”））;
        measurement.startup（）; //激活工具
      }）;
    </ SCRIPT>
  </ HEAD>

  <body class =“calcite”>
    <div id =“mainWindow”data-dojo-type =“dijit / layout / BorderContainer”data-dojo-props =“design：'headline'，gutters：false”
    style =“width：100％; height：100％;”>
      <div id =“map”data-dojo-type =“dijit / layout / ContentPane”data-dojo-props =“region：'center'”>
        <div style =“position：absolute; right：20px; top：10px; z-Index：999;”>
          <div id =“titlePane”data-dojo-type =“dijit / TitlePane”data-dojo-props =“title：'Measurement'，closable：false”>
            <div id =“measurementDiv”> </ div>
            <span style =“font-size：smaller; padding：5px 5px;”>按<b> CTRL </ b>启用捕捉。</ span>
          </ DIV>
        </ DIV>
      </ DIV>
    </ DIV>
  </ BODY>
</ HTML>