<template>
<div class="myMap">
<div id="map" style="height: 100%; width: 100%;"></div>
</div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import Feature from "ol/Feature";
import {
OSM,
Vector as VectorSource,
} from "ol/source";
import Point from 'ol/geom/Point';
import {
Tile as TileLayer,
Vector as VectorLayer
} from "ol/layer";
import View from "ol/View";
import {
Icon,
Style,
} from 'ol/style';
import {
transform,
} from 'ol/proj';
import {
onMounted,
} from 'vue';
export default {
setup() {
let map = null;
onMounted(() => {
var osmLayer = new TileLayer({
source: new OSM()
});
var pointLayer = new VectorLayer({
source: new VectorSource()
});
map = new Map({
layers: [
osmLayer,
pointLayer,
target: "map",
view: new View({
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10,
});
var anchor = new Feature({
geometry: new Point([104.06, 30.67])
});
anchor.setStyle(new Style({
image: new Icon({
src: require("../assets/fy.jpg"),
anchor: [0.5, 1],
scale: 0.2
}));
pointLayer.getSource().addFeature(anchor);
return {}
</script>
<style lang="less" scoped>
.myMap {
height: 100%;
width: 100%;
#anchor {
cursor: pointer;
.navigate-container {
position: absolute;
bottom: 50px;
margin-left: 500px;
</style>
地理特征与几何和其他属性的矢量对象，类似于特征矢量文件格式如GeoJSON。
功能可以单独的设计setStyle; 否则，他们利用他们的矢量图层样式。
注意，属性设置为ol.Object 属性的特征对象，所以他们是可见的，并已获得/设置访问器。
通常，特性具有单个几何属性。你可以设置使用setGeometry 和get
地图标注是将空间位置点与该点的信息相关联，通过图标、文字等形式把点相关的信息展现到地图上。 随便打开一个电子地图就可以看到许多标注： 可以说地图没有了标注就丧失了一半信息，甚至是全部信息！ 地图标注的表现形式多样，包括简单的图片标注，文字标注，图文标注等。 OpenLayers可以使用ol.Feature类或者ol.Overlay类来实现标注。一、使用ol.Feat...
可以用setStyle设置样式，或者使用layer的样式。
所有的属性会被设置为基础属性，可以被get/set到。
feature都有一个单独的geometry，可以用setGeometry和getGeometry，或者用geometry参数指定。
如果想要使用另外一个geometry渲染，使用setGeometryName改变默认渲染的geometry名。
参数：Feature
<html xmlns='http://www.w3.org/1999/xhtml'>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-Compat
ol/geom和ol/Feature是 OpenLayers 中两个密切相关但功能不同的模块。ol/geom模块包含了一系列类，用于表示几何图形。这些类定义了地图上的各种形状，如点、线和多边形等。几何图形主要是关于空间位置和形状的信息，包含了坐标数据和相关的几何操作（例如计算长度、面积等）。ol/Feature是用于表示地图上的特征的类。特征不仅包含几何图形，还可以包含与几何图形相关的属性数据。ol/geom。
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
