<template>
<div>
<div
id="map"
class="map"
></div>
</div>
</template>
<script>
// openLayers地图引入文件
import "ol/ol.css" // ol.css文件
import { Feature, Map, View } from "ol"; // 引入Map对象
import XYZ from "ol/source/XYZ" // 使用自定义
import TileLayer from "ol/layer/Tile" // 瓦片图层
import { transform } from "ol/proj" // 将坐标从源投影转换为目标投影。这将返回一个新的坐标(并且不会修改原始坐标)
import {
Vector as VectorLayer, // 图标图层
} from "ol/layer";
import { Vector } from "ol/source";
import { Point, LineString } from 'ol/geom';
import { Style, Icon, Text, Fill } from 'ol/style';
export default {
data () {
return {
/**ol new Map({}) */
map: {},
/**icon图标的坐标 */
coordarr: [[104, 30], [150, 60]],
/** ol.source.Vector 图标图层数据源 */
vectorSource: null,
/**ol.layer.Tile 地图数据源 */
rasterLayer: null,
/**ol.layer.Vector 图标图层的弹层组件 */
vectorLayer: null,
/**添加icon使用的id */
addFeatureid: 1,
/**删除icon使用的id */
removeFeatureid: 2,
/**添加线使用的id */
addLineId: 1,
/**删除线使用的id */
romoveLineId: 1,
/**计时器 */
change: null
}
},
mounted () {
const that
openLayers v6.13.0 简单图标、线的添加删除
于 2022-04-24 18:26:06 首次发布
本文介绍了如何在OpenLayers v6.13.0中添加和删除简单的图标及线条。通过为每个图标和线分配唯一ID,可以方便地实现它们的增删操作,确保地图元素的动态管理。文中还提供了操作后的实际效果图。
摘要由CSDN通过智能技术生成