本文章向大家介绍arcgis for js 4.x 测量（测距，测面），主要包括arcgis for js 4.x 测量（测距，测面）使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="http://localhost:90/4.11/esri/css/main.css"> <link rel="stylesheet" href="http://localhost:90/4.11/esri/themes/light/main.css" /> <script src="http://localhost:90/4.11/init.js"></script> <script> var map; var mapview; var dra; require([ "esri/Map", //地图、通用属性 "esri/views/MapView", "esri/Basemap", "esri/layers/WebTileLayer", "esri/layers/MapImageLayer", "esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/geometry/SpatialReference", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Extent", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/layers/support/TileInfo", "esri/config", "esri/widgets/AreaMeasurement2D", "esri/widgets/DistanceMeasurement2D", "esri/views/draw/Draw", "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/symbols/TextSymbol", "esri/symbols/Font", "dojo/on", "dojo/dom", '4326.js', 'esri/widgets/Home', 'Measurement2D.js' ], function( Map, MapView, Basemap, WebTileLayer, MapImageLayer, TileLayer, WMTSLayer, SpatialReference, GraphicsLayer, Graphic, Extent, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, TileInfo, esriConfig, AreaMeasurement2D, DistanceMeasurement2D, Draw, geometryEngine, Point, Polyline, Polygon, TextSymbol, Font, on, dom, epsg4326, Home, Measurement2D ) { var tiledLayer = new WebTileLayer({ urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=6a92e00bdfafade25568c053a5ba6de4", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], tileInfo: epsg4326.tileInfo //tileInfo: tileInfo }) var tiledLayer_poi = new WebTileLayer({ urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=6a92e00bdfafade25568c053a5ba6de4", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], tileInfo: epsg4326.tileInfo // tileInfo: tileInfo }); // 注意：创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984) map = new Map({ spatialReference: { wkid: 4326 }, layers:[tiledLayer, tiledLayer_poi] }); var drawlayer2 = new GraphicsLayer(); map.add(drawlayer2) mapview = new MapView({ map: map, // 绘制的地图 spatialReference: { wkid: 4326 }, container: 'viewDiv', // 绘制地图的ID zoom: 7, center: [113.23, 23.16], scale: epsg4326.tileInfo.lods[9].scale, }); //控件調用 var homeWidget = new Home({ view: mapview, }); mapview.ui.add(homeWidget, "top-right"); var Measurement2Dwidget = new Measurement2D(mapview,"top-right"); var url = "https://tiles.arcgis.com/tiles/nzS0F0zdNLvs7nc8/arcgis/rest/services/US_Counties_basemap/MapServer" // var tile = new ArcGISTiledMapServiceLayer(url) // map.addLayer(tile) mapview.on("click", function(evt) { console.log(evt) }) console.log(mapview) dra = new Draw( { showTooltips: true, view:mapview }); drawf = function() { var action = dra.create("polygon", { mode: "click" }); mapview.focus(); action.on( [ "vertex-add", "vertex-remove", "cursor-update", "redo", "undo", "draw-complete" ], createPolygon ); } createPolygon = function(event) { var vertices = event.vertices; var fillSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [3, 255, 240, 0.3], outline: { // autocasts as new SimpleLineSymbol() color: [255, 116, 3], width: '1px' } }; var polygon = new Polygon({ rings: vertices }); drawlayer2.removeAll(); var graphics = new Graphic({ geometry: polygon, symbol: fillSymbol }); drawlayer2.add(graphics); if (event.type == "draw-complete") { mapview.container.style.cursor = "default"; //this.calArea(graphics.geometry, _this.gisMapView); } } var activeWidget = null; //测距 document .getElementById("distanceButton") .addEventListener("click", function() { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("distance"); } else { setActiveButton(null); } }); //测面 document .getElementById("areaButton") .addEventListener("click", function() { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("area"); } else { setActiveButton(null); } }); function setActiveWidget(type) { switch (type) { case "distance": activeWidget = new DistanceMeasurement2D({ view: mapview }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); mapview.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("distanceButton")); break; case "area": activeWidget = new AreaMeasurement2D({ view: mapview }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); mapview.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("areaButton")); break; case null: if (activeWidget) { mapview.ui.remove(activeWidget); activeWidget.destroy(); activeWidget = null; } break; } } function setActiveButton(selectedButton) { // focus the view to activate keyboard shortcuts for sketching mapview.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } }); </script> </head> <body> <div id="viewDiv"> <button id="drawBtn" style="line-height:20px;position: absolute;left:50px;top:5px;z-index: 10;" onclick="drawf()">draw</button> <button id="distanceButton" style="line-height:20px;position: absolute;left:100px;top:5px;z-index: 10;" >测距</button> <button id="areaButton" style="line-height:20px;position: absolute;left:150px;top:5px;z-index: 10;" >测面</button> </div> </body> </html>

arcgis for js 4.x 测量（测距，测面）

vip168

本文章向大家介绍arcgis for js 4.x 测量（测距，测面），主要包括arcgis for js 4.x 测量（测距，测面）使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
        <link rel="stylesheet" href="http://localhost:90/4.11/esri/css/main.css">
        <link rel="stylesheet" href="http://localhost:90/4.11/esri/themes/light/main.css" />
        <script src="http://localhost:90/4.11/init.js"></script>
        <script>
            var map;
            var mapview;
            var dra;
            require([
                "esri/Map", //地图、通用属性
                "esri/views/MapView

此内容登录或注册后可见