mapbox - 在地图上添加 GeoJSON 作为标记

Question

我的目标很简单，但我很难实现它。我尝试了不同的方法，许多示例和 tuts，但每次都失败了。

我需要什么：我通过 GeoJSON 文件提供的带有标记的简单地图。

我一直在尝试：

将 GeoJSON 作为 Tileset 导入 Mapbox（不能设置自定义图标，因此只有点看起来很难看）
加载 GeoJSON 本地和每个显示为标记（不起作用）

        var showInfoDialog = false;
		mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6IjdiOWEzZGIyMGNkOGY3NWQ4ZTBhN2Y5ZGU2Mzg2NDY2In0.jycgv7qwF8MMIWt4cT0RaQ';
		var map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/mapbox/dark-v9',
			center: [-74.0059, 40.7128],
			zoom: 15.5,
            pitch: 45,
            minZoom: 9,
            maxZoom: 18,
			bearing: -25.0,
           
		});
        
            
        
        map.once('style.load', function(e) {
            
            // Insert the layer beneath any symbol layer.
            var layers = map.getStyle().layers;

            var labelLayerId;
            for (var i = 0; i < layers.length; i++) {
                if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                    labelLayerId = layers[i].id;
                    break;
                }
            }
            
            map.addControl(new mapboxgl.GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true
                },
                trackUserLocation: true
            }));            

            if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
            
            map.addSource('geojson', {
                type: 'geojson',
                data: 'https:/xxxxx.json'
            });
              /*
             // add markers to map
            map.getSource('geojson').forEach(function(marker) {
                // create a DOM element for the marker
                var el = document.createElement('div');
                el.className = 'marker';
                el.style.backgroundImage = 'url(https://map.gogames.live/images/arena.png';
                el.style.width = marker.properties.iconSize[0] + 'px';
                el.style.height = marker.properties.iconSize[1] + 'px';

                el.addEventListener('click', function() {
                    window.alert(marker.properties.name);
                });

                // add marker to map
                new mapboxgl.Marker(el)
                    .setLngLat(marker.geometry.coordinates)
                    .addTo(map);
            });
            */
            
            
            //Hide loading bar once tiles from geojson are loaded
            map.on('data', function(e) {
                if (e.dataType === 'source' && e.sourceId === 'arenen') {
                    document.getElementById("loader").style.visibility = "hidden";
                }
            });
        });

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.map-overlay {
  position: absolute;
  width: 180px;
  top: 0;
  left: 10px;
  padding: 10px;
  margin-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 5px;
  z-index: 1;
}

.map-overlay .map-overlay-inner {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
  z-index: 1;
}

.map-overlay-inner fieldset {
  border: none;
  padding: 0;
  margin: 0 0 10px;
  z-index: 1;
}
/* Dark attribution */

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  background: rgba(0, 0, 0, .8);
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
  color: #fff;
}
/* Dark popup */

.mapboxgl-popup-content {
  background-color: #202020;
  color: #fff;
  margin-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 5px;
  z-index: 1000;
}

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #202020;
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: #202020;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #202020;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #202020;
}

#popup-menu ul,
#menu li {
  margin: 0;
  padding: 0;
  z-index: 100;
}

.mapboxgl-ctrl-group {
  -webkit-filter: invert(100%);
}

.loader {
  margin: -10px 0 0 -250px;
  height: 100px;
  width: 20%;
  position: fixed;
  text-align: center;
  padding: 1em;
  top: 50%;
  left: 50%;
  margin: 0 auto 1em;
  z-index: 9999;
}
/*
Set the color of the icon
*/

svg path,
svg rect {
    fill: #FF6700;
}

<!doctype html lang="de">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
</head>
<body>
	<div id="map"></div>
    <div class='map-overlay top'>
        <div class='map-overlay-inner'>
            <fieldset>
                <label><b>Special Map</b></label>
                
            </fieldset>
            <b><a href="x" target="_blank">Some Info</a></b>
        </div>
    </div>
     <div class="loader loader--style1" title="0" id="loader">
        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
            <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
            <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite" />
            </path>
        </svg>
    </div>

所以也许有人可以向我解释实现这一点的最佳实践是什么。谢谢

score 0 · Accepted Answer

您已添加源，但还需要向地图添加图层。您可以一步完成map.addLayer（参见 Mapbox 的示例）。

score 0 · Accepted Answer

尝试使用此代码下载 geojson 并将其显示在地图视图上。

guard let url = URL(string: urlString) else { return }
do {
       let data = try Data(contentsOf: url)
       let shape = try MGLShape(data: data, encoding: String.Encoding.utf8.rawValue)
       let shapeClass = shape.classForCoder

       if shapeClass == MGLPointFeature.self {
            if let pointFeature = shape as? MGLPointFeature {
                pointFeature.title = pointFeature.attributes["title"] as? String

                let shapeSource = MGLShapeSource(identifier: "PointShapeSource", shape: pointFeature, options: nil)

                let circleStyleLayer = MGLCircleStyleLayer(identifier: "PointCircleStyleLayer", source: shapeSource)
                circleStyleLayer.circleColor = NSExpression(forConstantValue: UIColor.orange)
                circleStyleLayer.circleStrokeWidth = NSExpression(forConstantValue: 24.0)
                circleStyleLayer.circleStrokeColor = NSExpression(forConstantValue: UIColor(red:1, green:0.76, blue:0.63, alpha:1.0))

                DispatchQueue.main.async(execute: {
                     [unowned self] in
                     self.mapView.setCenter(pointFeature.coordinate, animated: true)
                     self.mapView.style?.addSource(shapeSource)
                     self.mapView.style?.addLayer(circleStyleLayer)
                 })
           }
        }
} catch let error {
}

mapbox - 在地图上添加 GeoJSON 作为标记

2 回答 2

Related

Reference