前端 天地图 地图加上矢量边界

您可以使用天地图API来实现在前端页面上将矢量边界添加到地图上的功能。以下是基本步骤：

1. 获取天地图API的访问密钥。

2. 在HTML文件中引入天地图API的JavaScript文件。

<script src="//api.tianditu.gov.cn/api?v=4.0&tk=[your_key]"></script>

3. 创建一个地图容器，指定地图的中心点和缩放级别。

<div id="map"></div>

var map = new T.Map("map");
map.centerAndZoom(new T.LngLat(116.397128, 39.916527), 12);

4. 加载矢量边界数据，可以使用GeoJSON格式。

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [116.330566, 39.984106],
            [116.330566, 39.962271],
            [116.357038, 39.962271],
            [116.357038, 39.984106],
            [116.330566, 39.984106]
          ]
        ]
      },
      "properties": {}
    }
  ]
};

var layer = new T.GeoJSONLayer({
  "name": "boundary",
  "featureType": "polygon",
  "featureClass": "",
  "features": geojson.features,
  "style": {
    "color": "#ff0000",
    "weight": 2,
    "opacity": 1,
    "fillColor": "#ff0000",
    "fillOpacity": 0.2
  }
});

map.addLayer(layer);

5. 调整矢量边界的样式和透明度，使其能够清晰地看到地图底图。

请注意，具体步骤可能因所使用的天地图API版本和数据格式而异。