VueCLI使用ArcGIS API for JavaScript（六）

最新推荐文章于 2024-07-13 20:48:04 发布

早安丶

最新推荐文章于 2024-07-13 20:48:04 发布

阅读量226

点赞数

分类专栏： vue + arcgis 文章标签： arcgis vue js

本文链接：https://blog.csdn.net/xnMorning/article/details/108013037

版权

vue + arcgis 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

Arcgis地图绘画并且查询

既然是地图操作，那么绘画是不可少的，今天写了这个功能，分享一下
直接上代码

esri.loadModules([
  "esri/toolbars/draw",
  "dojo/domReady!"
]).then(([
  Draw,
]) => {
   //开启绘制
   this.drawToolBar = new Draw(this.map);
   //选择需要画的类型
   this.drawToolBar.activate(this.drawType.toLowerCase());
   //类型选择结束调用绘画结束方法
   this.drawEnd()

})

绘画类型需要注意，必须要小写的

this.drawToolBar.activate('POINT'.toLowerCase());

下图是类型截图
在这里插入图片描述
调用绘画方法

esri.loadModules([
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/graphic",
  "esri/Color",
  "dojo/on",
  "dojo/domReady!"
]).then(([
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  SimpleFillSymbol,
  Graphic,
  Color,
  on
]) => {
  //绘制结束
  this.drawToolBar.on("draw-end", (evt) => {

    let symbol;
    if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
        symbol = new SimpleMarkerSymbol();
    } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
        symbol = new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([255, 0, 0, 1]), 2);
    }else {
        symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
          new Color([255, 0, 0, 1]), 1),
          new Color([125, 125, 125, 0.8]));
    }
    let graph = new Graphic(evt.geometry,symbol)
    this.map.graphics.add(graph);
    
    this.drawQuery(graph)
  })
})

绘制完成后，进行查询

 drawQuery(graph) {
   esri.loadModules([
     "esri/tasks/QueryTask",
     "esri/tasks/query",
     'dojo/domReady!'
   ]).then(([
     QueryTask,
     Query,
   ]) => {
     let query = new Query();

     let queryTask = new QueryTask(`${mapUrl.url6}/0`);

     query.returnGeometry = true; //需要返回Geometry
     query.outFields = ["*"]; //需要返回的字段
     query.geometry = graph.geometry;

     queryTask.execute(query, res => {
       this.drawDataAry = res.features;
     })
   })
 }