vue+arcgis api for javascript初始項目

先安裝好node.js，vue環境了，下面開始

1。確定一個項目目錄，如e:\aaaa

2、cmd中轉到目錄，vue create arcgis-test1

就選擇第一個 vue cli v4.5.11

 3。安裝好之后，轉到目錄e:\aaaa\arcgis-test1

npm install --save esri-loader

4、然后就用vscode 右鍵打開項目了，開始編碼

把components 目錄下初始來的helloworld.vue 刪除，添加一個map001.vue 

導包

 

 

<template>
  <div id="viewDiv" style="width:100%;height:600px"></div>
</template>

<script>
//import {loadCss, loadModules} from 'esri-loader'
import { loadModules } from 'esri-loader';

export default {
  name:'Map001',
  data() {
    return {
      msg: 'hello vue',
      
    //引入順序最好遵循官網，順序錯誤可能會導致部分功能無法使用
      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
            width: 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;width: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
          width: 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],
            width: 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);
      })
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

5、在app.vue 中引入 map001.vue

<template>
  <div id="app">
    {{msg}}
    <br>
    <v-map001/>
  </div>
</template>

<script>
import Map001 from './components/map001.vue'//導入組件

export default {
  name:'App',
  components: {
    'v-map001': Map001
  },
  data() {
    return {
      msg: 'hello vue app'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

項目結構是這樣：

 

 運行之后是這樣：