【openlayers框架学习】六：绘制点、圆、文字标注

---

---

openlayers入门

20 openlayers中的要素实现绘制点

//通过ol中提供的要素（feature）
//创建要素（点 线 面）并且将要素绘制到底图上
//1.创建一个点要素，并且在这个点要素绘制一个简单的icon,在武汉上绘制一个小的logo
const iconFeature = new Feature({geometry:new Point([114.25,30.59])
});
iconFeature.setStyle(new Style({image: new Icon({src:'/icon.jpeg',}),}),
);
const iconSource = new Vector({features:[iconFeature],
});
const IconLayer = new VectorLayer({source:iconSource,
});
map.addLayer(IconLayer);

21 openlayers中使用canvas绘制圆

//通过ol中提供的要素（feature）
//创建要素（点 线 面）并且将要素绘制到底图上
//1.创建一个点要素，并且在这个点要素绘制一个简单的icon,在武汉上绘制一个小的logo
const iconFeature = new Feature({geometry:new Point([114.25,30.59])
});
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(16,16,8,0,2*Math.PI);
ctx.fill();
iconFeature.setStyle(new Style({image: new Icon({img:canvas,// size:[160,160], //调整圆的大小，与canvas.width和canvas.geight作用相同// width:160,// height:160,}),}),
);
// iconFeature.setStyle(
//     new Style({
//         image: new Icon({
//             src:'/icon.jpeg',
//         }),
//     }),
// );
const iconSource = new Vector({features:[iconFeature],
});
const IconLayer = new VectorLayer({source:iconSource,
});
map.addLayer(IconLayer);

22 地图点击事件实现标注功能(addFeature)

main.js

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Feature from 'ol/Feature';
import { Point } from 'ol/geom';
import { Vector } from "ol/source";
import Icon from 'ol/style/Icon';
const center = [114.25, 30.59];
const view = new View({center: center,zoom: 4,projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({source: gaodeSource,
});
const map = new Map({target: "map",view: view,layers: [gaodeLayer],
});
//通过ol中提供的要素（feature）
//创建要素（点 线 面）并且将要素绘制到底图上
//1.创建一个点要素，并且在这个点要素绘制一个简单的icon,在武汉上绘制一个小的logo
const iconFeature = new Feature({geometry:new Point([114.25,30.59])
});
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(16,16,8,0,2*Math.PI);
ctx.fill();
iconFeature.setStyle(new Style({image: new Icon({img:canvas,// width:160,// height:160,}),}),
);
const iconSource = new Vector({features:[iconFeature],
});
const IconLayer = new VectorLayer({source:iconSource,
});
map.addLayer(IconLayer);
map.on('click',function(e){const coordinate = e.coordinate;const iconFeature = new Feature({geometry:new Point(coordinate),});iconFeature.setStyle(new Style({image: new Icon({img:canvas,width:30,height:30,}),}),);iconSource.addFeature(iconFeature);
});

23 openlayers内置circle绘制圆（style->image:CircleStyle）

import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill';
map.on('click',function(e){const coordinate = e.coordinate;const iconFeature = new Feature({geometry:new Point(coordinate),});iconFeature.setStyle(new Style({image: new CircleStyle({fill: new Fill({color:"green",}),radius: 10,}),}),);iconSource.addFeature(iconFeature);
});

24 openlayers添加文字标注（Style->text）

import Text from 'ol/style/Text.js';
map.on('click',function(e){const coordinate = e.coordinate;const iconFeature = new Feature({geometry:new Point(coordinate),});iconFeature.setStyle(new Style({image: new CircleStyle({fill: new Fill({color:"green",}),radius: 10,}),text: new Text({text:'圆',fill: new Fill({color:'black',}),// offsetX: -10,offsetY: -15,}),}),);iconSource.addFeature(iconFeature);
});