arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（四）—— geoJson数据的渲染（方式二）...

这种方式实现的主要原理就是 geoJson 利用 Bolb 生成url，然后直接生成GeoJSONLayer，最后添加到Map。通常要创建GeoJSONLayer 如下：const geoJSONLayer = new GeoJSONLayer({url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_mont...

花姐夫Jun

643人浏览 · 2021-11-01 15:21:18

花姐夫Jun · 2021-11-01 15:21:18 发布

这种方式实现的主要原理就是 geoJson 利用 Bolb 生成url，然后直接生成GeoJSONLayer，最后添加到Map。

通常要创建GeoJSONLayer 如下：

const geoJSONLayer = new GeoJSONLayer({
   url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
   copyright: "USGS Earthquakes",
});
map.add(geoJSONLayer);  // adds the layer to the map

url 是geoJson的文件路径，也可以是获取geoJson数据的接口路径，但是在实际开发过程中接口需要的参数太大必须使用post方式提交，这种情况下就不能直接使用接口的url获取geoJson数据，一种解决方式可以使用上一篇的 geoJson数据的渲染直接使用获取到的geoJson转换成arcgis api for js 可以直接使用的arcgisJson，生成graphic添加到map上，另一种方式是将获取到geoJson数据利用Blob生成url,生成GeoJSONLayer 最后添加到map上。

什么是 Blob?

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
Blob 表示的不一定是JavaScript原生格式的数据。 File 接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个 Blob，请使用 Blob()构造函数。

代码实现

   // 生成BlobUrl
    generateBlobUrl(data) {
        const blob = new Blob([JSON.stringify(data)], {
            type: 'application/json',
        });
        return URL.createObjectURL(blob);
    }

    // 创建geoJSONLayer
    createdGeoJSONLayer(geoJONData) {
        const url = this.generateBlobUrl(geoJONData);
        const geoJSONLayer = new GeoJSONLayer({
            url,
        });
        return geoJSONLayer;
    }

createdGeoJSONLayer(geoJsonData) 生成 GeoJSONLayer 。geoJsonData就是geoJson格式的数据。

上一篇：arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（三）—— geoJson数据的渲染（方式一）