首页 / 浏览问题 / 其他 / 问题详情
使用vue获取栅格数据
209EXP 2018年04月24日

点击地图获取栅格数据,报一下错误

下面是代码:
<template>
  <div>
      <div id='map' style="margin:0 auto;width: 1100px;height: 500px"></div>
      <div id="queryresult" style="width:100%;heigth:200px"></div>
      <div class="tip">"注:点击地图任意位置,案例以该位置进行栅格查询,查询完成后地图左下角会显示查询结果"</div>
  </div>
</template>
<script>
  export default {
    mounted () {
      this.map = new SuperMap.Map("map",{controls:[
        new SuperMap.Control.LayerSwitcher()]});

      this.map.events.on({
        "click": this.mapClicked
      });

      //新建点矢量图层
      this.pointLayer = new SuperMap.Layer.Vector("pointLayer");

      this.layer = new SuperMap.Layer.TiledDynamicRESTLayer("京津地区地图",this.url, {transparent: true, cacheEnabled: true});
      this.layer.events.on({"layerInitialized": this.addLayer});

    },
    data () {
      return {
        map: '',
        layer: '',
        pointLayer: '',
        str: '',
        num: 0,
        valueArray: [],
        url: "http://support.supermap.com.cn:8090/iserver/services/map-jingjin/rest/maps/京津地区地图",
        url1: "http://support.supermap.com.cn:8090/iserver/services/data-jingjin/rest/data"
      }
    },
    methods: {
      addLayer(layer) {
        this.map.addLayers([layer, this.pointLayer]);
        this.map.setCenter(new SuperMap.LonLat(116.85 ,39.79), 2);
      },
      mapClicked (e) {
        var pixel = new SuperMap.Pixel(e.xy.x,e.xy.y),
          lonlat = this.map.getLonLatFromPixel(pixel);
        this.addFeature(lonlat);
        this.query(lonlat);
      },
      addFeature(lonlat) {
        this.pointLayer.removeAllFeatures();
        var point = new SuperMap.Geometry.Point(lonlat.lon, lonlat.lat);
        var feature = new SuperMap.Feature.Vector(point);
        this.pointLayer.addFeatures([feature]);
      },
      query(lonlat) {
        if(!!lonlat) {
          var gridCellQueryParam = new SuperMap.REST.GetGridCellInfosParameter({
            datasetName: 'JingjinTerrain',
            dataSourceName: "Jingjin",
            X: lonlat.lon,
            Y: lonlat.lat
          });
          var gridCellQueryService = new SuperMap.REST.GetGridCellInfosService(this.url1, {
            'eventListeners': {
              'processCompleted': this.querySuccess,
              'processFailed': this.queryFailed
            }
          });
          gridCellQueryService.processAsync(gridCellQueryParam);
        } else {
          alert("地理位置错误!");
        }
      },
      querySuccess(evt) {
        var str = "栅格查询结果:",
          result = evt.result;
        for(var objName in result) {
          if(result.hasOwnProperty(objName)) {
            str += "<span>" + objName + ":" + result[objName] + "</span> ";
          }
        }
        document.getElementById("queryresult").innerHTML = str;
      },
      queryFailed(evt) {
        console.log(evt);
        document.getElementById("queryresult").innerHTML = evt.originResult.error.errorMsg;
      }
    }
  }
</script>

1个回答

这个是新出的接口,你用我们 最新出的classic包 做试下
186EXP 2018年04月25日

谢谢,已经解决,我的是把

new webpack.optimize.CommonsChunkPlugin('common'),

删掉,如果不删掉的话,导致打包失败,不能把supermap相关的js全部导入到webpack中导致,js无法识别supermap语句

恩  ,classic的 包没有按照模块话打包 ,不支持 AMD和ES6 Model
有没有关于leaflet的
...