如何在mapbox on中添加多个in？

在Mapbox中添加多个in可以通过使用Mapbox GL JS库来实现。Mapbox GL JS是一个基于WebGL的JavaScript库，用于在网页上创建交互式地图。

要在Mapbox中添加多个in，可以按照以下步骤进行操作：

创建一个Mapbox账号并登录。访问Mapbox官网（https://www.mapbox.com/），点击"Sign Up"按钮创建一个免费账号。
创建一个新的地图项目。登录后，在Mapbox主页上点击"New Project"按钮，然后选择"New Map"选项。在地图编辑器中，您可以自定义地图的样式、添加图层等。
获取Mapbox的访问令牌。在地图编辑器中，点击右上角的"Share"按钮，然后选择"Access Token"选项。复制生成的访问令牌，该令牌将用于在代码中访问Mapbox的API。
在HTML文件中引入Mapbox GL JS库。在HTML文件的<head>标签中添加以下代码：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

创建一个包含地图的容器。在HTML文件的<body>标签中添加一个具有唯一ID的<div>元素，用于容纳地图。例如：

<div id='map'></div>

编写JavaScript代码来初始化地图并添加多个in。在<script>标签中添加以下代码：

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: 12
});

// 添加多个in
map.on('load', function() {
  map.addLayer({
    id: 'in1',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [lng1, lat1]
          }
        }]
      }
    },
    paint: {
      'circle-radius': 6,
      'circle-color': '#FF0000'
    }
  });

  map.addLayer({
    id: 'in2',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [lng2, lat2]
          }
        }]
      }
    },
    paint: {
      'circle-radius': 6,
      'circle-color': '#00FF00'
    }
  });
});

在上述代码中，将'YOUR_ACCESS_TOKEN'替换为您在步骤3中获取的Mapbox访问令牌。您可以根据需要修改地图的样式、中心点和缩放级别。通过多次调用map.addLayer()方法，您可以添加多个in，每个in都可以使用不同的样式和坐标。

请注意，上述代码仅为示例，实际应用中您可能需要根据具体需求进行修改和优化。

关于Mapbox的更多信息和产品介绍，您可以访问腾讯云的Mapbox产品页面（https://cloud.tencent.com/product/mapbox）了解相关内容。