标签: mapbox-gl-js

在 deno 中使用 mapbox-gl

我正在尝试将 mapbox 与 deno 一起使用

其实我正在尝试这个：

import mapboxgl from 'https://dev.jspm.io/mapbox-gl';

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

Run Code Online (Sandbox Code Playgroud)

基于：如何在 DENO 中使用 npm 模块？

使用 jspm 我有太多错误，当我尝试我有一个：

esModuleInterop, module, target
error: TS2339 [ERROR]: Property 'accessToken' does not exist on type '{}'.
mapboxgl.accessToken =  "toto";
         ~~~~~~~~~~~
    at file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts:10:10

TS2339 [ERROR]: Property 'Map' does not exist on type …

Run Code Online (Sandbox Code Playgroud)

typescript mapbox-gl-js deno

use*_*794

2021 05-14

6
推荐指数

1
解决办法

88
查看次数

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

Kon*_*pov

2021 07-31

6
推荐指数

1
解决办法

4966
查看次数

Mapbox 图例适用于台式机、平板电脑，但不适用于移动设备。如何修复它以在移动设备上正确显示？

在 Chrome 开发者工具中，图例完美地显示在桌面、平板电脑和移动设备的 Mapbox 地图之上。这是看起来的样子。它显示半透明的水平图例。

但如果我实际使用 iPhone，图例将无法正确显示。它变成垂直的并且所有格式似乎都丢失了。

这是我的地图框控件：

 // Control implemented as ES6 class
    class fs_legend_control {

        onAdd(map) {
        var fs_legend_control_html = ' \
        <div class="my-legend"> \
            <div class="legend-title">Piste Difficulty Legend</div> \
                <div class="legend-scale"> \
                    <ul class="legend-labels"> \
                        <li><span style="background:#339933;"></span>Novice</li> \
                        <li><span style="background:#097CCB;"></span>Easy</li> \
                        <li><span style="background:#ED151F;"></span>Intermed\'</li> \
                        <li><span style="background:#000000;"></span>Advanced</li> \
                        <li><span style="background:#ffa502;"></span>Expert</li> \
                        <li><span style="background:#ffff01;"></span>Freeride</li> \
                        <li><span style="background:#ffc0cb;"></span>Unrated</li> \
                    </ul> \
                </div> \
            <div class="legend-source"> <a href="https://www.example.com/pistes/">About Piste Difficulty</a></div> \
        </div> \
        ';

            this._map = map;
            this._container = document.createElement('div');
            this._container.className …

Run Code Online (Sandbox Code Playgroud)

javascript css mapbox mapbox-gl-js

spr*_*man

2023 10-28

6
推荐指数

1
解决办法

212
查看次数

是否可以动态添加到 kepler.gl 中的数据集

我在 kepler.gl 中工作并从数据库加载数据。如果数据库更新，我希望能够动态更新数据集。有没有办法向数据集添加一行并更新地图？

我已经尝试删除数据集（使用 removeDataset）并将其与更新的数据（addDataToMap）一起添加回来，但是当涉及到更大的数据集时，这效率不高。

提前致谢。

mapbox-gl-js react-map-gl kepler.gl

Ali*_*Ali

lucky-day

5
推荐指数

1
解决办法

1948
查看次数

带有Angular 6的Mapbox。“找不到地图容器”错误

我正在开发我的第一个角度网络应用程序，我想介绍一些类似于Google地图的内容。由于新的计费政策，我不想使用最后一个，因此我尝试了MapBox。

在学习完本教程之后，我设法创建了所需的地图。问题是，我不知道如何在角度组件上显示它。

我为地图生成了该文件，并且可以与浏览器完美结合，并且可以将其直接粘贴到我的角度项目的index.html上。但是，当我尝试在组件上使用它时，我不知道该怎么做。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
      <div id='map'></div>
      <script>
        mapboxgl.accessToken = 'myToken'; // replace this with your access token
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'my style URL', // replace this with your style URL
        center: [-2.8662684, 43.2806562], …

Run Code Online (Sandbox Code Playgroud)

mapbox-gl mapbox-gl-js angular

Fra*_*anP

lucky-day

5
推荐指数

2
解决办法

1759
查看次数

始终显示弹出式地图框

我一直在关注本教程https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

我的标记显示正常，我可以单击标记以显示弹出窗口，但我希望始终显示弹出窗口。

我已成功修改 CSS 以不显示箭头和“x/关闭”按钮。

var geojson = {
    "type": "FeatureCollection",
    "features": [{
         "type": "Feature",
         "geometry": {
             "type": "Point",
             "coordinates": [-77.032, 38.913]
         },
         "properties": {
             "title": "Mapbox",
             "description": "Washington, D.C."
         }
     },
     {
         "type": "Feature",
         "geometry": {
         "type": "Point",
         "coordinates": [-122.414, 37.776]
        },
         "properties": {
             "title": "Mapbox",
             "description": "San Francisco, California"
         }
     }]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-96, 37.8],
    zoom: 3
});

// add markers to map
geojson.features.forEach(function(marker) {

    // create a …

Run Code Online (Sandbox Code Playgroud)

javascript mapbox mapbox-gl-js mapbox-marker

use*_*032

lucky-day

5
推荐指数

1
解决办法

2040
查看次数

Three.js - 无法在 Mapbox GL JS 自定义 WebGL 层上渲染立方体

我正在尝试使用此示例渲染多维数据集：添加 3D 模型。

示例在three.js 上工作到117 版本。由于 118 版本示例不起作用：多维数据集在页面刷新后立即消失。我研究了变更日志，最明显的变化是，自从 v118 Three.js 使用 WebGL2 作为默认渲染引擎。所以我更改了代码以使用 WebGL1，但立方体仍然消失。

  this.renderer = new THREE.WebGL1Renderer({
  canvas: map.getCanvas(),
  context: gl,
  antialias: true
});

Run Code Online (Sandbox Code Playgroud)

这是重现问题的代码笔。（重新加载页面以查看立方体片刻）

javascript three.js mapbox-gl-js

mic*_*ace

2020 08-13

5
推荐指数

1
解决办法

264
查看次数

如何在 Mapbox GL JS 中添加自定义地理定位我按钮？

我正在尝试向我的地图添加一个自定义的 Geolocate me 按钮并且它有点工作，但是前提是我还添加了来自 Mapbox 的标准图标。下面的代码有效，但如果我删除该行map.addControl(geolocate, 'top-right');，我的左按钮将停止工作。

      // Initialize the geolocate control.
  var geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
      trackUserLocation: true
    });
    // Add the control to the map.
  map.addControl(geolocate, 'top-right');

  class ToggleControl {

    constructor(options) {
      this._options = Object.assign({}, this._options, options)
    }

    onAdd(map, cs) {
      this.map = map;
      this.container = document.createElement('div');
      this.container.className = `${this._options.className}`;

      const button = this._createButton('monitor_button')
      this.container.appendChild(button);
      return this.container;
    }
    onRemove() {
      this.container.parentNode.removeChild(this.container);
      this.map = undefined;
    }
    _createButton(className) {
      const el = window.document.createElement('button') …

Run Code Online (Sandbox Code Playgroud)

javascript mapbox mapbox-gl-js icontrol

Ang*_*huk

lucky-day

5
推荐指数

1
解决办法

456
查看次数

将 redux store 传递给 react-dom/server 的 renderToString() 方法

我有一个常规的 React 应用程序（CRA）。在应用程序的一部分中，我使用 Mapbox 来显示地图，并呈现一个弹出窗口，我需要传入一串要呈现的 html 内容。而不是传入原始 html，我仍然想使用 React 来呈现弹出窗口，所以我这样做：

const renderedContent = renderToString(
    <Popup
      port={port}
      poiType={poiType}
      activeView={activeView}
      isPortsOnly={isPortsOnly}
      locations={locations}
    />
  )

Run Code Online (Sandbox Code Playgroud)

从呈现弹出组件中获取 html 字符串。这仍然是客户端，文档说renderToString()在客户端也可以用于这些用例。

new Popup()
  .setLngLat(coordinates)
  .setHTML(renderedContent)
  .addTo(self.map)

Run Code Online (Sandbox Code Playgroud)

使用 html 字符串创建一个弹出窗口。

这按预期工作。现在我的问题是：我不想在 Popup 组件中使用 redux。两者都调度一个事件，并读取全局状态。我怎样才能做到这一点？我真的可以这样做吗？

我试过的

如果我尝试仅redux在 Popup 组件中使用，则会收到以下错误消息：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

javascript reactjs mapbox-gl-js redux react-redux

eiv*_*dml

2020 11-24

5
推荐指数

1
解决办法

326
查看次数

一旦 cocoapods 从 Podfile 安装 react-native-mapbox-gl，Xcode 就会成功构建损坏的存档，而不显示在组织器中

这个问题似乎并不新鲜，就像这里，但提出的解决方案没有奏效。我还尝试了其他几种方法来了解发生了什么（请参阅此处）。要复制，这是一个过程：

我有一个用 Swift 编写的有效 iOS 应用程序。
我按照说明将此应用程序与 Native React 集成此过程
我将以下依赖项添加到 package.json 中，然后运行yarn install： "@react-native-mapbox-gl/maps":"^8.1.0-rc.9", "prop-types": "^15.6.2",
我pod install --repo-update在 Xcode 上运行和存档。输出：此时组织者显示我的档案。
我按照此过程在 mapbox 上实现了一个基本视图
我添加到 Podfile 要求use_framework!，如此处或之后所述use_framework!，在我点击pod install --repo-update.
我在 Xcode 上点击了存档。OUTPUT：存档已成功生成，但未显示在组织者上。如果我尝试打开它，存档已损坏。