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));
    

    }
  },



}