Question

在上一个问题中，有人问过具有地图样式的图像叠加层：

How do I add a simple image overlay in Mapbox Javascript?

我可以使用他们的示例，但是我想使用自己的样式。

这里是my map style的链接。

这是他们使用的有效样式：

mapbox：// styles / mapbox / satellite-v9

这是我的风格，不起作用：

mapbox：// styles / nittyjee / ck0fasve30an21cpalmwct518

下面是有效的代码，您可以自己运行它。我的风格被注释掉了。

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add an image</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.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.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 = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';


        var map = new mapboxgl.Map({
            container: 'map',
            maxZoom: 5.99,
            minZoom: 4,
            zoom: 5,
            center: [-75.789, 41.874],
            //Style from Stack Overflow:
            style: 'mapbox://styles/mapbox/satellite-v9'
            //My style does not work:
            //style: 'mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518'
        });

        map.on('load', function() {
            map.addSource("myImageSource", {
                "type": "image",
                "url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
                
                "coordinates": [
                    [-80.425, 46.437],
                    [-71.516, 46.437],
                    [-71.516, 37.936],
                    [-80.425, 37.936]
                ]
            });

            map.addLayer({
                "id": "overlay",
                "source": "myImageSource",
                "type": "raster",
                "paint": {
                "raster-opacity": 0.85
                }
            });
        });
    </script>

</body>

</html>

Answer 1

您需要提高mapbox-gl版本。您使用的是较旧的SDK。

将脚本/ css定义更改为此：

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />

Answer 2

这看起来不像样式URL https://docs.mapbox.com/help/glossary/style-url/

您需要在Mapbox Studio中创建样式并获取样式ID。

Answer 3

在Studio中查看样式时，可以单击右上角的19/09/23 08:57:38 ERROR util.Utils: Exception encountered java.io.StreamCorruptedException: invalid type code: 30 at java.io.ObjectInputStream.readObject0(ObjectInputStream.java:1601) at java.io.ObjectInputStream.defaultReadFields(ObjectInputStream.java:2287) at java.io.ObjectInputStream.defaultReadObject(ObjectInputStream.java:561) at org.apache.spark.rdd.ParallelCollectionPartition$$anonfun$readObject$1.apply$mcV$sp(ParallelCollectionRDD.scala:74) at org.apache.spark.rdd.ParallelCollectionPartition$$anonfun$readObject$1.apply(ParallelCollectionRDD.scala:70) at org.apache.spark.rdd.ParallelCollectionPartition$$anonfun$readObject$1.apply(ParallelCollectionRDD.scala:70) at org.apache.spark.util.Utils$.tryOrIOException(Utils.scala:1371) at org.apache.spark.rdd.ParallelCollectionPartition.readObject(ParallelCollectionRDD.scala:70) at sun.reflect.GeneratedMethodAccessor35.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at java.io.ObjectStreamClass.invokeReadObject(ObjectStreamClass.java:1170) at java.io.ObjectInputStream.readSerialData(ObjectInputStream.java:2178) at java.io.ObjectInputStream.readOrdinaryObject(ObjectInputStream.java:2069) at java.io.ObjectInputStream.readObject0(ObjectInputStream.java:1573) at java.io.ObjectInputStream.defaultReadFields(ObjectInputStream.java:2287) at java.io.ObjectInputStream.readSerialData(ObjectInputStream.java:2211) at java.io.ObjectInputStream.readOrdinaryObject(ObjectInputStream.java:2069) at java.io.ObjectInputStream.readObject0(ObjectInputStream.java:1573) at java.io.ObjectInputStream.readObject(ObjectInputStream.java:431) at org.apache.spark.serializer.JavaDeserializationStream.readObject(JavaSerializer.scala:75) at org.apache.spark.serializer.JavaSerializerInstance.deserialize(JavaSerializer.scala:114) at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:376) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748) 19/09/23 08:57:38 ERROR util.Utils: Exception encountered 19/09/23 08:57:38 WARN scheduler.TaskSetManager: Lost task 3.0 in stage 218.0 (TID 10452, CANTSHARE_URL, executor 6): java.io.StreamCorruptedException: invalid type code: 30 at java.io.ObjectInputStream.readObject0(ObjectInputStream.java:1601) at java.io.ObjectInputStream.defaultReadFields(ObjectInputStream.java:2287) at java.io.ObjectInputStream.defaultReadObject(ObjectInputStream.java:561) at java.lang.Thread.run(Thread.java:748) 19/09/23 08:57:38 INFO scheduler.DAGScheduler: ShuffleMapStage 218 (run at ThreadPoolExecutor.java:1149) failed in 0.120 s due to Job aborted due to stage failure: Task 9 in stage 218.0 failed 4 times, most recent failure: Lost task 9.3 in stage 218.0 (TID 10466, CANTSHARE_URL, executor 6): java.io.StreamCorruptedException: invalid type code: 30 at org.apache.spark.serializer.JavaDeserializationStream.readObject(JavaSerializer.scala:75) at org.apache.spark.serializer.JavaSerializerInstance.deserialize(JavaSerializer.scala:114) at org.apache.spark.executor.Executor$TaskRunner.run(Executor.scala:376) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748)。

然后从那里，您应该看到一个面板，其中包含一个名为Share的部分。如果您复制该链接并将其粘贴到您的代码中，则样式应该正确。

您还可以单击样式旁边的3个点，然后在出现的面板底部复制样式ID：

添加我自己的样式在MapBox Javascript中不起作用

3 个答案: