catalogue
1. Reference development library:
5.1 creating picture annotation elements
5.2 setting the style of picture annotation elements
5.3 adding picture labels to layer data sources
6.1 creating text annotation features
6.2 setting text dimension style
6.3 adding text labels to layer data sources
7. Add graphic annotation object:
7.1 creating graphic annotation elements
7.2 setting text annotation style
7.3 add graphic labels to layer data source
8.1 get the HTML element to be converted to Overlay
8.2 add click event of close button (hide popup)
8.5 add click event listening for map, render pop-up
9. Add aggregation annotation:
9.2 creating aggregate annotation data sources
9.3 loading aggregate annotation data layers
1. [geometric elements] ol Feature
3. [aggregate data source class] ol source. Cluster
This paper mainly introduces how to use the world map of sky map to add annotation. The example needs to be implemented by using the [include openlayers local. JS] development library.
For text, pictures and text annotation, ol The feature () method builds the feature and loads it into the map. For the PopUp annotation, it is through ol The overlay() method constructs the overlay pop-up implementation. By ol source. The cluster () method creates an aggregate dimension data source.
The implementation effect is shown in the figure below:
Implementation steps
1. Reference development library:
This example introduces the development library through the local offline [include openlayers local. JS] script;
2. Create a map container:
Create a div with id="mapCon" and set its style;
3. Create a map object class:
Create a map object and set the necessary parameters of the map;
4. Add vector layer:
Build a vector layer (used to store annotation data) and add the layer to the map;
vectorSource = new ol.source.Vector({
features: [],
})
//Vector dimension layer
vectorLayer = new ol.layer.Vector({
source: vectorSource,
})
map.addLayer(vectorLayer)5. Add picture labels:
Construct the point geometric feature, set its style as picture annotation, and add the point to the vector layer;
5.1 creating picture annotation elements
//Create a new feature ol Feature
var newFeature = new ol.Feature({
//Geometric information
geometry: new ol.geom.Point(coordinate),
})5.2 setting the style of picture annotation elements
function createImageStyle(feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}type*/
image: new ol.style.Icon({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//Icon scale
// scale:0.5,
//transparency
opacity: 0.75,
//The url of the icon
src: './static/assets/olimages/label/blueIcon.png',
}),
})
}
//Style features
newFeature.setStyle(createImageStyle(newFeature))5.3 adding picture labels to layer data sources
//Add new features to the data source vectorSource.addFeature(newFeature)
6. Add text annotation:
Construct the point geometric feature, set its style as text annotation, and add the point to the vector layer;
6.1 creating text annotation features
//Create a new feature ol Feature
var newFeature = new ol.Feature({
//Geometric information
geometry: new ol.geom.Point(coordinate),
//Name attribute
name: 'Dimension point',
})6.2 setting text dimension style
function createTxtStyle(feature) {
return new ol.style.Style({
text: new ol.style.Text({
//position
textAlign: 'center',
//Datum line
textBaseline: 'middle',
//Text style
font: 'normal 14px Microsoft YaHei ',
//Text content
text: feature.get('name'),
//Text fill pattern (i.e. text color)
fill: new ol.style.Fill({ color: '#aa3300' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
}),
})
}
//Style features
newFeature.setStyle(createTxtStyle(newFeature))6.3 adding text labels to layer data sources
vectorSource.addFeature(newFeature)
7. Add graphic annotation object:
Construct the point geometric feature, set its style as graphic annotation, and add the point to the vector layer;
7.1 creating graphic annotation elements
//Create a new feature ol Feature
var newFeature = new ol.Feature({
//Geometric information
geometry: new ol.geom.Point(coordinate),
//Name attribute
name: 'Dimension point',
})7.2 setting text annotation style
function createImgTxtLabelStyle(feature) {
return new ol.style.Style({
image: new ol.style.Icon(
/** @type {olx.style.IconOptions} */
({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//Icon scale
// scale:0.5,
//transparency
opacity: 0.75,
//The url of the icon
src: './static/assets/olimages/label/blueIcon.png',
})
),
text: new ol.style.Text({
//position
textAlign: 'center',
//Datum line
textBaseline: 'middle',
//Text style
font: 'normal 14px Microsoft YaHei ',
//Text content
text: feature.get('name'),
//Text fill pattern (i.e. text color)
fill: new ol.style.Fill({ color: '#aa3300' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
}),
})
}
//Style features
newFeature.setStyle(createImgTxtLabelStyle(newFeature))7.3 add graphic labels to layer data source
//Add new features to the data source vectorSource.addFeature(newFeature)
8. Add PopUP:
8.1 get the HTML element to be converted to Overlay
container = document.getElementById('popup')
content = document.getElementById('popup-content')
closer = document.getElementById('popup-closer')8.2 add click event of close button (hide popup)
/**
* Add click event for close button (hide popup)
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
//Pop location is not defined
popup.setPosition(undefined)
//Lose focus
closer.blur()
return false
}8.3 create Overlay
if (popup == null) {
popup = new ol.Overlay(
/** @type {olx.OverlayOptions} */
({
//HTML element to convert to overlay
element: container,
//The current window is visible
autoPan: true,
//Where the Popup is placed
positioning: 'bottom-center',
//Should events be stopped propagating to the map window
stopEvent: false,
autoPanAnimation: {
//When the Popup exceeds the map boundary, the speed at which the map moves in order to make the Popup all visible
duration: 250,
},
})
)
}
map.addOverlay(popup)8.4 setting pop-up contents
//Example annotation point Beijing information object
var featuerInfo = {
geo: [116.28, 39.54],
att: {
//Title Content of annotation information
title: 'Beijing(Capital of the people's Republic of China)',
//Annotation details link
titleURL: 'http://www.openlayers.org/',
//Introduction to annotation content
text: 'Beijing( Beijing)，Beijing, the capital of the people's Republic of China and a municipality directly under the central government, is China's political, cultural and International Exchange Center',
//Annotated picture
imgURL: './static/assets/olimages/label/bj.png',
},
}
/**
* Dynamically create the specific content of the pop
* @param {string} title
*/
function addFeatrueInfo(info) {
//Add a element
var elementA = document.createElement('a')
elementA.className = 'markerInfo'
elementA.href = info.att.titleURL
//elementA.innerText = info.att.title;
setInnerText(elementA, info.att.title)
// Add a child node to the new div element
content.appendChild(elementA)
//Add div element
var elementDiv = document.createElement('div')
elementDiv.className = 'markerText'
//elementDiv.innerText = info.att.text;
setInnerText(elementDiv, info.att.text)
// Add div child node for content
content.appendChild(elementDiv)
//New img element
var elementImg = document.createElement('img')
elementImg.className = 'markerImg'
elementImg.src = info.att.imgURL
// Add img child nodes for content
content.appendChild(elementImg)
}
/**
* Dynamically set element text content (compatible)
*/
function setInnerText(element, text) {
if (typeof element.textContent == 'string') {
element.textContent = text
} else {
element.innerText = text
}
}8.5 add click event listening for map, render pop-up
map.on('click', function(evt) {
//Judge whether there is a feature at the current click, and pop up when the feature is captured
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature
})
if (feature) {
//Empty the content container of pop
content.innerHTML = ''
//Load the specific information of the current feature in the pop
addFeatrueInfo(featuerInfo)
popup.setPosition(feature.getGeometry().getCoordinates())
}
})9. Add aggregation annotation:
By constructing vector layers and associating aggregation data sources, the aggregation annotation effect is realized.
9.1 creating a feature array
//This example creates 10000 features
var count = 10000
var features = new Array(count)
for (var i = 0; i < count; ++i) {
var coordinates = [Math.random() * 360 - 180, Math.random() * 180 - 90]
features[i] = new ol.Feature(new ol.geom.Point(coordinates))
}
vectorSource.addFeatures(features)9.2 creating aggregate annotation data sources
//Aggregate dimension data sources
var clusterSource = new ol.source.Cluster({
distance: 30,
source: vectorSource,
wrapX: false,
})9.3 loading aggregate annotation data layers
//Load vector layers for aggregated dimensions
var styleCache = {}
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature, resolution) {
var size = feature.get('features').length
var style = styleCache[size]
if (!style) {
style = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
}),
]
styleCache[size] = style
}
return style
},
})
map.addLayer(clusters)Key interface
1. [geometric elements] ol Feature
See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/Feature
2. [overlay type] ol Overlay
See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/Overlay
3. [aggregate data source class] ol source. Cluster
See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/source/Cluster