ArcGisforJavascript 4.11基础功能实现

最新推荐文章于 2022-03-02 16:57:48 发布
最新推荐文章于 2022-03-02 16:57:48 发布
阅读量868 收藏 6
点赞数 2
分类专栏： gis 文章标签： ArcGisforJavascript QueryTask查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35302923/article/details/90446239
版权

新手照的官方示例和API，实现了简单的查询和各种ArcGisforJavascript自带控件的放置

<!DOCTYPE html>
<html lang="en">
<head>
     <meta 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/4.11/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.11/"></script> -->
    <!-- 本地js -->
    <link  rel="stylesheet"
      href="http://localhost/arcgis_js_v411_sdk/arcgis_js_api/library/4.11/esri/css/main.css"/>
    <script src="http://localhost/arcgis_js_v411_sdk/arcgis_js_api/library/4.11/init.js"></script>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #optionsDiv {
        background-color: dimgray;
        color: white;
        padding: 10px;
        width: 350px;
      }

      .esri-popup .esri-popup-header .esri-title {
        font-size: 18px;
        font-weight: bolder;
      }

      .esri-popup .esri-popup-body .esri-popup-content {
        font-size: 14px;
      }
      .esri-basemap-toggle{
            margin-right: -40px
      }
      .esri-compass{
            margin-right: -80px;
            margin-bottom: 80px;
      }
      .esri-zoom{
            margin-bottom: 125px;
      }
       #topbar {
        background: #fff;
        padding: 10px;

      }

      .action-button {
        font-size: 16px;
        background-color: transparent;
        border: 1px solid #d3d3d3;
        color: #6e6e6e;
        height: 32px;
        width: 32px;
        text-align: center;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
      }

      .action-button:hover,
      .action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
      }

      .active {
        background: #0079c1;
        color: #e4e4e4;
      }
      .esri-ui-top-left{
        top:20px;
        left:30px;
      }
    </style>
  <script>  
    require(["esri/Map",
    'esri/views/MapView',
    'esri/layers/WebTileLayer',
    'esri/layers/support/TileInfo',
    'esri/layers/FeatureLayer',
    "esri/widgets/Expand",
    "esri/widgets/BasemapToggle",
    "esri/geometry/SpatialReference",
    "esri/widgets/Search",
    "esri/widgets/Sketch",
     "esri/layers/GraphicsLayer",
     "esri/widgets/Compass",
    "esri/widgets/DistanceMeasurement2D",
      "esri/widgets/AreaMeasurement2D",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
    'dojo/domReady!'], function(Map, MapView, WebTileLayer, TileInfo,FeatureLayer,Expand
      ,BasemapToggle,SpatialReference,Search,Sketch,GraphicsLayer,Compass,DistanceMeasurement2D
      ,AreaMeasurement2D,QueryTask,Query) { /* code goes here */ 
     var tileInfo = new TileInfo({
        dpi: 90.71428571427429,
        rows : 850,
        cols : 172,
             maxAllowableOffset:0,
        compressionQuality : 6,
        origin : {
          x : -180,
          y : 90
        },
        spatialReference : {
          wkid : 4326
        },
        lods : [
          {level : 2,levelValue: 2, resolution : 0.3515625, scale : 147748796.52937502},
          {level : 3,levelValue: 3, resolution : 0.17578125, scale : 73874398.264687508},
          {level : 4,levelValue: 4,resolution : 0.087890625, scale : 36937199.132343754},
          {level : 5,levelValue: 5, resolution : 0.0439453125, scale : 18468599.566171877},
          {level : 6,levelValue: 6, resolution : 0.02197265625, scale : 9234299.7830859385},
          {level : 7,levelValue: 7, resolution : 0.010986328125, scale : 4617149.8915429693},
          {level : 8,levelValue: 8, resolution : 0.0054931640625, scale : 2308574.9457714846},
          {level : 9,levelValue: 9, resolution : 0.00274658203125, scale : 1154287.4728857423},
          {level : 10,levelValue: 10, resolution : 0.001373291015625, scale : 577143.73644287116},
          {level : 11,levelValue: 11, resolution : 0.0006866455078125, scale : 288571.86822143558},
          {level : 12,levelValue: 12, resolution : 0.00034332275390625, scale : 144285.93411071779},
          {level : 13,levelValue: 13, resolution : 0.000171661376953125, scale : 72142.967055358895},
          {level : 14,levelValue: 14, resolution : 8.58306884765625e-005, scale : 36071.483527679447},
          {level : 15,levelValue: 15, resolution : 4.291534423828125e-005, scale : 18035.741763839724},
          {level : 16,levelValue: 16, resolution : 2.1457672119140625e-005, scale : 9017.8708819198619},
          {level : 17,levelValue: 17, resolution : 1.0728836059570313e-005, scale : 4508.9354409599309},
          {level : 18,levelValue: 18, resolution : 5.3644180297851563e-006, scale : 2254.4677204799655},
          { level: 19,levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
          { level: 20,levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
        ]
      })
     // 天地图开发者key
      var tk = "53e7ce68eef9b582752cada22e254cc9";
      // 基础地图
      var layer = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk='+tk,{
        // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
        subDomains: ['t0'],
        tileInfo: tileInfo
      })
      var layer_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk='+tk,{
        //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
        subDomains: ['t0'],
        tileInfo: tileInfo
      })
// 影像图
      var layerw = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}&tk='+tk,{
        // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
        subDomains: ['t0'],
        tileInfo: tileInfo
      })
      var layerw_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk='+tk,{
        //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
        subDomains: ['t0'],
        tileInfo: tileInfo
      })
      const hlayer = new GraphicsLayer();
         var resultsLayer = new GraphicsLayer();
      // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
      var map = new Map({
        logo:false,
        spatialReference : {
          wkid : 4326
        },
        basemap: {
           thumbnailUrl: "img/ditu.png",
                   title: "基础地形",
          baseLayers: [layer, layer_anno]

        },
        layers: [hlayer,resultsLayer]
      });
      // 创建MapView
      var view = new MapView({
        container: "viewDiv",
        spatialReference : {
          wkid :  4326
        },
        map: map,
        center: [120.243,30.256],
        //1:scale的图 level
        scale: 288571.86822143558 ,
          popup: {
            dockEnabled: true,
            dockOptions: {
              position: "top-right",
              breakpoint: false
            }
          }
      });
      view.ui.move("zoom", "bottom-right");
      // 影像和基础地图切换
     var toggle = new BasemapToggle({
          view: view, 
          nextBasemap:{
             thumbnailUrl: "img/wditu.png",
                   title: "影像地形",
          baseLayers: [layerw, layerw_anno]
        },
         layers: [hlayer]
        });
        view.ui.add(toggle, "bottom-right");

        // 绘制图形控件
        const sketch = new Sketch({
          layer: hlayer,
          view: view
        });
        view.ui.add(sketch, "top-right");
       //数据属性模版
        var popupTemplate = {
            title: " {DKID},{ZhenName} ,{CunName}",
            overwriteActions: true,
            content: [{
                type: "fields",
                fieldInfos: [{
                    fieldName: "DKID",
                    label: "地块名称",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "ZhenName",
                    label: "镇名",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "CunName",
                    label: "村名",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                }, {
                    fieldName: "name",
                    label: "所属人",
                    format: {
                        places: 0,
                        digitSeparator: true
                    }
                },{
                    fieldName: "DKMJ",
                    label: "地块面积",
                    format: {
                        places: 6,
                        digitSeparator: true
                    }
                },{
                    fieldName: "CBMJ",
                    label: "承包面积",
                    format: {
                      // 小数位数
                        places: 6,
                        digitSeparator: true
                    }
                }]
            }]
        };
        //地块 图层
            var featureLayer = new FeatureLayer({
          url:
            "http://localhost:6080/arcgis/rest/services/MapService/FeatureServer/0",
             outFields: ["*"],
            popupTemplate: popupTemplate
        }); 
             map.add(featureLayer); 

        var compassWidget = new Compass({
          view: view
        });

        // Add the Compass widget to the top left corner of the view
        view.ui.add(compassWidget, "bottom-right");
            var activeWidget = null;
        // add the toolbar for the measurement widgets
        view.ui.add("topbar", "bottom-left");

        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: view
              });

              // skip the initial 'new measurement' button
              activeWidget.viewModel.newMeasurement();

              view.ui.add(activeWidget, "top-right");
              setActiveButton(document.getElementById("distanceButton"));
              break;
            case "area":
              activeWidget = new AreaMeasurement2D({
                view: view
              });

              // skip the initial 'new measurement' button
              activeWidget.viewModel.newMeasurement();

              view.ui.add(activeWidget, "top-right");
              setActiveButton(document.getElementById("areaButton"));
              break;
            case null:
              if (activeWidget) {
                view.ui.remove(activeWidget);
                activeWidget.destroy();
                activeWidget = null;
              }
              break;
          }
        }

        function setActiveButton(selectedButton) {
          view.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");
          }
        }

        // 监听搜索按钮
            document
          .getElementById("searchdiv")
          .addEventListener("click", function searchAll(){
            // 将地块图层隐藏
            featureLayer.visible = false;
            // 清除上次查询
              resultsLayer.removeAll();
        var searchUrl =  "http://localhost:6080/arcgis/rest/services/MapService/FeatureServer/0";
        var txt = document.getElementById("searchtext").value;
        var queryTask = new QueryTask({
            url:searchUrl
        });
        // 查询条件
        var query = new Query();
        query.returnGeometry=true;
        query.outFields=["*"];
        query.outSpatialReference =  {
          wkid :  4326
        };
        if(txt!=null&&txt!=''&&txt!=""){
             query.where =" CunName Like '%"+txt+"%' or ZhenName Like '%"+txt+"%' ";
        }else{
            query.where =" 1=1 ";
        }
       // 执行query语句，完成后执行then中的方法
        queryTask.execute(query)
                 .then(getResults);

    });  
          // 监听清除按钮，如果不清除会导致一直显示
           document
          .getElementById("qcdiv")
          .addEventListener("click", function qcAll(){
            // 清空搜索框中的值
            document.getElementById("searchtext").value="";
            // 显示地块图层
            featureLayer.visible = true;
            // 清除搜索图层
              resultsLayer.removeAll();

    }); 
          // 展示数据方法
        function getResults(response) {
          var peakResults = response.features.map(function(feature) {
            // 地块的样式
            feature.symbol = {
          type: "simple-fill",
          // 填充颜色
          color: [51, 204, 51, 0.3],  
          style: "solid",
          // 边框线
          outline: { 
            color:  [1, 4, 1, 0.3],
            width: 1
          }
        };
        // 数据展示格式
            feature.popupTemplate = popupTemplate;
            return feature;
          });
          resultsLayer.addMany(peakResults);

          // 将结果添加到地图后动画化
          view.goTo(peakResults).then(function() {
            view.popup.open({
              features: peakResults,
              featureMenuOpen: true,
              updateLocationEnabled: true
            });
          });
          
        }

});
   
  </script>
</head>
<body>
    <div id="viewDiv">
    </div>
       <div id="topbar">
      <button
        class="action-button esri-icon-minus"
        id="distanceButton"
        type="button"
        title="测量两个点或多个点的距离"
      ></button>
      <button
        class="action-button esri-icon-polygon"
        id="areaButton"
        type="button"
        title="测量面积"
      ></button>
    </div>
     <div class="esri-ui-top-left esri-ui-corner">
        <div class="esri-component esri-search esri-widget" style="width: 400px;">
            <div  class="esri-search--multiple-sources esri-search__container">
                <div class="esri-search__input-container">
                    <form class="esri-search__form" >
                        <input type="text" placeholder="示例:镇名或村名"  tabindex="0" 
                        class="esri-input esri-search__input"  title="查询" id="searchtext" value="">
                    </form>
                </div>
                 <div role="button" title="清除" class="esri-search__submit-button esri-widget--button" tabindex="0" id="qcdiv" >
                    <span  class=""><img src="img/qc.png"></span>
                </div>
                <div role="button" title="搜索" class="esri-search__submit-button esri-widget--button" tabindex="0" id="searchdiv" >
                    <span  class="esri-icon-search"></span>
                    <span class="esri-icon-font-fallback-text">搜索</span>
                </div>
               
            </div>
        </div>
    </div>
</body>
</html>

上面的地址改成自己的服务地址，我自己也踩过坑，如果有问题，可以问我

JanetLiu1102
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
ArcGIS API for JavaScript 4.11 官方帮助文档 与示例 离线版
04-03
这不是API！这是示例和类帮助，离线版的，不是用于离线部署的，谢谢！
arcgis api for javascript v4.18 v3.35
12-22
arcgis api for javascript v4.18 v3.35, 包含了3.35和4.18两个版本的 api，欢迎大家下载
arcgis api for js v4.11
04-10
arcgis api for js v4.11，压缩包包括 4.11版本的 api 和 sdk
arcgis api for javascript (1) 基本的地图显示及spatialReference
weixin_30593443的博客
12-18 883
折腾arcgis api for javascript有两个星期了，也算是过关斩将，有所收获，在此记录下心得。 准备工作 官方网站https://developers.arcgis.com/javascript/ jsapi包可以下载下来也可以使用在线的 <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/cs...
arcgis for js 基本操作功能，测量，标会，标注等功能
u010878640的博客
02-22 1190
想要源码的，联系我，或者在csdn中下载，地址：https://download.csdn.net/download/u010878640/10970984 &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"...
JB-HMI画面组态软件V4.11新增功能
03-20
介绍了关于JB-HMI画面组态软件V4.11新增功能的详细说明，提供其它产品的技术资料的下载。
arcgis api 4.11
06-13
arcgis api 3.11 适用各位下载，做arcgis前台开发可能会用的到
MongooseJS v4.11.11
11-28
Mongoose 是基于nodejs，使用ja<x>vasc<x>ript编程，连接mongodb数据库的软件包，使mongodb的文档数据模型变的优雅起来，方便对mongodb文档型数据库的连接和增删改查等常规数据操作。 mongoose是当
junit-4.11.jar
09-09
junit-4.11.jar 下载成功后解压，jar包在文件夹里。 官方下载，放心使用
ArcGIS API For JavaScript - 断面分析（相交线路，定位、缓冲）
技术共享，共同进步！
06-17 1108
断面相交线路，将相交的线路放入select中，选择线路进行定位、缓冲展示 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Draw</title> @*加载高德地图*@ <script type="text/java
一、Arcgis api js -- 基本概念
wo的博客
03-02 227
1、View 与 Mapview 1、View Class: esri/views/View Subclasses(子类): MapView , SceneView View提供了查看Map组件并与之交互的方法。 Map仅仅是一个容器，用于【存储】基础图层和操作图层中包含的地理信息。 视图将渲染Map及其各个图层layer，从而使用户可见。 2、Mapview 以2D的方式渲染Map及其layer； View是其基类，View没有构造函数； 所以要创建视图，必须通过直接创建MapView或SceneView
ArcGIS JavaScript API 实现基本的地图功能
weixin_34358092的博客
11-11 436
代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 &lt...
arcgis for js api-入门系列
LEILEI18A的博客
12-10 1626
0. 前提 【1】前端(heml+css+js)的基本语法，css的布局+js异步很重要 css：选择器； js：await-async Promise异步 【2】Arcgis for js api官网，arcgis-js官网tutorial教程 【3】推荐从4.18版本开始，以及开发使用esri-loader 1. 解决思路 (1) 先学前端基础，(2)再根据arcgis js api官网文档及其样例代码，进行学...
arcgis_js_api_4.11 TileLayer跨域问题.txt
weixin_42193179的博客
04-26 2875
一、 场景： Access to image at 'http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/tile/11/74344/433106?blankTile=false' from origin 'http://localhost:63342' has been blocked by CORS policy...
Arcgis for javascript map操作addLayer详解
weixin_30256901的博客
10-17 676
本节的内容很简单，说说Arcgis for Javascript里面map对象的addLayer方法。在for JS的API中，addLayer方法有两种，如下图： addLayer方法 在addLayer方法里面有两个参数，一个是必选参数layer，另一个是可选参数index，layer就不说了，可以是支持的任何一种layer，重点说说index。index参数用来控制地图显...
ArcGIS api for javascript 的入门学习
七月❤的博客
01-04 2702
1、安装依赖 npm install @arcgis/core 2、按需引入（根据需要引入） import Map from "@arcgis/core/Map"; import MapView from '@arcgis/core/views/MapView'; import Basemap from '@arcgis/core/Basemap'; import Extent from '@arcgis/core/geometry/Extent'; import Circle from '@ar
2019年ArcGIS JavaScript API 4.x添加天地图影像地图（经纬度）
roc168的专栏
10-12 1145
直接上源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title&gt...
ArcGIS API添加地图基本操作功能(平移，放大，缩小，前一视图，后一视图，全图，工具失联)的代码
挣钱花388的博客
11-15 995
QQ交流群：607330463 GIS开发技术最强交流群 未经允许 禁止转载 可以参考 1 代码测试效果 2 代码介绍 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maxi...
arcgis api for javascript 学习（四） 地图的基本操作
weixin_30629653的博客
07-26 661
1、文章讲解的为地图的平移、放大、缩小、前视图、后视图以及全景视图的基本功能操作 2、主要用到的是arcgis api for javascript中Navigation的用法，代码如下： <!DOCTYPE HTML> <html> <head> <title>显示地图的基本操作</title> ...
qt create 4.11 版本下tableview 表头每列实现筛选功能
最新发布
05-23
你可以使用QSortFilterProxyModel类来实现表头每列的筛选功能。这个类是一个过滤和排序代理模型，它可以对源模型进行过滤和排序，并将结果提供给视图。 以下是一个简单的示例代码，演示如何使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值