@supermap/vue-iclient-mapboxgl入门，标记点、道路高亮显示

项目本来使用的是百度地图，但之后要放在内网，所以老大说要更换为超图，让我去研究。因为本人是菜鸟，而且网上关于超图的使用案例较少，所以我将其完整代码都放上了，希望能帮到你们一点小忙。

首先是按照官网的开发指南安装 | Vue-iClient-MapboxGL，按照步骤在main.js添加组件，但是启动时报出了异常，其中一个node_modules里文件代码段如下

return latOrLng
        ? {
            ...dms,
            direction: latOrLng === 'lat' ? (value > 0 ? 'N' : 'S') : value > 0 ? 'E' : 'W'
        }
        : dms;

这个问题我是去https://github.com/SuperMap/vue-iclient，降到了10.1.1后能正常使用。

之后是地图展示，这一步我是按照地图组件 | Vue-iClient-MapboxGL的加载iServe地图来展示地图。直接将该页面下的代码负责即可。代码如下：

<template>
  <sm-web-map :map-options="mapOptions"></sm-web-map>
</template>
<script>
export default {
  data() {
    return {
      mapOptions: {
        container: 'map', // container id
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tiles: [
                'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
              ],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        center: [120.143, 30.236], // starting position
        zoom: 3 // starting zoom
      }
    };
  }
};
</script>

地图可以展示后，还需要加一些标记点、道路高亮。此时就需要对其中mapOptions的style来进行操作。style中要标记点需要给sources和layers添加数据。

这时可以参考MapBoxgl的示例，我参考的是集合对象缓冲区分析。

示例中加载点的代码如下（示例源码的85-111行）

 //加载点
        var pointGeometryFetures = [];
        for (i = 0; i < pointList.length; i++) {
            pointGeometryFetures.push({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": pointList[i],
                }
            });
        }
        map.addLayer({
            "id": "bufferPoint",
            "type": "circle",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": pointGeometryFetures
                }
            },
            "paint": {
                "circle-radius": 6, /* 圆的直径，单位像素 */
                "circle-color": "black", /* 圆的颜色 */
            },
            "filter": ["==", "$type", "Point"],
        });

 所以我将其手动添加到mapOptions的style中，添加完整个vue页面代码如下

<template>
  <sm-web-map :map-options="mapOptions"></sm-web-map>
</template>

<script>

export default {
  name: 'list',
  data () {
    return {
      mapOptions: {
        container: 'map', // container id
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tiles: [
                'https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'
              ],
              tileSize: 256
            },
            'geojson-test': {
              type: 'geojson',
              data: {
                type: 'Feature',
                geometry: {
                  type: 'LineString',
                  coordinates: [
                    [116.2143386597, 39.8959419733],
                    [116.2156351162, 39.8963250173],
                    [116.2182280292, 39.8968111885],
                    [116.2740019864, 39.8970124079],
                    [116.3103285499, 39.8970574832],
                    [116.3321510064, 39.8970392162],
                    [116.3377051439, 39.8973437531],
                    [116.3463089006, 39.8978391816],
                  ]
                }
              }
            },
            'circle-test': {
              type: 'geojson',
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.2143386597, 39.8959419733],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.2156351162, 39.8963250173],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.2182280292, 39.8968111885],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.2740019864, 39.8970124079],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.3103285499, 39.8970574832],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.3321510064, 39.8970392162],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.3377051439, 39.8973437531],
                    },
                  },{
                    "type": "Feature",
                    "geometry": {
                      "type": "Point",
                      "coordinates": [116.3463089006, 39.8978391816],
                    },
                  }
                  ]

              }
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            },
            {
              id: 'route',
              type: 'line',
              source: 'geojson-test',
              layout: {
                "line-join": "round",
                "line-cap": "round"
              },
              paint: {
                "line-color": "red",
                "line-width": 8
              }
            },{
              id: 'Point',
              type: 'circle',
              source: 'circle-test',
              paint: {
                'circle-radius': 6, /* 圆的直径，单位像素 */
                'circle-color': "black", /* 圆的颜色 */
              },
              "filter": ["==", "$type", "Point"],
            }
          ]
        },
        center: [116.28094998209556, 39.897168019388474], // starting position
        zoom: 12, // starting zoom
      }
    }
  },
  methods: {
  },
  mounted () {
  }
}

</script>
<style  scoped>

</style>