标签: mapbox

我有一个 geoJSON，其中包含显示风速符号的点。我试图了解如何更改我的代码以允许轮换。我确信我以前见过这个，但我在任何地方都找不到例子。

作为参考，这里是我的 geoJSON 中的一个功能，其中不包含旋转属性：

{
    "type": "Feature",
    "geometry": {      "type": "Point",
      "coordinates": [-117.2500 , 33.35000]
     },
     "properties": {
        "description": " ",
        "icon": "wind-speed-15"
     }
}

这是我将其添加到地图的代码：

map.addLayer({
        id: "wind_speed",
        type: 'symbol',
        source: 'wind_speed_json',
        layout: {
            'icon-image': ['get', 'icon']
        }
    })

我需要在 JSON 中更改哪些内容才能允许 Mapbox 根据每个功能进行旋转？我在想这样的事情，以度为单位（只是一个例子）：

 "properties": {
    "description": " ",
    "icon": "wind-speed-15",
    "icon-rotate": 90
 }

我只能找到如何使用适用于整个 JSON 的 icon-rotate 进行旋转的示例，而不是针对每个功能。有没有办法把它设计成这样？我肯定做错了什么。

我使用这个表达式来设置图层的线条颜色。

map.addLayer({
  ...
  'paint': {
    'line-color': ['get', 'color'],
  },
  ...
})

但是如果颜色属性没有定义怎么办？有没有办法设置回退值？谢谢。

按照https://docs.mapbox.com/ios/beta/maps/guides/install/使用 Swift Package Manager安装 mapbox Maps SDK 的说明进行操作，但失败并出现错误：

显示二进制目标“MapboxCommon”的所有消息\nartifact 提取失败：无法完成操作\xe2\x80\x99。（TSCBasic.StringError 错误 1。）

显示二进制目标“MapboxCoreMaps”的所有消息\nartifact 提取失败：操作无法\xe2\x80\x99 完成。（TSCBasic.StringError 错误 1。）

我的第一次尝试表明 Mapbox 核心地图的哈希值不正确。

我正在使用@react-native-mapbox-gl/maps，我想实现标记的聚类。我找不到任何适合我的实施的解决方案。附加图像将显示两个标记应该合并，但事实并非如此。

下面我粘贴我的代码：

<MapboxGL.MapView
      showUserLocatin={true}
      zoomLevel={10}
      zoomEnabled={zoomEnabled}
      pitchEnabled={true}
      onPress={onMapPress}
      onRegionIsChanging={onRegionIsChanging}
      surfaceView={true}
      rotateEnabled={rotateEnabled}
      compassEnabled={false}
      showUserLocation={false}
      userTrackingMode={MapboxGL.UserTrackingModes.None}
      scrollEnabled={scrollEnabled}
      styleURL={styleURL}
      centerCoordinate={getFocusPoint() || getStartingPoint()}
      ref={(c) => (_map = c)}
      onRegionDidChange={onRegionChange}
      style={style}
      cluster
    >
      {renderLines()}
      <MapboxGL.SymbolLayer
        id={'abc'}
        sourceID={MapboxGL.StyleSource.DefaultSourceID}
      />
      <MapboxGL.Camera
        zoomLevel={zoom}
        centerCoordinate={getFocusPoint() || getStartingPoint()}
      />
      {(simplePlaceData?.length > 0 || places?.length > 0) && renderMarkers()}
    </MapboxGL.MapView>

下面是我们的 renderMarkers 函数（基本上我在 MapboxGL.PointAnnotation 中显示任何 RN 组件，例如图像/图标）：

const renderMarkers = () => {
    if (simplePlaceData)
      return simplePlaceData?.map((_place) => {
        const {lat, lng, id} = _place
        const latVal = parseFloat(lat) …

我正在一张有两个要素图层的地图上工作。

var myFeatureGroup1 = L.featureGroup().addTo(map);
var myFeatureGroup2 = L.featureGroup().addTo(map);

我正在设定界限，例如：

map.fitBounds(myFeatureGroup1.getBounds());
map.fitBounds(myFeatureGroup2.getBounds());

但是出于明显的原因，myFeatureGroup2被设置为上界。这是使边界适合多个layerGroups的一种方法吗？像他们两个一样？有没有一种方法可以将它们合并到第三layerGroup中并适合其边界？

我正在尝试禁用地图集地图上的滚动缩放,但它无法正常工作.谁能告诉我我的代码有什么问题？我得到的错误是"Uncaught TypeError:无法读取属性'禁用'未定义"

<script>
    L.mapbox.accessToken = 'pk.token';
    var map = L.mapbox.map('map', 'mapbox.streets', {
        legendControl: {
            position: 'topright'
        }
    })
        .setView([56.3, 11.5], 7);

      var popup = new L.Popup({ autoPan: false });

      // statesData comes from the 'us-states.js' script included above
      var statesLayer = L.geoJson(statesData,  {
          style: getStyle,
          onEachFeature: onEachFeature
      }).addTo(map);

      function getStyle(feature) {
          return {
              weight: 2,
              opacity: 0.1,
              color: 'black',
              fillOpacity: 0.7,
              fillColor: getColor(feature.properties.density)
          };
      }

      // get color depending on population density value
      function getColor(d) {
          return d > 1000 …

我正在尝试使用Vue 2的MapBox,我无法使地图占据容器的整个宽度.它仅渲染容器宽度的50%.

我已将文件包含在index.html的头部,如下所示:

<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>

<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />

我想要一个组件中的地图(Map.vue,我正在使用vue-router),所以这里是Map.vue中的代码:

脚本:

import Mapbox from 'mapbox-gl-vue';

export default {
  components: {
     'mapbox': Mapbox
  }
}

模板:

<mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
    :map-options="{
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-96, 37.8],
      zoom: 3
    }"
    :geolocate-control="{
      show: true, 
      position: 'top-left'
    }"
    :scale-control="{
      show: true,
      position: 'top-left'
    }"
    :fullscreen-control="{
      show: true,
      position: 'top-left'
    }">>
  </mapbox>

样式:

 #map {
 width: 100%;
 height: 600px;
 position: absolute;
 margin:0;
 z-index:1;
}

我已经在CSS id中尝试了我所知道的所有内容,但它只将地图呈现在容器宽度的右半部分,在左侧只显示徽标和控件,而其余区域为空.

我正在尝试使用leaflet.js设置整个世界的界限：

  leafletMap.setMaxBounds([
      [?, ?],
      [?, ?]
  ]);

我必须使用什么值来设定整个世界的界限，这样它才不会显示多个相同的国家/地区？

基于地图框示例如何添加标记

我想制作一个纯CSS而不是图像的泪滴标记。我也想从for循环索引中为标记编号。是否可以创建泪滴标记？有人能帮忙吗？我似乎无法从mapbox中找到一个很好的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .marker {
            background-image: url('mapbox-icon.png');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
        .mapboxgl-popup {
            max-width: 200px;
        }
        .mapboxgl-popup-content {
            text-align: center;
            font-family: 'Open Sans', sans-serif;
        }

    </style>
</head>
<body>

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

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';

var geojson = { …

我有一张地图，其中包含多个GeoJSON图层，每个图层都有自己的唯一图层名称：

var map = new mapboxgl.Map({
  container: 'map',
  center: [-97.5651505, 37.89549,],
  zoom: 4
});

var sources = {
  'ord': 'chicago',
  'pit': 'pittsburgh',
  'atl': 'atlanta'
};

map.on('load', function () {
  for (var s in sources) {

    map.addSource(s, { type: 'geojson', data: `/geojson/${s}.json` });
    map.addLayer({
      'id': sources[s],
      'type': 'fill',
      'source': s,
      'layout': {
        'visibility': 'visible'
      },
      'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.5
      }
    });
  }
});

我想检查用户是否放大了过去的缩放级别13评估这三个图层中的任何一个是否在视口中。如果是，我将采取行动将按钮添加到叠加层。但是，除了如何检查视口内是否有图层之外，我在查找除传单以外的任何文档时遇到了问题。我发现了一些似乎不适用的标记。