vue2集成supermap，实现在地图上根据坐标标绘，内网开发，地图加载本地的json文件

实现该功能需要进行以下步骤：

1. 集成 SuperMap iClient for JavaScript，可以通过 npm 安装：

   npm install @supermap/iclient-leaflet@10.1.0 --save

2. 在 Vue 组件中引入 Leaflet 和 SuperMap iClient for JavaScript：

   import L from 'leaflet';
   import '@supermap/iclient-leaflet';

3. 创建 Leaflet 地图实例：

   mounted() {
     const map = L.map('map', {
       crs: L.CRS.EPSG4326,
       center: [0, 0],
       zoom: 2
     });
     this.map = map;
   }

4. 加载本地的 JSON 文件作为底图：

   mounted() {
     const map = L.map('map', {
       crs: L.CRS.EPSG4326,
       center: [0, 0],
       zoom: 2
     });
     this.map = map;

     const url = 'http://localhost:8080/data/world_cities.json';
     L.supermap.tiledMapLayer(url).addTo(map);
   }

在上面的例子中，我们加载了一个名为 `world_cities.json` 的本地 JSON 文件作为底图，该文件需要放在项目的 `public/data` 目录下。

5. 在地图上根据坐标标绘：

   methods: {
     addMarker() {
       const lon = 116.3975;
       const lat = 39.9085;
       const marker = L.marker([lat, lon]).addTo(this.map);
       this.map.setView([lat, lon], 12);
     }
   }

在上面的例子中，我们创建了一个名为 `addMarker` 的方法，该方法可以在地图上根据坐标添加一个标记，并将地图视图设置到该坐标位置。你可以在组件的模板中添加一个按钮，调用该方法。

完整的 Vue 组件代码如下：

<template>
  <div id="map" style="height: 500px;"></div>
  <button @click="addMarker">添加标记</button>
</template>

<script>
import L from 'leaflet';
import '@supermap/iclient-leaflet';

export default {
  mounted() {
    const map = L.map('map', {
      crs: L.CRS.EPSG4326,
      center: [0, 0],
      zoom: 2
    });
    this.map = map;

    const url = 'http://localhost:8080/data/world_cities.json';
    L.supermap.tiledMapLayer(url).addTo(map);
  },
  methods: {
    addMarker() {
      const lon = 116.3975;
      const lat = 39.9085;
      const marker = L.marker([lat, lon]).addTo(this.map);
      this.map.setView([lat, lon], 12);
    }
  }
};
</script>

注意，在使用 SuperMap iClient for JavaScript 进行内网开发时，需要在后台配置好相应的服务地址和跨域访问。