devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

二十二、openlayers官网示例Custom Drag-and-Drop (KMZ)解析——拖拽KMZ,、GPX、GeoJSON、IGC、 KML、 TopoJSON文件到地图上解析成矢量图层_openlayers kmz

作者：爱喝兽奶帝天荒 | 2024-08-04 14:41:25

赞

踩

openlayers kmz

官网demo地址： 

Custom Drag-and-Drop (KMZ)icon-default.png?t=N7T8https://openlayers.org/en/latest/examples/drag-and-drop-custom-kmz.html

 这个示例展示了如何拖拽文件到地图上并实时解析成矢量图层 

首先来看看什么是KMZ

KMZ和KML有什么区别？

KML格式：
  1. 文件格式：KML文件是基于XML的纯文本文件。
  2. 文件扩展名：.kml
  3. 内容：
    • 包含地理要素和数据，例如点、线、面、图像叠加以及其他地理信息。
    • 结构清晰，可读性强，可以用文本编辑器打开查看和编辑。
  4. 大小：因为是纯文本文件，KML文件可能会变得非常大，尤其是包含大量详细地理数据时。
KMZ 格式：
  1. 文件格式：KMZ文件是KML文件的压缩版本。
  2. 文件扩展名：.kmz
  3. 内容：
    • KMZ文件是一个ZIP压缩包，里面包含一个或多个KML文件以及其他相关资源（如图片、模型等）。
    • 主KML文件通常命名为doc.kml。
    • 可以包含多个文件和文件夹，使得相关资源可以一起分发。
  4. 大小：由于KMZ是压缩文件，通常比对应的KML文件要小，便于分发和下载。
  5. 多媒体资源：KMZ文件可以打包包括图片、3D模型（如Collada文件）等多媒体资源，这些资源可以在解压后保持相对路径关系。

 由此可知，KMZ格式转化成KML格式只需要进行解压，所以这里创建了一个KMZ类继承了KML，重写了readFeature和readFeatures两个方法，在解析之前增加了解压操作。

  1.  class KMZ extends KML {
  2.       constructor(opt_options) {
  3.         const options = opt_options || {};
  4.         options.iconUrlFunction = getKMLImage;
  5.         super(options);
  6.       }
  7.  
  8.       getType() {
  9.         return "arraybuffer";
  10.       }
  11.  
  12.       readFeature(source, options) {
  13.         const kmlData = getKMLData(source);
  14.         return super.readFeature(kmlData, options);
  15.       }
  16.  
  17.       readFeatures(source, options) {
  18.         const kmlData = getKMLData(source);
  19.         return super.readFeatures(kmlData, options);
  20.       }
  21.     }

解压用到了 JSZip库

  1.  const zip = new JSZip();
  2.     function getKMLData(buffer) {
  3.       let kmlData;
  4.       zip.load(buffer);
  5.       const kmlFile = zip.file(/\.kml$/i)[0];
  6.       if (kmlFile) {
  7.         kmlData = kmlFile.asText();
  8.       }
  9.       return kmlData;
  10.     }

我们也来下载一下，官网用的版本是2.6.1，如果下最新版用法可能会不一样，所以下载的时候指定一下版本号。

  1. npm i jszip@2.6.1
  2.  
  3. import  JSZip from "jszip";

 然后是拖拽操作，创建了一个交互DragAndDrop， defaultInteractions() 就是获取了OpenLayers提供的默认交互集合，包括地图的平移、缩放、双击缩放、鼠标滚轮缩放等基本交互。

  1.  const dragAndDropInteraction = new DragAndDrop({
  2.       formatConstructors: [KMZ, GPX, GeoJSON, IGC, KML, TopoJSON],
  3.     });
  4.  
  5.     const map = new Map({
  6.       interactions: defaultInteractions().extend([dragAndDropInteraction]),
  7.       layers: [
  8.         new TileLayer({
  9.           source: new OSM(),
  10.         }),
  11.       ],
  12.       target: "map",
  13.       view: new View({
  14.         center: [0, 0],
  15.         zoom: 2,
  16.       }),
  17.     });

监听addfeatures事件，当有新feature添加之后会增加一个矢量图层，并且让地图定位到feature的位置。

  1. dragAndDropInteraction.on("addfeatures", function (event) {
  2.       const vectorSource = new VectorSource({
  3.         features: event.features,
  4.       });
  5.       map.addLayer(
  6.         new VectorLayer({
  7.           source: vectorSource,
  8.         })
  9.       );
  10.       map.getView().fit(vectorSource.getExtent());
  11.     });

鼠标在地图上经过或点击就会获取feature上的属性展示到表格中 

  1.  map.on("pointermove", function (evt) {
  2.       if (evt.dragging) {
  3.         return;
  4.       }
  5.       const pixel = map.getEventPixel(evt.originalEvent);
  6.       displayFeatureInfo(pixel);
  7.     });
  8.  
  9.     map.on("click", function (evt) {
  10.       displayFeatureInfo(evt.pixel);
  11.     });

 能展示的前提是数据里有这些属性。

  1. const displayFeatureInfo = function (pixel) {
  2.       const features = [];
  3.       map.forEachFeatureAtPixel(pixel, function (feature) {
  4.         features.push(feature);
  5.       });
  6.       if (features.length > 0) {
  7.         const info = [];
  8.         let i, ii;
  9.         for (i = 0, ii = features.length; i < ii; ++i) {
  10.           const description =
  11.             features[i].get("description") ||
  12.             features[i].get("name") ||
  13.             features[i].get("_name") ||
  14.             features[i].get("layer");
  15.           if (description) {
  16.             info.push(description);
  17.           }
  18.         }
  19.         document.getElementById("info").innerHTML =
  20.           info.join("<br/>") || "&nbsp";
  21.       } else {
  22.         document.getElementById("info").innerHTML = "&nbsp;";
  23.       }
  24.     };

接下来把官网提供的KMZ样例数据下载下来就可以测试了

下载下来是这样的

 然后拖到地图上就可以显示了。

除了KML数据我们也下一个GeoJson数据试试。

到这个网站

DataV.GeoAtlas地理小工具系列

选择下载文件

下载之后是json文件，手动把文件后缀名改成GeoJson。 

 然后拖到地图上即可解析。

完整代码：

  1. <template>
  2.   <div class="box">
  3.     <h1>拖拽KMZ, GPX, GeoJSON, IGC, KML, TopoJSON文件到地图上直接绘制矢量图层</h1>
  4.     <div id="map"></div>
  5.     <br />
  6.     <div id="info">&nbsp;</div>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. import Map from "ol/Map.js";
  12. import View from "ol/View.js";
  13. import {
  14.   DragAndDrop,
  15.   defaults as defaultInteractions,
  16. } from "ol/interaction.js";
  17. import { GPX, GeoJSON, IGC, KML, TopoJSON } from "ol/format.js";
  18. import { OSM, Vector as VectorSource } from "ol/source.js";
  19. import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
  20. import  JSZip from "jszip";
  21. export default {
  22.   name: "",
  23.   components: {},
  24.   data() {
  25.     return {
  26.       map: null,
  27.     };
  28.   },
  29.   computed: {},
  30.   created() {},
  31.   mounted() {
  32.     const zip = new JSZip();
  33.     function getKMLData(buffer) {
  34.       let kmlData;
  35.       zip.load(buffer);
  36.       const kmlFile = zip.file(/\.kml$/i)[0];
  37.       if (kmlFile) {
  38.         kmlData = kmlFile.asText();
  39.       }
  40.       return kmlData;
  41.     }
  42.  
  43.     function getKMLImage(href) {
  44.       const index = window.location.href.lastIndexOf("/");
  45.       if (index !== -1) {
  46.         const kmlFile = zip.file(href.slice(index + 1));
  47.         if (kmlFile) {
  48.           return URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
  49.         }
  50.       }
  51.       return href;
  52.     }
  53.  
  54.    
  55.  
  56.     class KMZ extends KML {
  57.       constructor(opt_options) {
  58.         const options = opt_options || {};
  59.         options.iconUrlFunction = getKMLImage;
  60.         super(options);
  61.       }
  62.  
  63.       getType() {
  64.         return "arraybuffer";
  65.       }
  66.  
  67.       readFeature(source, options) {
  68.         const kmlData = getKMLData(source);
  69.         return super.readFeature(kmlData, options);
  70.       }
  71.  
  72.       readFeatures(source, options) {
  73.         const kmlData = getKMLData(source);
  74.         return super.readFeatures(kmlData, options);
  75.       }
  76.     }
  77.  
  78.  
  79.     const dragAndDropInteraction = new DragAndDrop({
  80.       formatConstructors: [KMZ, GPX, GeoJSON, IGC, KML, TopoJSON],
  81.     });
  82.  
  83.     const map = new Map({
  84.       interactions: defaultInteractions().extend([dragAndDropInteraction]),
  85.       layers: [
  86.         new TileLayer({
  87.           source: new OSM(),
  88.         }),
  89.       ],
  90.       target: "map",
  91.       view: new View({
  92.         center: [0, 0],
  93.         zoom: 2,
  94.       }),
  95.     });
  96.  
  97.     dragAndDropInteraction.on("addfeatures", function (event) {
  98.       const vectorSource = new VectorSource({
  99.         features: event.features,
  100.       });
  101.       map.addLayer(
  102.         new VectorLayer({
  103.           source: vectorSource,
  104.         })
  105.       );
  106.       map.getView().fit(vectorSource.getExtent());
  107.     });
  108.  
  109.     const displayFeatureInfo = function (pixel) {
  110.       const features = [];
  111.       map.forEachFeatureAtPixel(pixel, function (feature) {
  112.         features.push(feature);
  113.       });
  114.       if (features.length > 0) {
  115.         const info = [];
  116.         let i, ii;
  117.         for (i = 0, ii = features.length; i < ii; ++i) {
  118.           const description =
  119.             features[i].get("description") ||
  120.             features[i].get("name") ||
  121.             features[i].get("_name") ||
  122.             features[i].get("layer");
  123.           if (description) {
  124.             info.push(description);
  125.           }
  126.         }
  127.         document.getElementById("info").innerHTML =
  128.           info.join("<br/>") || "&nbsp";
  129.       } else {
  130.         document.getElementById("info").innerHTML = "&nbsp;";
  131.       }
  132.     };
  133.  
  134.     map.on("pointermove", function (evt) {
  135.       if (evt.dragging) {
  136.         return;
  137.       }
  138.       const pixel = map.getEventPixel(evt.originalEvent);
  139.       displayFeatureInfo(pixel);
  140.     });
  141.  
  142.     map.on("click", function (evt) {
  143.       displayFeatureInfo(evt.pixel);
  144.     });
  145.   },
  146.   methods: {},
  147. };
  148. </script>
  149.  
  150. <style lang="scss" scoped>
  151. #map {
  152.   width: 100%;
  153.   height: 500px;
  154. }
  155. .box {
  156.   height: 100%;
  157. }
  158.  
  159. #info {
  160.   width: 100%;
  161.   height: 24rem;
  162.   overflow: scroll;
  163.   display: flex;
  164.   align-items: baseline;
  165.   border: 1px solid black;
  166.   justify-content: flex-start;
  167. }
  168. </style>
  169.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/928281
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号