标签: mapbox

嘿伙计们，基本上我的网站目前看起来像这样。我的目标是当用户单击右上角的箭头时折叠左侧边栏，单击时将smallMapSidebar状态变为true。

但是，当侧边栏的宽度发生变化时，地图不会覆盖新空间，看起来像这样

这是我的地图组件的当前代码。

import React, { useState, useEffect, useRef } from "react";
// map imports
import Map from "react-map-gl";
import MapboxGl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
// styling imports
import "../../styles/map/MapComponent.css";
// added the following 6 lines.
import mapboxgl from "mapbox-gl";

const TOKEN = "map-token";

function MapComponent({ smallMapSidebar }) {
  const mapRef = useRef(null);

  const resizeMap = MapboxGl.Map.prototype;

  useEffect(() => {
    // console.log(resizeMap);
    if (smallMapSidebar === true) {
      mapRef.current.resize();
      // console.log(mapRef.current);
    }
  }, [smallMapSidebar, resizeMap]);

  return (
    <div className="map-container">
      <Map
        ref={mapRef} …

Mapbox：无法禁用触摸设备上的 3D 倾斜

我尝试使用以下功能禁用倾斜但没有成功：

map.current.dragPan.disable(); map.current.dragRotate.disable(); map.current.touchZoomRotate.disable();

我用Josm设计了室内地图.我尝试用android做室内地图项目.

我做了开放街道地图上JOSM和我问的问题关于它的OSM帮助页面,他们说使用tilemill用于显示您的室内地图.但是tilemille支持.shp文件,我无法在tilemill上转换它.你可以在这里下载我的工作josm

我的问题是.

如何在mapbox-TileMill上设计这个室内地图.或者你能给出其他建议吗？

exxample项目,我发现这个项目例如当我导入它时,为什么它不显示地图

而且我怎么能显示地图上我的Android应用程序

你能给我建议吗？我好混.你能不能给我开源项目或实例

有没有办法添加ID或其他东西,我能够设置自定义标记图像？

我有多个带数字的标记,我需要每个新标记都有另一个图像.

例如:

marker1 - marker_1_image

marker2 - marker_2_image

Atm我只能为所有标记设置1个图像(全局):

func mapView(mapView: MGLMapView, imageForAnnotation annotation: MGLAnnotation) -> MGLAnnotationImage? {

    var annotationImage = mapView.dequeueReusableAnnotationImageWithIdentifier("place")

    if annotationImage == nil {
        var image = UIImage(named: "marker_1")!
        image = image.imageWithAlignmentRectInsets(UIEdgeInsetsMake(0, 0, image.size.height/2, 0))
        annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "place")
    }

    return annotationImage
}

有任何想法吗？或者我可以继承MGLAnnotation并将其用于所有委托方法吗？

我在Android应用程序中使用Mapbox Android SDK v4.0.0,在某些时候需要在给定位置和给定缩放级别"冻结"MapView.

在我看来,API中没有方法可以:

1. 为地图设置特定的缩放级别,
2. 将地图置于给定位置的中心.

怎么做到这一点？

我开始在项目中使用MapBox。当我添加带有自定义图像的注释时，它居中不正确。它似乎比原始引脚低一些。是否可以更改注释图像的中心点？

应该如何：

现在的状况：

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation {
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"driverPinId"];

    if (!annotationImage) {
        UIImage *image = [UIImage imageNamed:@"DriverPin"];
        annotationImageWithImage:image reuseIdentifier:@"driverPinId"];
    }

    return annotationImage;
}

我正在使用优步的react-map-gl软件包,但即使在尝试了几天之后,也无法让它运行起来.

我不是想做任何想象的事情 - 但是现在,我只想在我的页面上显示一张地图.我想,一旦我开始工作,我可以尝试更高级的东西.

不幸的是,这就是我所看到的:

有什么建议？

这是我的代码的相关部分(来自.jsx文件):

import React from 'react'
import { connect } from 'react-redux'
import MapGL from 'react-map-gl'

const App = React.createClass({

  render: function () {
    const map = (
        <div>
          <MapGL
            width={700}
            height={450}
            latitude={37.78}
            longitude={-122.45}
            zoom={11}
            mapStyle={'mapbox://styles/mapbox/basic-v9'}
            mapboxApiAccessToken={'pk.ey...<removed for privacy>...'}
          />
        </div>
      )

    return (
      <div>
        =======Map should be below=======
        <br/>
        { map }
        <br/>
        =======Map should be above=======
      </div>
    )
  }
})

export default connect()(App)

我网站上的其他所有内容都有效; 唯一缺少的是地图实际上并没有出现.提前感谢您提供的任何帮助.

我正在为使用Mapbox的GL JS通过Mapbox显示的地图设置一些弹出窗口样式.但是,我在他们的文档中找不到有关自动分配给弹出窗口的类.到目前为止,我的CSS看起来像这样:

.mapboxgl-Popup-content {
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 250px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

这产生了这些非常小的盒子:

我的问题是最底部的白色三角形指向标记.我想改变它的颜色.

我已经尝试了许多CSS类来解决这个问题.包括但不限于.mapboxgl-popup,.mapboxgl-popup-anchor,.mapboxgl-popup-pointer等.我不知道在哪里获取文档我需要知道我应该使用哪些CSS类来更改这个讨厌的三角形的颜色.

我正在使用Mapbox API制作一个正在运行的应用程序，并且正在努力设置MGLMapView的边界以适合用户通过运行创建的所有折线。Mapbox的JavaScript版本如下：https：//www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/

但是我不知道如何使用swift来实现它。我找不到fitBounds等效项。

我将每个CLLocationCoordinate2D存储到一个名为pointsArray的数组中，并将其与mapView一起传递给结果视图控制器。

我有找到数组中两个点之间的最长距离并将其设置为边界的方法，但是由于算法为O（n ^ 2），因此如果我有太多点，则计算起来会花费很长时间。在其他情况下，也无法满足所有要求。

如果您想查看任何特定的代码，请告诉我。不知道要显示什么，因为我没有合适的范围。

我正在尝试使用一些用户定义的svg图标作为传单上的标记，但是我认为整个任务对于我的浏览器来说太繁重了。

到目前为止，我一直在使用，L.circleMarker但是现在我不得不使用星号，箭头，星星等标记，因此我决定将它们作为svg路径，然后将其插入而不是我的circleMarkers。为了使事情更复杂，我获得了超过30万的积分。使用circleMarkers，我可以制作一个可行的图表，虽然速度不快，但可以接受，尤其是当使用相当深的缩放来区分各个点时（否则，一切就像一个大斑点，没有用处）。

但是，使用svg标记时，图表的计算量变得很大，以至于浏览器只能挂起。我玩过100、1000和10000分，即使有1000分，差异也很明显。请问对此有什么解决方案，有人使用带有大量数据点的svg标记吗？我认为我的代码中正确使用了canvas，尤其是对于canvas，circleMarkers但我可能会误会。任何帮助，高度赞赏。摘录中的代码，对底部的几行进行注释/取消注释：

return L.circleMarker(p, style(feature));

要么

console.log("Starting markers.")
return L.marker(p, {
    renderer: myRenderer,
    icon: makeIcon('6-pointed-star', style(feature).color),
    });

从切换circleMarkers到svg标记。非常感谢！

PS。使用svg标记，代码会因Highlight事件而中断，但是我已经很了解发生了什么错误。circleMarkers

return L.circleMarker(p, style(feature));