Openlayers根据kml文件绘制地图_vue+openlayers 加载kml

亲测可用 

// 按需导入的相关配置
import { Style, Stroke, Fill } from "ol/style";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from 'ol/source';
import KML from 'ol/format/KML';
 
...
 
// 颜色配置
var styles = new Style({
    fill: new Fill({
        color: 'blue'
     }),
     stroke: new Stroke({
         color: 'red',
         width: 2
      })
});
 
// 配置kml图层
var vectorSource2 = new VectorSource({
    url: 'doc.kml', // 这个地址是从public文件夹中读取
    format: new KML({
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857',
        extractStyles: false //至关重要
    }),
    projection: 'EPSG:3857'
});
var kmlLayer = new VectorLayer({
    source: vectorSource2,
    style: styles,
    zIndex:100
});
 
this.map.addLayer(kmlLayer); // 这个map是new map() 的地图

另外详细例子可看官网KML使用介绍：KML (openlayers.vip)

其他小点：

1. 验证kml文件是否正确可通过天地图官网，导入该文件查看，地址如下国家地理信息公共服务平台_天地图_在线地图
2. 将 shp 文件转 kml：可用 ArcGIS 软件转换。软件地址直达：https://pan.baidu.com/s/1SFiUKGukGjH9scHU4xoybg?pwd=hpb9 
   提取码：hpb9
3. kmz 文件转 kml 文件（注:kmz是 kml 压缩后的位置信息）：将kmz文件直接重命名为 zip或rar 后缀名，然后解压可得到 kml 文件