Vue2+OpenLayers实现折线绘制功能（提供Gitee源码）
目录
一、案例截图
二、安装OpenLayers库
npm install ol三、代码实现
3.1、初始变量
关键代码：
data() {
return {
map:null,
// 定义路径坐标
pointList: [
[120.430070,31.938140],
[120.428570,31.939100],
[120.429530,31.941680],
[120.431240,31.943580],
[120.432410,31.944820],
[120.433600,31.943970],
],
}
},3.2、画一条折线
思路：
1、使用Feature类，LineString代表线段，传入经纬度集合创建线特征。
2、VectorSource用于存储矢量特征的数据源，这里创建的矢量源存储刚刚创建的lineFeature。
3、VectorLayer创建一个矢量层，在地图的不同z-index（层级）上显示特征。z-index设置为1，确保线条在其他图层之上绘制，将创建的矢量层添加到地图上，使得线条得以在地图上可视化。
关键代码：
drawLine(){
// 创建线特征
const lineFeature = new Feature({
geometry: new LineString(this.pointList),
});
// 设置线样式
const lineStyle = new Style({
stroke: new Stroke({
color: '#25C2F2',
width: 4,
lineDash: [10, 8], // 使用点划线 数组的值来控制虚线的长度和间距
}),
});
lineFeature.setStyle(lineStyle);
// 创建矢量层并添加特征
const vectorSource = new VectorSource({
features: [lineFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
zIndex: 1
});
// 将矢量层添加到地图
this.map.addLayer(vectorLayer);
// 设置地图视图以适应路径
this.map.getView().fit(lineFeature.getGeometry().getExtent(), {
padding: [20, 20, 20, 20],
maxZoom: 18,
});
},3.3、完整代码
<template>
<div>
<div id="map-container"></div>
</div>
</template>
<script>
import {Feature, Map, View} from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import {LineString, Point} from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {Icon, Stroke, Style} from "ol/style";
export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
}
export default {
data() {
return {
map:null,
// 定义路径坐标
pointList: [
[120.430070,31.938140],
[120.428570,31.939100],
[120.429530,31.941680],
[120.431240,31.943580],
[120.432410,31.944820],
[120.433600,31.943970],
],
}
},
mounted(){
this.initMap() // 加载矢量底图
},
methods:{
initMap() {
const KEY = '你申请的KEY'
this.map = new Map({
target: 'map-container',
layers: [
// 底图
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
layer: 'vec', // 矢量底图
matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影
style: "default",
crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
format: "tiles", //请求的图层格式，这里指定为瓦片格式
wrapX: true, // 允许地图在 X 方向重复（环绕）
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
}),
// 标注
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
layer: 'cva', //矢量注记
matrixSet: 'c',
style: "default",
crossOrigin: 'anonymous',
format: "tiles",
wrapX: true,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
})
],
view: new View({
center: [118.958366,32.119577],
projection: projection,
zoom: 12,
maxZoom: 17,
minZoom: 1
}),
//加载控件到地图容器中
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
});
this.drawLine();
},
//画线
drawLine(){
// 创建线特征
const lineFeature = new Feature({
geometry: new LineString(this.pointList),
});
// 设置线样式
const lineStyle = new Style({
stroke: new Stroke({
color: '#25C2F2',
width: 4,
lineDash: [10, 8], // 使用点划线 数组的值来控制虚线的长度和间距
}),
});
lineFeature.setStyle(lineStyle);
// 创建矢量层并添加特征
const vectorSource = new VectorSource({
features: [lineFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
zIndex: 1
});
// 将矢量层添加到地图
this.map.addLayer(vectorLayer);
// 设置地图视图以适应路径
this.map.getView().fit(lineFeature.getGeometry().getExtent(), {
padding: [20, 20, 20, 20],
maxZoom: 18,
});
},
},
}
</script>
<style scoped>
#map-container {
width: 100%;
height: 100vh;
}
</style>四、Gitee源码
原文地址：https://blog.csdn.net/HJW_233/article/details/145159164
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！