arcgis 撒點應用

前不久公司要求用arcgis作個東西/可是歷來沒有接觸過，如今分享一點基本應用

import esriLoader from 'esri-loader';
import { getSensorDetail } from "../api/api";
import getporint from './icon';
// let Graphic;
// let SpatialReference = {};
let m_view;
let m_map;
let resultsLayer;
let image = "";


export default {
  name: 'ArcgisMap',
  data() {
    return {
      pointall: [],
      Graphic: null,
      markerLayer: null,
      spatial:null,
      markerLayerRemove:null
    }
  },
  computed: {
    getStoreItem() {
      return this.$store.state.pointall
    }
  },
  watch: {
    getStoreItem() {
       getporint.map((val,index)=>{
        if(val.id == this.$store.state.menuid) {
            image = val.icon;
        }
        else {
          // image = getporint[1].icon;
        }
       })
       this.getPoint(this.$store.state.pointall);
      // markerLayer.removeAll();
    }
  },
  mounted() {
    this.pointall = this.$store.state.pointall;
    if (this.$refs.viewDiv) {
      this.getINmap();
    }
  },
  methods: {
    getMoveto(x,y) {
      m_view.goTo(
        {
          position: {
            x: x,
            y: y,
            z: 1000,
            spatialReference: {
              wkid: 2431
            }
          },
          heading: 60,
          tilt: 20
        },
        {
          duration: 2000,
          easing: "in-expo"
        }
      );
    },
    getINmap() {
      const options = {
        css: true
      };

      esriLoader.loadCss('css');

      esriLoader.loadScript({ url: 'js' });
      // 加載css

      esriLoader.loadModules([
        "esri/Map",
        "esri/geometry/SpatialReference",
        "esri/Graphic",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/layers/SceneLayer",
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "dojo/domReady!"
      ], options
      ).then(
        ([
          Map,
          SpatialReference,
          Graphic,
          SceneView,
          GraphicsLayer,
          SceneLayer,
          Extent,
          FeatureLayer
        ]) => {

          m_map = new Map();
          m_view = new SceneView({
            map: m_map,
            container: "viewDiv",
            spatialReference: new SpatialReference(2431)
          });

邊界

let fullExtent = new Extent({
            xmin: -96962.5918230044,
            ymin: -40932.632712582854,
            xmax: 12223.23071530734,
            ymax: 17535.109222901025,
            spatialReference:  new SpatialReference(2431)
          });


          let m_sceneLayer = new SceneLayer({ url: "http://gisswweb.hkq.gov.hk/server/rest/services/Hosted/HKBuildingColorPlus/SceneServer",fullExtent });
          let featureLayer = new FeatureLayer({
               url:"http://gisswweb.hkq.gov.hk/server/rest/services/Hosted/HKScene3D_WFL1/FeatureServer/"
          });
          m_map.add(m_sceneLayer);
          console.log("zhixinle")
          m_map.add(featureLayer);
          let _this = this;

點擊撒點圖標

// 點擊事件
          m_view.on("click", function(event) {
            m_view.hitTest(event).then(function(response) {
              console.log(response.results[0].graphic.attributes.val.id)
              getSensorDetail({
                 id:response.results[0].graphic.attributes.val.id
              }).then(res => {
                if (res.Data.length > 0 ) {
                  let resultObj = res.Data[0];
                  //  if(pointObj[0].id){
                  //       this.$parent.isShowPercent=false;
                  //       this.$parent.isShowWeek=false;
                  //   }
                  // console.log(_this.$store)

                 _this.$store.commit("changePoiDetail", resultObj);
                 _this.$store.commit("getShowPersonData", true);
                 _this.$store.commit("getCloseprocessDetails", false);
                  
                } else {
                  _this.$store.commit("changePoiDetail", "");
                }


              });
            })
            
          });
  
          // 動態縮放
          this.getMoveto(3440.81404942000,2429.05288139000);

          // 保存成全局對象 方便引用
          this.Graphic = function (params) {
            return new Graphic(params);
          }
          // this.GraphicremoveAll = function() {
          //   // m_view.graphics.removeAll();

          // }

          this.spatial = function(){
            return new SpatialReference(2431);
          }
          this.markerLayer = function(params) {
              // new GraphicsLayer().removeAll();
                resultsLayer = new GraphicsLayer();
              //  resultsLayer.removeAll();
               
               return resultsLayer.addMany(params);
          }
          this.markerLayerRemove = function() {
              console.log("執行成功")
              m_view.graphics.removeAll();

          }
          this.getPoint([]);

        })
        .catch(error => {
          console.error("esriLoader.loadModules--->", error)
        })
    },

撒點

getPoint(data) {
      if(resultsLayer) {
          resultsLayer.removeAll();
      }
      let markerGraphicsArr = [];
       data.map((val, index) => {
         console.log(val)
          let markerGraphic = this.Graphic({
            geometry: {
              spatialReference: this.spatial(),
              type: "point",
              longitude: val.cjLat,
              latitude: val.cjLng,
              z: 20
            },
            symbol: {
              type: "picture-marker",
              url: image,
              width: "35px",
              height: "35px"
            },
            attributes: {
            // 傳遞的參數
              val
            }
           })

        markerGraphicsArr.push(markerGraphic);
      })
      this.getMoveto(data[0].cjLat,data[0].cjLng)

      m_map.add(this.markerLayer(markerGraphicsArr));
    

    }
  },



}