openlayers框选得到在选框内的要素，并标注出这些要素的名称
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
openlayers框选得到在选框内的要素，并标注出这些要素的名称
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<link rel="stylesheet" href="https:///en/v5.3.0/css/ol.css"/>
7<script type="text/javascript" src="https:///en/v5.3.0/build/ol.js"></script>
8<title>Document</title>
9</head>
10<body>
11<div id="map"></div>
12<div id="selectedFeatures"></div>
13<script>
14var beijing = ol.proj.fromLonLat([116.28, 39.54]);
15var map = new ol.Map({
16 target: 'map',
17 layers: [
18new yer.Tile({
19 source: new ol.source.OSM()
20 })
21 ],
22 view: new ol.View({
23 center: beijing,
24 zoom: 4
25 })
26 });
27
28//实例化⽮量点要素，通过⽮量图层添加到地图容器中
29//这样就实现了预先加载图⽂标注
30var iconFeature = new ol.Feature({
31 geometry: new ol.geom.Point(beijing),
32 name: '北京市', //名称属性
33 population: 2115 //⼈⼝数（万）
34 });
35//设置点要素样式
36 iconFeature.setStyle(createLabelStyle(iconFeature));
37//⽮量标注的数据源
38var vectorSource = new ol.source.Vector({
39 features: [iconFeature]
40 });
41//⽮量标注图层
42var vectorLayer = new yer.Vector({
43 source: vectorSource
44 });
45 map.addLayer(vectorLayer);
46
47//⽮量标注样式设置函数，设置image为图标ol.style.Icon
48function createLabelStyle(feature){
49// console.log(feature);
50return new ol.style.Style({
51 image: new ol.style.Icon({
52 anchor: [0.5, 60], //锚点
53 anchorOrigin:'top-right', //锚点源
54 anchorXUnits: 'fraction', //锚点X值单位
55 anchorYUnits: 'pixels', //锚点Y值单位
56 offsetOrigin: 'top-right', //偏移原点
57 opacity: 0.75,
58 scale: 0.05,
59 src: 'https:///timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%%2Felement_pic%2F17%2F10%2F27
60 }),
61 text: new ol.style.Text({
62 textAlign: 'center', //位置
63 textBaseline: 'bottom', //基准线
64 font: 'normal 12px 微软雅⿊', //⽂字样式
65 text: feature.get('name'), //⽂本内容
66 fill: new ol.style.Fill({ //⽂本填充样式（即⽂字颜⾊)
67 color: '#000'
68 }),
69 stroke: new ol.style.Stroke({
70 color: '#F00',
71 width: 2
72 })
73 })
74 });
75 }
76var coordinate1 = [10806361.310845079, 3942927.667062532]; //⿏标单击点的坐标
77var coordinate2 = [11540156.782382771, 4539747.983913189] //⿏标单击点的坐标
78var coordinate3 = [12225032.55581795, 3982063.4255445423] //⿏标单击点的坐标
79var arr =[coordinate1,coordinate2,coordinate3]
80//新建⼀个要素ol.Feature
81 arr.forEach((ar,index) => {
82var newFeature = new ol.Feature({
83 geometry: new ol.geom.Point(ar), //⼏何信息
84 name: '标注点'+index
85 });
86 newFeature.setStyle(createLabelStyle(newFeature)); //设置要素样式
87 vectorSource.addFeature(newFeature);
88 });
89
90var draw = new ol.interaction.Draw({
91 source: vectorLayer.getSource(),
92 type:"Circle",
93 style:new ol.style.Style({
94// 将点设置成圆形样式
95 image: new ol.style.Circle({
96// 点的颜⾊
97 fill: new ol.style.Fill({
98 color: '#F00'
99 }),
100// 圆形半径
101 radius: 5
102 }),
103// 线样式
104 stroke: new ol.style.Stroke({
105 color: '#0F0',
106 lineCap: 'round', // 设置线的两端为圆头
107 width: 5
108 })
109 }),
110 geometryFunction: ol.interaction.Draw.createBox() // 使画出来的现状为矩形
111
112 });
113 map.addInteraction(draw);
114 draw.on('drawend',function(evt){
115var polygon = evt.feature.getGeometry();
116 setTimeout(function(){ //如果不设置延迟，范围内要素选中后⾃动取消选中，具体原因不知道
117var extent = polygon.getExtent()
118var features = vectorLayer.getSource().getFeaturesInExtent(extent); //先缩⼩feature的范围
119var str = "";
120for(var i=0;i<features.length;i++){
121var newCoords = features[i].getGeometry().getCoordinates();
122if (features[i].get("name")) {
123 str += "<div class=\"selectedItem\" οnclick='showDeviceOnMap(\""+features[i].getId()+"\");'>"+features[i].get("name")+"</div>"; 124 }
125 }
126 document.getElementById('selectedFeatures').innerHTML = str
127 },300)
128 })
129</script>
130</body>
131</html>
原创：https:///wwj007/p/14029494.html。