在vue中使用超图标绘服务

1、使用vue-cli新建一个vue工程。
2、下载supermap iclient for leaflet 10.01的下载包，将supermap iclient for leaflet 10.01的下载包中的dist文件夹和examples中的js、img、locales文件夹拷贝到vue工程中public文件夹目录中。
3、下载leaflet，将leaflet拷贝到vue工程中public文件夹目录中。

1.png

4、在index.html中添加标签引入leaflet、supermap以及超图标绘相关文件。

  <link rel="stylesheet" href="./leaflet/dist/leaflet.css" />
  <script src="./leaflet/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
  <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>

  <script type="text/javascript" include="bootstrap,plottingPanel" src="./js/include-web.js"></script>
  <script type="text/javascript" include="iclient-plot-leaflet" src="./dist/leaflet/include-leaflet.js"></script>
  <script type="text/javascript" include="PlotPanel" src="./js/plottingPanel/PlottingPanel.Include.js"></script>

5、在组件中即可使用（超图示例，清空、取消功能不可用，代码需进行修改）。

<template>
  <div
    style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"
  >
    <div
      id="toolbar"
      class="panel panel-primary"
      style="position: absolute;top: 15px;right: 60px;text-align: center;z-index: 9999;border-radius: 4px;"
    >
      <div class="panel-heading" id="panelheading">
        <h5
          class="panel-title text-center"
          style=" color: #ffffff;font-size: 16px;"
        >鼠标标绘</h5>
      </div>
      <div class="panel-body content" id="panelbodycontent">
        <div align="right" class="button-group">
          <input
            type="button"
            class="btn btn-default"
            value="取消标绘"
            onclick="PlottingDrawCancel()"
          />&nbsp;&nbsp;
          <input
            type="button"
            class="btn btn-default"
            value="清空标绘"
            onclick="clearLayers()"
          />
        </div>
      </div>
    </div>
    <div id="plottingPanel">
      <div
        class="easyui-panel"
        style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;"
      >
        <div class="easyui-tabs" style="width: 100%;height: 100%">
          <div id="plotPanel" style="overflow: hidden">标绘面板</div>
        </div>
      </div>
    </div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map;
    map = L.map("map", {
      preferCanvas: true,
      crs: L.CRS.EPSG4326,
      center: [35, 104],
      maxZoom: 18,
      zoom: 3
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.spatialAnalystUrl =
      host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
    plottingLayer.addTo(map);
    var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);

    function clearLayers() {
      plottingLayer.removeAllFeatures();
    }

    function PlottingDrawCancel() {
      drawControl.handler.disable();
    }
  },
  methods: {},
  components: {}
};
</script>
<style  scoped>
#map {
  position: absolute;
  left: 250px;
  right: 0px;
  height: 100%;
}

#plottingPanel {
  float: left;
  background: #ffffff;
  width: 250px;
  height: 100%;
  border: 1px solid #3473b7;
}
</style>

6、启动npm run dev,结果如下：

2.jpg