标签: mapbox

使用 html2canvas 截屏 MapBox 创建黑色 jpg

我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情,但我在硬盘上得到的只是一张黑屏 jpg。

这是我的 HTML 代码:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
        <script src="js/html2canvas.js"></script>
    </head>

    <body onload="initialize()">
        <div id="map"></div>
        <script src="js/coordinates.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

使用此 CSS 全屏显示:

html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { width: 100%; height: 100%; }
Run Code Online (Sandbox Code Playgroud)

这个 JS 脚本用于创建地图并截取屏幕截图:

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2luZ2FsYWJ2IiwiYSI6ImNpaWluNXIzbDAwMjB3ZG02c2hmNGhhMnUifQ.5SC9qnrK7eEdAtwv5Z0S_Q';

var latitude = 48.858565;
var longitude = 2.347198;

function initialize()
{
    var map = new mapboxgl.Map( …
Run Code Online (Sandbox Code Playgroud)

javascript html2canvas mapbox

6
推荐指数
2
解决办法
5899
查看次数

将 Mapbox-GL 导出为视频

我想创建用户生成的地图和路径并将其导出到视频。在此页面上,https://uber.github.io/kepler.gl/#/demo/ukcommute,我看到它们导出到照片。是否可以从 mapboxGL 地图创建视频?

video-encoding mapbox mapbox-gl

6
推荐指数
0
解决办法
410
查看次数

如何使用用户属性更改 MapboxGL 中的 line-dasharray 设置?

我尝试使用以下代码更改 line-dasharray 设置,

'line-dasharray': [
    "case", 
    ['==', ['get', "user_class_id"], 'laneway'],[0.2,2],[0.3,2] 
 ]
Run Code Online (Sandbox Code Playgroud)

它给出了这个错误,

Error: layers.gl-draw-line-active.hot.paint.line-dasharray[2][0]: Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]].
Run Code Online (Sandbox Code Playgroud)

所以我根据错误建议修复了代码,

  'line-dasharray': [
      "case", 
      ['==', ['get', "user_class_id"], 'laneway'],['literal',[0.2,2]],['literal',[0.3,2]] 
  ]
Run Code Online (Sandbox Code Playgroud)

它给了我这个错误,

evented.js:136 Error: layers.gl-draw-line-active.hot.paint.line-dasharray: data expressions not supported
Run Code Online (Sandbox Code Playgroud)

有谁知道如何解决这个问题?

javascript mapbox mapbox-gl mapbox-gl-js mapbox-gl-draw

6
推荐指数
1
解决办法
6568
查看次数

如何动态更新MapboxGL.ShapeSource?

使用react-native-mapbox-gl/maps,当aSymbolLayer动态添加到a时ShapeSource,似乎没有显示,或者ShapeSource没有更新。

这是要重现的示例:根据CustomIcon示例,我用下面的代码替换了代码。要重现,只需执行示例,复制粘贴代码来代替CustomIcon.js示例中的现有代码。

import React from 'react';
import { View, Text } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

import sheet from '../styles/sheet';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';
import Bubble from './common/Bubble';

const styles = {
  icon: {
    iconAllowOverlap: true,
  },
  view: {
    width: 60,
    height: 60,
    borderColor: 'black',
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 50
  }
};

const customIcons …
Run Code Online (Sandbox Code Playgroud)

mapbox reactjs mapbox-gl react-native mapbox-gl-js

6
推荐指数
1
解决办法
4266
查看次数

要使用的公共样式的 Mapbox 库

抱歉,因为我是新人...我在哪里可以找到可以在工作室上传和使用的所有公共样式的 Mapbox 库?mabox网站上只有4个样式,但是用户创建了很多公共样式,哪里可以下载?

styles mapbox

6
推荐指数
1
解决办法
4121
查看次数

Mapbox fitbounds() - 无效的 LngLat 对象:(NaN, NaN)

在过去的几个小时里,我一直用头撞桌子。

我试图让 Mapbox 放大所有标记的边界区域的负载。

但是,这是我在下面的代码中遇到的错误。

此错误出现在下面的控制台日志图像之后,因此 lat lng 坐标肯定存在。

未捕获的错误:无效的 LngLat 对象:(NaN,NaN)

  const onLoad = () => {

    let points = [];

    props.cats.forEach(cat => (
      points.push([ cat.lat, cat.lng ])
    ));

    points.length > 0 && ref.current.getMap().fitBounds(points, {
      padding: { top: 50, bottom: 50, left: 50, right: 50 },
      easing(t) {
          return t * (2 - t);
      },
    });

  };
Run Code Online (Sandbox Code Playgroud)

控制台点日志

mapbox mapbox-gl mapbox-gl-js

6
推荐指数
2
解决办法
7432
查看次数

如何使用Python禁用plotly choropleth mapbox图的缩放?

这是我的代码:

fig = px.choropleth_mapbox(district_df[['District','Confirmed','Deaths','id','province']], geojson = geo_df, locations='id', color='Confirmed',
                           color_continuous_scale="Viridis",
                           mapbox_style="carto-positron",
                           zoom=5.9, hover_name = 'District',hover_data = {'District':False, 'Confirmed':True,'Deaths':True,'province':False,'id':False},
                           opacity=0.5, center = {"lat": 28.3949, "lon": 84.1240})
Run Code Online (Sandbox Code Playgroud)

我想禁用缩放选项。有办法吗?

python data-visualization mapbox plotly choropleth

6
推荐指数
1
解决办法
3360
查看次数

尝试安装 mapbox-tileset 时使用 GDAL_CONFIG 环境变量错误提供 gdal-config 的路径

运行 pip install mapbox-tilesets 时,在收集 rasterio 过程中,我在 Windows 10 计算机上收到以下错误,特别是在构建轮子的要求时出现错误。详细信息如下。

Collecting rasterio
  Using cached rasterio-1.1.8.tar.gz (2.1 MB)
  Installing build dependencies ... done
  Getting requirements to build wheel ... error
  ERROR: Command errored out with exit status 1:
   command: 'C:\Users\Sandy Haaf\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.8_qbz5n2kfra8p0\python.exe' 'C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.8_3.8.2032.0_x64__qbz5n2kfra8p0\lib\site-packages\pip\_vendor\pep517\_in_process.py' get_requires_for_build_wheel 'C:\Users\Sandy Haaf\AppData\Local\Temp\tmp5nhr9kl_'
       cwd: C:\Users\Sandy Haaf\AppData\Local\Temp\pip-install-gj86e2z4\rasterio
  Complete output (2 lines):
  INFO:root:Building on Windows requires extra options to setup.py to locate needed GDAL files. More information is available in the README.
  ERROR: A GDAL API version …
Run Code Online (Sandbox Code Playgroud)

python gdal mapbox rasterio

6
推荐指数
1
解决办法
1111
查看次数

Mapbox GL Js,动态改变地图容器大小,无法调整地图大小

我的地图实例位于可调整大小的容器中,当我更改大小时,我应该调用map.resize()。我想知道是否有一种方法可以监听 mapbox 容器调整大小事件,以便它可以触发 map.resize() ?你能建议如何做吗?

export default function Map({ chartID, configuration, data }) {
  const classes = useStyles();
  const mapContainer = useRef(null);

  const [map, setMap] = useState(null);

  const [settings, setSettings] = useState({
    longitude: -73.935242,
    latitude: 40.73061,
    zoom: 9,
  });

  useEffect(() => {
    const geoFeatures = //...getting data

    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://',
      center: [settings.longitude, settings.latitude],
      zoom: settings.zoom,
    });

    map.on('move', () => {...});

    //setting map to state if we need to reference it later
    setMap(map);
    // Clean …
Run Code Online (Sandbox Code Playgroud)

mapbox reactjs mapbox-gl-js react-map-gl

6
推荐指数
1
解决办法
4966
查看次数

Plotly - 在 Density Mapbox 顶部添加散点地理点和轨迹

Scattergeo我正在尝试在密度地图框顶部添加跟踪或叠加层white-bg,以获取通用美国各州轮廓的热图。

我使用的原因scattergeo是我想在密度地图框的顶部绘制一个星形符号,并且唯一接受的符号add_scattermapbox是一个点。如果您选择star符号,则不会添加任何符号。

mapbox_styles我还知道星号对于add_scattermapbox或 的p 是可以接受的density_scattermapbox,但目前我无法在试用金额用完后按网络负载付费。

有没有一种聪明的方法可以在图上添加星号density_mapbox

工作分散地理

fig = go.Figure(go.Scattergeo())

fig.add_scattergeo(lat = [30, 40]
                      ,lon = [-90, -80]
                      ,hoverinfo = 'none'
                      ,marker_size = 10
                      ,marker_color = 'rgb(65, 105, 225)' # blue
                      ,marker_symbol = 'star'
                      ,showlegend = False
                     )

fig.update_geos(
    visible=False, resolution=110, scope="usa",
    showcountries=True, countrycolor="Black",
    showsubunits=True, subunitcolor="Black"
)

fig.show()
Run Code Online (Sandbox Code Playgroud)

在这里添加图片

工作密度Mapbox

d = {'Location': ['Point A', 'Point B'], 'lat': [30, 40], 'long': [-90, -80], 'z': [100,200]} …
Run Code Online (Sandbox Code Playgroud)

python mapbox plotly

6
推荐指数
1
解决办法
1万
查看次数