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

阿新 • • 發佈：2022-03-31

<!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="https://js.arcgis.com/4.11/"></script> -->
        <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 測量（測距，測面）

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" /> <style> html, body, #viewDiv {

arcgis for js 4.x 天地圖呼叫（4.9版本以上）

1.注意版本問題，呼叫不同 2.MyCustomTileLayer.js define([\'exports\', \"esri/layers/BaseTileLayer\",\"esri/request\"], function (

arcgis for js 4.x 線上簡單呼叫

基於原生js,jQuery的載入方式，前提需要了解線上官方api: https://developers.arcgis.com/javascript/latest/

arcgis for js 4.x (動態服務載入MapImageLayer)

arcgis for js 4.x FeatureLayer

1.renderer 常用 ClassBreaksRenderer HeatmapRenderer SimpleRenderer UniqueValueRenderer 2.載入熱力圖

arcgis for js 3.x 圖層載入（切片，動態載入）

適合arcgis for js 3.x 版本 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

arcgis for js 3.x如何在地圖上新增多個彈窗

定義全域性變數 var map var view var json = {} var mapData = [] 新增底圖 require([\"esri/map\", \"dojo/on\",

Arcgis for js api 4.22本地部署詳細指南

注意：Arcgis for js api 4.22本地部署，不用修改init.js和dojo.js中的[HOSTNAME_AND_PATH_TO_JSAPI]，直接釋出即可！

arcgis for js 如何用contains過濾資料

新增全部資料 // 構建map容器 var view = new MapView({ container: \'mapId\', map: map }); /********************

IIS本地部署Arcgis for js API

ArcGIS API for JavaScript開發的首要步驟就是引入ArcGIS想關的樣式檔案及開發包，對於此樣式檔案及開發包的引用有兩種形式：線上引用和離線載入。對於一般的示例程式編寫，我們只需簡單的引入線上的開發包即可，但是

arcgis for js 釋出shp資料地圖服務

1、使用arcgis for js 4.17 線上釋出shp地圖服務在webappbuilder 裡面進行程式碼的新增

vue+arcgis for js

安裝 arcgis 官方依賴 esri-loader,這個只是開發依賴,因此使用命令 npm i esri-loader --save-dev 來安裝.

arcgis for js 前端GP服務呼叫

1.先發布好GP服務,例子可參考：https://www.cnblogs.com/hjyjack9563-bk/p/16077788.html，釋出好服務後可以看到瀏覽器如下類似的GP服務

js 多媒體檔案（圖片，表格等）下載方法

專案中的圖片的下載方式 import { message } from \'antd\'; /** * 檔案下載 * @param apiPromisepromise 返回介面返回的檔案 Blog

Toad for Oracle 2020 安裝教程（附詳細圖文教程）

Toad for Oracle 2020相信經常使用這款軟體的使用者不陌生吧，這是oracle資料庫最佳的資料庫管理解決方案，是廣大程式設計師的最愛，但是因為是英文的，在安裝的過程中是很麻煩的，所以我自己總結了一下給大家帶來

iOS - for迴圈快捷建立按鈕（隨意配置適配）

One 先總結下最近做專案遇到的一個小問題，建立UIView時，總是有一邊會出現一條灰黑線，原因竟是在給view設定frame時的精確度問題，取整下即可；

js 日期減去日期（日期包含時分秒）

技術標籤：筆記 js 日期減去日期（日期包含時分秒） vardate1=newDate(\'2020-12-15 11:12:31\')

js之一維陣列（附HTML5程式碼例項）

技術標籤：html複習陣列物件的作用是：使用單獨的變數名來儲存一系列的值。建立陣列：例如：var arrayTest = [1,2,3,"???",4,5]; 使用concat()合併兩個陣列使用 join() 方法將陣列的所有元素組成一

CSP 201709-4 通訊網路（DFS，BFS）兩種解法

技術標籤：csp 201709-4 問題描述某國的軍隊由N個部門組成，為了提高安全性，部門之間建立了M條通路，每條通路只能單向傳遞資訊，即一條從部門a到部門b的通路只能由a向b傳遞資訊。資訊可以通過中轉的方式進行傳

Educational Codeforces Round 103 (Rated for Div. 2)部分題解（A,B,C,D）

技術標籤：找規律dp-動態規劃 oj: CodeForces 敘述採用倒敘 D. Journey（dp） oj: CodeForces

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

相關推薦