如何通过方法添加标记,openlayers 4,角度4 [英] How to add marker by method, openlayers 4, angular 4
问题描述
我想在地图中添加实时位置标记.
第一步,我只想在地图中显示一个静态点(纬度,经度)或标记,由 addMarker 定义我的代码中的方法.
这是我的代码:
I want to add live position markers in my map.
As first step i just want to show one static point (lat, lon) or marker in my map, definded by the addMarker method in my code.
Here is my code:
import {Component, OnInit, AfterViewInit, ViewEncapsulation, Input, ElementRef, ViewChilds} from '@angular/core';
import { WmslayerService} from './wmslayer.service';
import { MapService} from './map.service';
import {AddwmslayerService} from '../../menue/addlayer/formlayer/addwmslayer.service';
import * as ol from 'openlayers';
@Component({
selector: 'olmap',
encapsulation: ViewEncapsulation.None,
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
iconFeatures = [];
layername: string;
layerurl: string;
mapId2: string;
mapIndex: number;
layerName: string;
layer = [];
layers = [];
constructor(private mapService: MapService, private wmslayerService: WmslayerService,
private addLayerService: AddwmslayerService, private tempdatagiaService: TempdatagiaService,
private geomqttService: GeomqttService) {}
ngAfterViewInit() {
setTimeout (() => {
let map = new ol.Map({
target: this.mapId2,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
//vector
],
view: new ol.View({
center: ol.proj.fromLonLat([6.661594, 50.433237]),
zoom: 3,
})
});
//// for loop, to add some layer
for (let layer of this.wmslayerService.layer) {
console.log(layer);
let examplelayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: layer.layerurl,
params: {
'LAYERS': layer.layername,
'TILED': true
},
projection: 'EPSG:4326',
serverType: 'geoserver'
})
});
this.layers.push(examplelayer);
map.addLayer(examplelayer);
}
this.mapIndex = this.mapService.addMap(map);
this.layername = this.layerName;
console.log(this.mapIndex);
},300)}
// -- addlayer dynamicly--
addNewLayer(url: string, name: string) {
console.log(name);
let addedlayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: url,
params: {
'LAYERS': name,
'TILED': true
},
projection: 'EPSG:4326'
})
});
this.layers.push(addedlayer);
this.mapService.getMap(this.mapIndex).addLayer(addedlayer);
}
addMarker(lon: string, lat: string) {
console.log(lat);
console.log(lon);
var iconFeatures = [];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
iconFeatures.push(iconFeature);
var vectorSource = new ol.source.Vector({
features: iconFeatures //add an array of features
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
}))
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
map.addLayer(vectorLayer);
}
}
最后一行map.addLayer(vectorLayer);
不起作用.
addMarker方法将由click事件触发.
我如何使该方法起作用?
有没有更好的主意或稳定的解决方案,可以在openlayers 4地图中显示实时数据点?
The last line map.addLayer(vectorLayer);
is not working.
The addMarker method will be triggered by a click event.
How could i get the method working?
Has someone a better idea or a stable solution to show live datapoints in an openlayers 4 map?
推荐答案
您不需要每次想要显示其他标记时都创建新图层.通常,创建单个标记层"并在其源中添加功能通常会更容易.您只需要保留对图层源的引用并在其上调用addFeature
.
You do not need to create a new layer every time you want to show an additional marker. It's usually easier to create a single "marker layer" and just add features to it's source. All you need is keeping a reference to the layer's source and call addFeature
on it.
坐标不是字符串,而是小数点:addMarker(lon: decimal, lat: decimal)
Coordinates are not strings, but decimals: addMarker(lon: decimal, lat: decimal)
const markerSource = new ol.source.Vector();
var markerStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
}))
});
let map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
new ol.layer.Vector({
source: markerSource,
style: markerStyle,
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([6.661594, 50.433237]),
zoom: 3,
})
});
function addMarker(lon, lat) {
console.log('lon:', lon);
console.log('lat:', lat);
var iconFeatures = [];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
markerSource.addFeature(iconFeature);
}
map.on('singleclick',function(event){
var lonLat = ol.proj.toLonLat(event.coordinate);
addMarker(lonLat[0], lonLat[1]);
});
#map {
/* just for testing purposes */
width: 100%;
min-width: 240px;
max-width: 500px;
height: 200px;
}
<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<button onclick="addMarker(8.54, 47.37)">add marker at 8.54, 47.37</button>
<div id="map"></div>
这篇关于如何通过方法添加标记,openlayers 4,角度4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!