标签: mapbox

在这里,我的javascript代码在地图中以及该地图的fitBounds之后渲染标记.

地图边界根据geojson得到拟合,但问题是当地图上有任何标记并且我尝试拟合边界时,地图图块图像不会得到渲染.

在地图中,它只显示标记,没有平铺图像.

var latLongCollection = [];
    var map;
    $(document).ready(function() {
    map();
    });


    function map() {
      map = L.mapbox.map('DivId', 'ProjectId');
      GetData();
     }

    function GetData() {
       $.ajax({
           type: "GET",
           url: someUrl,
           dataType: "json",
           contentType: "application/json; charset=utf-8",
           success: AjaxSuccess,
           error: function () {
           }
       });
    }

     function AjaxSuccess(data) {
      if (data == null || data.length == 0) {
          return;
      }

      var geoJson = {
          "type": "FeatureCollection",
          "features": []
      };

      $.each(data, function (index, value) {

          var latitude = parseFloat(value.Latitude),
              longitude = parseFloat(value.Longitude);

          if …

工作mapboxgl与ionic3,angular4和科尔多瓦.

我已经构建了.apk和.ipa文件.我在我的Android设备上安装了.apk文件,它按预期工作(ie mapbox tiles, my icons (I have added some icons to custom some functionalities for eg. added an icon to switch the map style) and my markers are loaded successfully).

当我在我的Iphone中安装.ipa文件时,我的图标只加载但mapbox图块没有加载.也是标记.我得到空白的白色屏幕.

我的实施有什么问题？

let data = {myJson data};

mapboxgl.accessToken = 'My access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
attributionControl: false,
center: [-74.50, 40],
zoom: 12
});

map.on('load', function () {
 map.addSource("place", {
    type: "geojson",
   data: data,
   cluster: true,
   clusterMaxZoom: 14, …

我在我的Angular 2/4应用程序中导入模块,如下所示:

import { MapboxDraw } from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';

并在其中一个组件中使用它:

var draw = new MapboxDraw({
   displayControlsDefault: false,
   controls: {
     polygon: true,
     trash: true
   }
});

map.addControl(draw);

但是当我打开页面时收到错误:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor

导入mapbox-gl-draw的最佳方法是什么？

我尝试在Mapbox中加载geoJson数据并使用插件Leaflet.Draw对其进行编辑

这是一个例子:小提琴

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

var geojson = {
  "type": "FeatureCollection",
  "features": [ ...........  ]
}


L.geoJson(geojson).addTo(featureGroup);

当我点击编辑按钮时,我有一个错误:

未捕获的TypeError:无法读取未定义的属性"enable"

对象似乎是可编辑的,但我无法修改它.

在mapbox 绘图层中添加geojson对象的正确方法是什么？

我目前正在寻找使用mapbox对所有注释进行排序.

我知道我应该使用以下过程:

//implementing this method and do the sort here   
(NSComparator)annotationSortingComparatorForMapView:(RMMapView *)mapView

// remove current annotation and use the sorted array to redraw them
[mapView removeAnnotations:[mapView annotations]];
[mapView addAnnotations:annotationSorted];

这里的问题是我迷失了我应该称之为这个过程的地方.

我实际上是mapView:layerForAnnotation:用来返回应该绘制的形状,但如果我没有错,那么它是一个回调,所以不是从代码中调用的.

谢谢你的帮助.

编辑:

感谢jszumski,我想出了一个实现.对于那些在未来需要它的人来说,它是:

- (NSComparator)annotationSortingComparatorForMapView:(RMMapView *)RmapView
{
    NSComparator sort =^(RMAnnotation *annotation1, RMAnnotation *annotation2)
    {
        // Sort user location annotations above all.
        //
        if (   annotation1.isUserLocationAnnotation && ! annotation2.isUserLocationAnnotation)
            return NSOrderedDescending;

        if ( ! annotation1.isUserLocationAnnotation &&   annotation2.isUserLocationAnnotation)
            return NSOrderedAscending;

        // Amongst user location annotations, sort properly.
        //
        if …

我正在使用Mapbox和Leaflet处理地图,我应该让用户绘制多边形并计算并显示该多边形的数量,我还需要让用户绘制折线并显示折线的距离.

我已经找到了多边形区域特征,但我无法弄清楚如何计算折线的距离.

我的代码如下:

loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js', function(){
    loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js', function(){
        var featureGroup = L.featureGroup().addTo(map);

        var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: featureGroup
        },
        draw: {
            polygon: true,
            polyline: true,
            rectangle: false,
            circle: false,
            marker: false
        }
    }).addTo(map);

    map.on('draw:created', showPolygonArea);
    map.on('draw:edited', showPolygonAreaEdited);

    function showPolygonAreaEdited(e) {
        e.layers.eachLayer(function(layer) {
            showPolygonArea({ layer: layer });
        });
    }
    function showPolygonArea(e) {
        var type = e.layerType,
        layer = e.layer;

        if (type === 'polygon') {
            featureGroup.clearLayers();
            featureGroup.addLayer(e.layer);
            e.layer.bindPopup(((LGeo.area(e.layer) / 1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>');
            e.layer.openPopup();
        }

        if (type === …

如何将点作为单个要素添加到多边形？根据GeoJson规范,这被称为"GeometryCollection".

'GeometryCollection'的示例:

{ "type": "GeometryCollection",
"geometries": [
  { "type": "Point",
    "coordinates": [100.0, 0.0]
    },
  { "type": "LineString",
    "coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
    }
 ]
}

我尝试在多边形特征中添加一个点,但我无法在地图集地图上显示它,因为我猜它是无效的GeoJson.

任何人都知道这样做的正确方法是什么？网上没有太多的例子可供使用.

我的看法:[jsfilddle]

var myRegions = {
 "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometries": [
        {
            "type": "Point",
            "coordinates": [
            61.34765625,
            48.63290858589535
            ]
      },
        {
        "type": "Polygon",
        "coordinates": [
          [
            [
              59.94140624999999,
              50.65294336725709
            ],
            [
              54.931640625,
              50.90303283111257
            ],
            [
              51.943359375,
              51.04139389812637
            ],
            [
              50.9765625,
              48.19538740833338
            ],
            [
              52.55859375,
              46.46813299215554 …

我找不到任何关于如何使用自定义创建的地图样式的示例.

在地图框页面上,我为地图创建了一个样式.

我怎样才能将这种风格用于传单？

例如:

var map = L.map('map', {
    center: [43.64701, -79.39425],
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

我在哪里放mapbox://styles/ficht/cihqdfw3f004ybnm35e7zefon？

这是地图:

https://api.mapbox.com/styles/v1/ficht/cihqdfw3f004ybnm35e7zefon.html?title=true&access_token=pk.eyJ1IjoiZmljaHQiLCJhIjoiY2locWQ3YTBtMDAxYnY1bHVvcGtsM2Y1MCJ9.C8NlGmZuX6W2YrvXTHULeQ#1.6044619216776894/37.74890243399017/28.62971087861783/0.08751522544480395

iOS上的mapBox地图需求.(我不是在谈论MKMapView)我们如何检测是否在mapView上点击了singleTap或注释？我需要singleTap仅在地图的空白区域(没有引脚)处理,并且当我点击引脚时调用didSelectAnnotation.

但我在android上发现我们有这样的方法

mapboxMap.setOnMapClickListener(new MapboxMap.OnMapClickListener() {
            public void onMapClick(@NonNull LatLng point) {
                Toast.makeText(getActivity(),"on Tap "+point.getLatitude(),Toast.LENGTH_LONG).show();
            }
        });

以及那个

mapboxMap.setInfoWindowAdapter(new MapboxMap.InfoWindowAdapter() { ... }) 将显示注释.

我们在iOS中没有相同的概念吗？

实际的问题是,在iOS的是,当我添加singleTapGesture上Mapbox的MapView的

UITapGestureRecognizer *singleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
[self.mapView addGestureRecognizer:singleTapGesture];

mapbox的mapView的委托方法不会调用.

- (nullable UIView <MGLCalloutView> *)mapView:(MGLMapView *)mapView calloutViewForAnnotation:(id <MGLAnnotation>)annotation;

要确保委托方法必须调用,那么我不必使用 singleTapGesture

这里的情况要么是这个,要么就是这样,但根据我的需要,我需要两者.

期待任何解决方案.谢谢,

尝试在mapboxgl中显示箭头以指示方向。该箭头仅在高缩放时可见，而在低缩放时不可见。

使用添加图像图层 'symbol-placement': 'line'

线层

  map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'mapSource',
          'filter': ['==', '$type', 'LineString'],
          'layout': {
            'line-join': 'round',
            'line-cap': 'round'
          },
          'paint': {
            'line-color': '#3cb2d0',
            'line-width': {
              'base': 1.5,
              'stops': [[1, 0.5], [8, 3], [15, 6], [22, 8]]
            }
          }
        });

箭头层

const url = 'img/arrow.png'
    map.loadImage(url, (err, image) => {
      if (err) { return; }
      map.addImage('arrow', image);
      map.addLayer({
        'id': 'arrowId',
        'type': 'symbol',
        'source': 'mapSource',
        'layout': {
          'symbol-placement': 'line',
          'symbol-spacing': 1,
          'icon-allow-overlap': true,
          // 'icon-ignore-placement': true,
          'icon-image': 'arrow', …