vue2中使用 arcgis for js 的个人总结基础知识 ( 一 )

因为项目需要使用vue2开发gis地图信息，在查阅众多资料后做一个记录方便自己后续查看

使用的是arcgis 4.21版本，离线部署

离线部署的具体方式可以去搜索其他文章，这里不再具体展开

初始代码如下：

      let option = {
        url: "http://20.221.21.214:8080/arcgisDemo/argis_js_4.21/init.js", // 注释掉就是使用官网的CDN，但是更建议使用离线部署的地址
        css: "http://20.221.21.214:8080/arcgisDemo/argis_js_4.21/esri/css/main.css",
      };

      loadModules(
        [
          "esri/Map",
          "esri/layers/TileLayer",
          "esri/views/MapView",
          "esri/config",
        ],
        option
      ).then(
        ([Map, TileLayer, MapView, Config]) => {
          Config.fontsUrl = "http://20.221.21.214:8080/arcgisFont/"; // 离线字体文件
          this.layer = new TileLayer({
            url: "http://20.211.11.26:6080/cdznjtgis/arcgis/rest/services/ditu/2D-4326-white-baseMap/MapServer",
          });

          this.map = new Map({
            layers: [this.layer],
            // basemap: "osm",
          });
          this.view = new MapView({
            container: this.$refs.baseMap, // 视图的容器
            map: this.map, // Map的实例放入视图中
            center: [this.addform.longitude, this.addform.latitude], // 初始显示的地图中心点，经纬度
            zoom: 12, // 当前地图缩放等级
            logo: false,
          });

          // 给 “地图视图” 绑定点击事件
          this.view.on("click", (e) => {
            // hitTest 方法在点击位置上如果存在 Graphic（线或点），即可获取 Graphic 对象的整个数据
            this.view.hitTest(e).then((res) => {
              
            });
          });
        }
      );

以上代码可以实现基本的地图展示，如果需要添加点标记的话代码如下：

      let option = {
        url: "http://20.221.21.214:8080/arcgisDemo/argis_js_4.21/init.js", // 注释掉就是使用官网的CDN，但是更建议使用离线部署的地址
        css: "http://20.221.21.214:8080/arcgisDemo/argis_js_4.21/esri/css/main.css",
      };

      loadModules(
        [
          "esri/Map",
          "esri/layers/TileLayer",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/config",
        ],
        option
      ).then(
        ([Map, TileLayer, MapView, Graphic, Config]) => {
          Config.fontsUrl = "http://20.221.21.214:8080/arcgisFont/";
          this.layer = new TileLayer({
            url: "http://20.211.11.26:6080/cdznjtgis/arcgis/rest/services/ditu/2D-4326-white-baseMap/MapServer",
          });

          this.map = new Map({
            layers: [this.layer],
            // basemap: "osm",
          });
          this.view = new MapView({
            container: this.$refs.baseMap, // 视图的容器
            map: this.map, // Map的实例放入视图中
            center: [this.addform.longitude, this.addform.latitude], // 初始显示的地图中心点，经纬度
            zoom: 12, // 当前地图缩放等级
            logo: false,
          });

          let point = {
            type: "point", // autocasts as /Point
            x: this.addform.longitude,
            y: this.addform.latitude,
            spatialReference: this.view.spatialReference,
          };

          let graphic = new Graphic({
            geometry: point,
            symbol: {
              type: "picture-marker", // autocasts as SimpleMarkerSymbol
              url: require("@/assets/images/monitor.jpg"),
              // 图片的大小
              width: "25px",
              height: "25px",
            },
          });

          this.view.graphics.add(graphic);

          // 给 “地图视图” 绑定点击事件
          this.view.on("click", (e) => {
            // hitTest 方法在点击位置上如果存在 Graphic（线或点），即可获取 Graphic 对象的整个数据
            this.view.hitTest(e).then((res) => {
              
            });
          });
        }
      );