ArcGis4.1.5 for vue 使用总结

ArcGis官网教程API

https://developers.arcgis.com/labs/

1、安装 esri-loader

npm install --save esri-loader  
yarn add esri-loader

2、引入 esri-loader

import { loadModules } from 'esri-loader';

3、使用

    <template>
      <div>
      <!--地图挂载容器-->
       <div id="viewDiv" style="100%;height:600px"></div>
      </div>
    </template>

    import { loadModules } from 'esri-loader';
    export default {
      name:'Arcgis',
      data() {
        return {
        //引入顺序最好遵循官网，顺序错误可能会导致部分功能无法使用
          modules:["esri/Map",'esri/WebMap',"esri/widgets/Locate",
          "esri/widgets/Track","esri/layers/TileLayer",'esri/views/MapView',"esri/Graphic",
          "esri/layers/GraphicsLayer","esri/layers/FeatureLayer",
          "esri/PopupTemplate", "esri/widgets/Locate","esri/widgets/Track","esri/widgets/Sketch",
          ],
          view:"",
          gisConstructor:{},
          map:{}
         };
      },
      mounted(){
        loadModules(this.modules, { css: true }).then(this.loading)
      },
      methods: {
        loading(args){
          console.log(args)
           for (let k in args) {
              let name = this.modules[k].split('/').pop()
              name = name.replace(name[0], name[0].toUpperCase())
              this.gisConstructor[name] = args[k];
            }
            // 官方地图
            // this.map = new this.gisConstructor.Map({
            //   basemap: "streets",
            // });
            // 切片地图
             var mapTileLayer = new this.gisConstructor.TileLayer({
                  url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
              });
              this.map=new this.gisConstructor.Map({
                  layers:[mapTileLayer]
                });
              // 创建地图
            // this.map=new this.gisConstructor.WebMap({
          //         portalItem:{
          //             id:"00f90f3f3c9141e4bea329679b257142"
          //         }        
            //   });
               
              //  创建view视图
             this.view = new this.gisConstructor.MapView({
              container: "viewDiv",
              map: this.map,
              center: [-118, 34],
              zoom: 6
            });
          var graphicsLayer = new this.gisConstructor.GraphicsLayer();
             var sketch = new this.gisConstructor.Sketch({
              view: this.view,
              layer: graphicsLayer
            });
        //工具栏
          this.view.ui.add(sketch, "top-right");
    
          //sketch.on("create", function(event) {
          //  console.log(event,"event")
           // });
        //新版本地图点击事件，旧版本为map.on("click",this.clickHandler)
          this.view.on("click",function(e){
            
              var xy=[Math.round(e.mapPoint.longitude* 1000) / 1000,Math.round(e.mapPoint.latitude* 1000) / 1000]   //转换经纬度
             console.log(xy,"gg")
    
              let restbtn= document.getElementsByClassName("restxuandian")[0]
               console.log(restbtn)
              // restbtn.style.cursor="pointer"
           
          })
            this.getdata()
          },
          
          getdata(){
            // 假设xyarr为后台接口返回的数据
            let xyarr=[{x:"-118",y:"34",name:"aaa",mag:"-118/34",id:"1"},
                      {x:"-118.806",y:"34",name:"bbb",mag:"-118.806/34",id:"2"},
                      {x:"-118.906",y:"36",name:"ccc",mag:"-118.806/40",id:"3"},
                      ]
          
          xyarr.forEach(item=>{
            // 标记点的位置
             var point ={
              type: "point",
              longitude: item.x,
              latitude: item.y
            };
           
            // 设置点的样式
           var simpleMarkerSymbol = {
             type: "simple-marker",
             color: [226, 119, 40],  // orange
             outline: { //外边框
               color: [255, 255, 255], // white
                1
             }
           };
          //  设置弹出框模板
            var popupTemplate = new this.gisConstructor.PopupTemplate({
              "title": item.name,
              "content": "我说这是线，你有意见吗？<br/>这不应该是点吗？<br/>嗯！！！啪！你再说一遍<br/><span>"+item.mag +"</span> <span class='restxuandian' value='"+item.id+"' style='display:block;background:#409EFF;margin:10px 10px 0 0;padding:6px;border-radius:3px;80px;color:#fff;cursor:pointer;'>重新选点</span>"
            })
            // 
           var pointGraphic = new this.gisConstructor.Graphic({
             geometry: point,
             symbol: simpleMarkerSymbol,
             popupTemplate:popupTemplate
             
           });
          //  设置线
          var polyline = {
             type: "polyline",
             paths: [
               [-113, 34],
               [-114, 33],
               [-112, 35]
             ]
           }
            var popupTemplateline = new this.gisConstructor.PopupTemplate({
              "title": "这是点",
              "content": "对对,你说的都对,你说是啥就是啥"
            })
            var simpleLineSymbol = {
             type: "simple-line",
             color: [226, 119, 40], // orange
              2
           };
    
           var polylineGraphic = new this.gisConstructor.Graphic({
             geometry: polyline,
             symbol: simpleLineSymbol,
             popupTemplate:popupTemplateline,
           })
    
    
          //  多边形
           var polygon = {
             type: "polygon",
             rings: [
               [-118, 36],
               [-117, 34],
               [-116, 35],
               [-115, 35],
               [-114, 35]
             ]
           };
             var popupTemplatefill = new this.gisConstructor.PopupTemplate({
              "title": "我说这是多边形,你没意见吧",
              "content": "滚犊子,你再说一遍是啥,别逼我干你...... <br/>额... <br/> 你再说一遍你想干什么 <br/> 嘿嘿嘿，没事，我是说你是最棒的 ，，。，"
            })
           var simpleFillSymbol = {
             type: "simple-fill",
             color: [227, 139, 79, 0.2],  // orange, opacity 80%
             outline: {
               color: [255, 0, 0],
                1
             }
           };
    
           var polygonGraphic = new this.gisConstructor.Graphic({
             geometry: polygon,
             symbol: simpleFillSymbol,
             popupTemplate:popupTemplatefill
           });
           
             var graphicsLayer = new this.gisConstructor.GraphicsLayer();
             this.map.add(graphicsLayer);
            graphicsLayer.add(pointGraphic)
            graphicsLayer.add(polylineGraphic);
            graphicsLayer.add(polygonGraphic);
          })
        }
      }
    }
  

未完待续。。。