【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);
});