arcgis api 展示地图标注 点图层

效果

方法

      //创建地图
      _createMapView: function () {
        const _self = this;   //定义一个_self防止后续操作中this丢失
        const option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
          url: 'http://js.arcgis.com/4.15/dojo/dojo.js',
          css: 'https://js.arcgis.com/4.15/esri/themes/dark-blue/main.css'
        };

        //通过loadModules来做衔接
        loadModules(['esri/Map',
          'esri/Basemap',
          'esri/layers/TileLayer',
          "esri/views/MapView",
          "esri/Graphic"], option)
          .then(([Map, Basemap, TileLayer, MapView, Graphic]) => {
            const layer = new TileLayer({
              url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
            });

            const customBasemap = new Basemap({
              baseLayers: [layer],
              title: "Custom Basemap",
              id: "myBasemap"
            });
            const map = new Map({
              basemap: customBasemap
            });


            const view = new MapView({
              center: [this.$store.state.medciallonglat[0], this.$store.state.medciallonglat[1]], // long, lat
              container: 'ArcGISMap',
              map: map,
              zoom: this.$store.state.medcialzoom
            });


            let hostpoint = this.$store.state.medcialteam

            let len = hostpoint.length
            let image = {}
            console.log(hostpoint, '?医疗度')

            for (let i = 0; i < len; i++) {
              if (hostpoint[i].idnum == "1级") {
                image = {
                  type: 'picture-marker',
                  url: 'http://39.107.51.24:8090/nCov/CityDispatch/mapimage/hos2.png',
                  width: '20px',
                  height: '20px',
                };
              } else if (hostpoint[i].idnum == "2级") {
                image = {
                  type: 'picture-marker',
                  url: 'http://39.107.51.24:8090/nCov/CityDispatch/mapimage/hos1.png',
                  width: '20px',
                  height: '20px',
                };
              } else if (hostpoint[i].idnum == "3级") {
                image = {
                  type: 'picture-marker',
                  url: 'http://39.107.51.24:8090/nCov/CityDispatch/mapimage/hos3.png',
                  width: '20px',
                  height: '20px',
                };
              }

              let position = {
                type: 'point',
                longitude: hostpoint[i].pro[0],
                latitude: hostpoint[i].pro[1]
              };
              var template = {
                title: "<font color='#008000'>[" + '编号' + (i + 1) + "---" + "级别:" + "第" + hostpoint[i].idnum + "]</font>" + hostpoint[i].city,
                content: '护理组:' + hostpoint[i].type.nurse + '人' + '<br>' + '医疗组:' + hostpoint[i].type.medcial + '<br>' + '紧急联系人1:' + hostpoint[i].urgname1 + '<br>' + '紧急联系方式1:' + hostpoint[i].urgphone1 + '<br>' + '紧急联系人2:' + hostpoint[i].urgname2 + '<br>' + '紧急联系方式2:' + hostpoint[i].urgphone2,
              }
              
              let Ghc = new Graphic({
                geometry: position,
                symbol: image,
                popupTemplate: template
              });
              //显示图标
              view.graphics.add(Ghc);
            }
          })
      },