ol添加图形和一些地图文件

加载地图

加载地图包括：天地图，kml数据，geojson数据（本人暂时只做了这一些）

1. 天地图的加载：首先要导入一些模块

import TileLayer from 'ol/layer/Tile';
import Map from 'ol/Map.js';

然后就可以进行地图的生成
首先加载天地图矢量文件，即创建一个矢量图层

var veclayer = new TileLayer({
   
name: "天地图矢量图层",
source: new XYZ({
   
    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图密钥" ,
    wrapX: false
})
});

将矢量图层加载到Map中

var map = new Map({
   
 target:'map',//这是用于显示地图的html块标签的id，表示目标位置

 layers:[veclayer],
 
//视图，表示打开页面时首先显示的范围，center是显示中心，projection为投影
 view: new View({
   
     center:[113,20],
     zoom:2,
     projection:'EPSG:4326'
 })
});

2. KML数据的加载,导入以下三个（函数？）

import KML from 'ol/format/KML';
import {
   Vector} from 'ol/source.js';
import VectorLayer from 'ol/layer/Vector'

首先创建一个KML的source层，用于加载在矢量图层上

var vecsourcekml = new Vector({
   
 url:'本地路径',
 format: new KML(),
})

若是根据之前的设置从‘dist’文件下开始找文件需要在‘dist’文件夹下存放kml数据geojson数据也一样。当然目前还只是一个source层，不能加载在map中，需要创建一个矢量层

var veckml = new VectorLayer({
   
 source:vecsourcekml 
})

之后添加在map中就行了
3. geojson数据的加载类似与kml数据

绘制图形

1 需要用到的函数 以及html页面元素

import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import {
   createRegularPolygo