AirGIS相关API

最新推荐文章于 2025-11-12 05:16:48 发布

原创最新推荐文章于 2025-11-12 05:16:48 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#api #插件 #图形 #搜索

本文档详细介绍了AirGIS API的使用，包括地图基础如创建地图切片、比例尺、鹰眼图和HomeButton插件；绘图工具，如画点、线、面及其点击事件；以及图表绘制如柱状图和饼图。此外，还涵盖了自动补全和搜索功能。

1 地图基础

1.1 必要导入包

 
  
   var map;
  
  
       require([
  
  
           "esri/map",
  
  
           "esri/layers/ArcGISTiledMapServiceLayer",
  
  
           "esri/dijit/Scalebar",
  
  
           "esri/dijit/OverviewMap",
  
  
           "esri/toolbars/draw",
  
  
           "esri/symbols/SimpleMarkerSymbol",
  
  
           "esri/symbols/PictureMarkerSymbol",
  
  
           "esri/symbols/SimpleLineSymbol",
  
  
           "esri/symbols/PictureFillSymbol",
  
  
           "esri/symbols/CartographicLineSymbol",
  
  
           "esri/graphic",
  
  
           "esri/Color",
  
  
           "esri/dijit/InfoWindow",
  
  
           "esri/dijit/HomeButton",
  
  
           "dojo/dom",
  
  
           "dojo/on",
  
  
           "dojo/domReady!"
  
  
       ],
  
  
         function (Map, Tiled, Scalebar, OverviewMap, Draw,
  
  
           SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol,
  
  
           PictureFillSymbol, CartographicLineSymbol,
  
  
           Graphic, Color, InfoWindow, HomeButton,dom, on) {
  
  
    
  
  
             map = new Map("mapdiv", {
  
  
                 logo: false,
  
  
                 zoom: 13,
  
  
                 minZoom: 11,
  
  
                 maxZoom: 15,
  
  
             });

1.2 创建地图切片

 
  
   var tiled = new Tiled("./ArcGIS/rest/services/mapall/MapServer");//创建地图切片
  
  
   map.addLayer(tiled);//加载地图切片

1.3 地图插件

1.3.1 比例尺

 
  
   //比例尺
  
  
   var scalebar = new Scalebar({
  
  
   map: map, ]]
  
  
   attachTo: "bottom-left",//显示位置
  
  
   scalebarStyle: "line", //比例尺显示方式
  
  
   scalebarUnit: "metric" //单位
  
  
   });

1.3.2 鹰眼图

 
  
   // 鹰眼图
  
  
   var overviewMapDijit = new OverviewMap({
  
  
       map: map,
  
  
       attachTo: "bottom-left",   // 显示位置
  
  
       width: 150, // 默认值是地图高度的 1/4th
  
  
       height: 150, // 默认值是地图高度的 1/4th
  
  
       opacity: .40,    // 透明度 默认0.5
  
  
       visible: true,
  
  
       color: " #D84E13",
  
  
   });
  
  
   overviewMapDijit.startup();//启动鹰眼图

1.3.3 HomeButton

 
  
    //Home按钮
  
  
                 var home = new HomeButton({
  
  
                     theme: "HomeButton",
  
  
                     map: map,
  
  
                     extent: null,
  
  
                     visible: true
  
  
                 }, "HomeButton");  
  
  
               home.startup();

2 绘图工具

2.1 画点、线、面

 
  
   map.on("load", initToolbar);
  
  
   function initToolbar() {
  
  
   tb = new Draw(map);
  
  
   tb.on("draw-end", addGraphic);
  
  
   // 不需要为每一个按钮逐个添加单击事件
  
  
   on(dom.byId("info"), "click", function (evt) {
  
  
       if (evt.target.id === "info") {
  
  
           return;
  
  
           }
  
  
   var tool = evt.target.id.toLowerCase();
  
  
   map.disableMapNavigation();
  
  
   tb.activate(tool);
  
  
       });
  
  
   }
  
  
   function addGraphic(evt) {
  
  
   //关闭工具栏，清除现有的图形
  
  
   tb.deactivate();
  
  
   map.enableMapNavigation();
  
  
   // 判断哪个符号在使用
  
  
   var symbol;
  
  
   if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
  
  
       symbol = pictureMarkerSymbol;
  
  
                 } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
  
  
           symbol = lineSymbol;
  
  
                 }
  
  
                 else {
  
  
           symbol = fillSymbol;
  
  
                 }
  
  
   map.graphics.add(new Graphic(evt.geometry, symbol));//添加要素
  
  
   }

2.1.1 根据json标注点

 
  
     $("#check-c").click(function () {
  
  
           if ($("#check-c").is(':checked')) {
  
  
    
  
  
               var points = [
  
  
                   { "id": 1, "jd": 121.47713032471911, "wd": 29.75196106223709 },
  
  
                   { "id": 2, "jd": 121.53669682363298, "wd": 29.761917422286093 },
  
  
                   { "id": 3, "jd": 121.53824177605438, "wd": 29.727756807635203 },
  
  
                   { "id": 4, "jd": 121.48296681164439, "wd": 29.724151918651945 },
  
  
                   { "id": 5, "jd": 121.57583561830837, "wd": 29.763977358847956 },
  
  
                   { "id": 6, "jd": 121.44674626043164, "wd": 29.76243240642656 },
  
  
                   { "id": 7, "jd": 121.50837269590737, "wd": 29.76638061817013 },
  
  
                   { "id": 8, "jd": 121.57635060244884, "wd": 29.72861511453598 },
  
  
                   { "id": 9, "jd": 121.4994463041393, "wd": 29.744922945650725 },
  
  
                   { "id": 10,"jd": 121.51678410353497, "wd": 29.72209198209008 },
  
  
                   { "id": 11,"jd": 121.41327229130137, "wd": 29.741318056667463 },
  
  
                   { "id": 12,"jd": 121.46425572120754, "wd": 29.756080935360814 },
  
  
               ];
  
  
               $.each(points, function (id, item) {
  
  
                   var pt = new esri.geometry.Point(item.jd, item.wd);
  
  
                   var str = [1, 2, 3, 4];
  
  
                   var random = Math.floor(Math.random() * str.length);
  
  
                   var result = str[random];
  
  
                   var picPath;
  
  
                   if (result==1) {
  
  
                       picPath = "/Images/tuding.png";
  
  
                   }
  
  
                   if (result == 2) {
  
  
                       picPath = "/Images/tuding_2.png";
  
  
                   }
  
  
                   if (result == 3) {
  
  
                       picPath = "/Images/tuding_3.png";
  
  
                   }
  
  
                   if (result == 4) {
  
  
                       picPath = "/Images/tuding_4.png";
  
  
                   }
  
  
                   //设置标注显示的图标
  
  
                   var pictureMarkerSymbol = new esri.symbol.PictureMarkerSymbol(picPath, 50, 50);
  
  
                   var graphic = new esri.Graphic(pt, pictureMarkerSymbol);
  
  
                   var template = new esri.InfoTemplate();
  
  
                   template.setTitle("检测点");
  
  
                   template.setContent('<a href="###" style="font-size:200%" onclick="showbaseInfo()">三江口</a>');
  
  
                   graphic.setInfoTemplate(template);       
  
  
                   //把图像添加到刚才创建的图层上
  
  
                   graphicLayer.add(graphic);
  
  
               });
  
  
               } else {
  
  
               graphicLayer.clear();
  
  
           }
  
  
       });

2.1.2 画线

 
  
   //绘制多段线
  
  
   var lineSymbol = new CartographicLineSymbol(
  
  
   CartographicLineSymbol.STYLE_SOLID,
  
  
   new Color([255, 0, 0]), 2,
  
  
   CartographicLineSymbol.CAP_ROUND,
  
  
   CartographicLineSymbol.JOIN_MITER, 5
  
  
   );

2.1.2 画面

 
  
   // 绘制多边形
  
  
   // 包含填充图像
  
  
   var fillSymbol = new PictureFillSymbol(
  
  
       "/Images/mian.gif",
  
  
       new SimpleLineSymbol(
  
  
       SimpleLineSymbol.STYLE_SOLID,
  
  
       new Color("red"),
  
  
       1
  
  
       ),
  
  
       42,
  
  
       42
  
  
   );

2.2 图形事件

2.2.1 点击事件

 
  
   dojo.connect(map, "onClick", addPoint);
  
  
   function addPoint(evt) {
  
  
       map.infoWindow.setTitle("基本信息");
  
  
       map.infoWindow.setContent("经度/纬度 : " + evt.mapPoint.y + ", " + evt.mapPoint.x );
  
  
       map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
  
  
   }

3 图表

3.1柱状图

 
  
      function showEchar() {
  
  
           var myChart = echarts.init(document.getElementById('echar2'));
  
  
           // 指定图表的配置项和数据
  
  
           var option = {
  
  
               title: {
  
  
                   text: '检测项目'
  
  
               },
  
  
               tooltip: {},
  
  
               legend: {
  
  
                   data: ['环境激素', '鱼类微核', 'SOS']
  
  
               },
  
  
               xAxis: {
  
  
                   data: ["白溪水库",
  
  
                 "三江口",
  
  
                 "溪口",
  
  
                 "清林渡",
  
  
                 "游山",
  
  
                 "梁桥",
  
  
                 "大嵩",
  
  
                 "浮礁渡",
  
  
                 "水车",
  
  
                 "浦口闸",
  
  
                 "长汀",
  
  
                 "山门",
  
  
                 "马家桥",
  
  
                 "四灶浦闸"]
  
  
               },
  
  
               yAxis:[
  
  
                   {
  
  
                       type: 'value'
  
  
                   }
  
  
               ],
  
  
               series: [{
  
  
                   name: '环境激素',
  
  
                   type: 'bar',
  
  
                   data: [0.2, 3.0, 1.0, 2.5, 1]
  
  
               }, {
  
  
                   name: '鱼类微核',
  
  
                   type: 'bar',
  
  
                   data: [0.5, 2.5, 2.0, 1.5, 1.5]
  
  
               }, {
  
  
                   name: 'SOS',
  
  
                   type: 'bar',
  
  
                   data: [0.3, 1.0, 2.0, 0.5, 2.0]
  
  
               }]
  
  
           };
  
  
           // 使用刚指定的配置项和数据显示图表。
  
  
           myChart.setOption(option);
  
  
           $(".detail-box,.open-table-b").fadeIn();
  
  
       }

3.2饼图

 
  
     function showEchar2() {
  
  
           // 基于准备好的dom，初始化echarts实例
  
  
           var myChart = echarts.init(document.getElementById('echar2'));
  
  
           // 指定图表的配置项和数据
  
  
           var option = {
  
  
               title: {
  
  
                   text: '检测项目',
  
  
                   x: 'center'
  
  
               },
  
  
               tooltip: {
  
  
                   trigger: 'item',
  
  
                   formatter: "{a} <br/>{b} : {c} ({d}%)"
  
  
               },
  
  
               legend: {
  
  
                   orient: 'vertical',
  
  
                   left: 'left',
  
  
                   data: ['环境激素', '鱼类微核', 'SOS', '其它']
  
  
               },
  
  
               series: [
  
  
                   {
  
  
                       name: '检测项目',
  
  
                       type: 'pie',
  
  
                       radius: '55%',
  
  
                       center: ['50%', '60%'],
  
  
                       data: [
  
  
                           { value: 2.0, name: '环境激素' },
  
  
                           { value: 0.2, name: '鱼类微核' },
  
  
                           { value: 3.0, name: 'SOS' },
  
  
                           { value: 5.0, name: '其它' },
  
  
                       ],
  
  
                       itemStyle: {
  
  
                           emphasis: {
  
  
                               shadowBlur: 10,
  
  
                               shadowOffsetX: 0,
  
  
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
  
  
                           }
  
  
                       }
  
  
                   }
  
  
               ]
  
  
           };
  
  
           // 使用刚指定的配置项和数据显示图表。
  
  
           myChart.setOption(option);
  
  
           $(".detail-box,.open-table-b").fadeIn();
  
  
       }

4 其它

4.1 自动补全

 
  
     $("#tags").autocomplete(["白溪水库",
  
  
             "三江口",
  
  
             "溪口",
  
  
             "清林渡",
  
  
             "游山",
  
  
             "梁桥",
  
  
             "大嵩",
  
  
             "浮礁渡",
  
  
             "水车",
  
  
             "浦口闸",
  
  
             "长汀",
  
  
             "山门",
  
  
             "马家桥",
  
  
             "四灶浦闸"], {
  
  
                 max: 12,//列表条目数
  
  
                 width: 263,//提示的宽度
  
  
                 scrollHeight: 500,//提示的高度
  
  
                 matchContains: true,//是否只要包含文本框里的就可以
  
  
                 autoFill: false//自动填充
  
  
             });

4.2 搜索

 
  
    $("#search").click(function () {
  
  
           var seachText = $("#tags").val();
  
  
           if (seachText != "") {
  
  
               //构造显示页面
  
  
               //遍历解析json
  
  
               $.each(user, function (id, item) {
  
  
                   //如果包含则为li赋值
  
  
                   if (item.name.indexOf(seachText) != -1) {
  
  
                       tab = "<li class='cur-menu'><a onclick='addMarker(121.46425572120722, 29.756080935360814);' href='#'><em>></em>" + item.name + "</a></li>";
  
  
                   }
  
  
               })
  
  
               $("#one").html(tab);
  
  
           } else {
  
  
               var full = "";
  
  
               $.each(user, function (id, item) {
  
  
    
  
  
                   //遍历所有的数据
  
  
                   if (item.name == "三江口") {
  
  
                       full += "<li class='cur-menu' ><a onclick='addMarker(121.46425572120722, 29.756080935360814);' href='#'><em>></em>" + item.name + "</a></li>";
  
  
                   }
  
  
                   else {
  
  
                       full += "<li ><a onclick='addMarker(121.46425572120722, 29.756080935360814);' href='#'><em>></em>" + item.name + "</a></li>";
  
  
                   }
  
  
               })
  
  
               $("#one").html(full);
  
  
           }
  
  
       });