OpenLayers怎么在地图上添加文字标注或者文字说明

把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：

1

2

3

var div = document.createElement('div')// 新增元素

var diva = document.getElementById('a')// 获取id为a的元素

diva.parentNode.insertBefore(div, diva)// 在这个元素前面增加上去

<script src="<%=basePath%>static/js/jquery/jquery-2.2.4.min.js">

<script src="<%=basePath%>static/js/openlayers/ol.js"></script>

let map

let vectorLayer

$(function(){

   initMap()

})

function initMap() {

const extent = [0, 0,3000,2000]

var projection =new ol.proj.Projection({

code:'xkcd-image',

        units:'pixels',

        extent: extent

})

vectorLayer =new ol.layer.Vector({

source:new ol.source.Vector()

})

map =new ol.Map({

layers: [

new ol.layer.Image({

source:new ol.source.ImageStatic({

url:'../../static/img/pigFarm/map.jpg',//这里添加静态图片的地址

                    projection: projection,

                    imageExtent: extent

})

}), vectorLayer

        ],

        target:'map',

        view:new ol.View({

          projection: projection,

            center:ol.extent.getCenter(extent),

            minZoom:3,

            zoom:3,

            maxZoom:3

            }),

        //加载控件到地图容器中

            controls:ol.control.defaults({

zoom:false,

            rotate:false,

            attribution:false

        }).extend([

])

})

    let iconStyle =getIconStyle('../../static/img/security/cameraIcon.png', map.getView().getZoom() /5)

    setFeature('1',  1450, 950, iconStyle)

    setFeature('1-pig', 1535, 980, getTextStyle("保育舍"))

    setFeature('2',  1800, 820, iconStyle)

    setFeature('2-room', 1875, 845, getTextStyle("产房"))

    setFeature('3',  1950, 720, iconStyle)

    setFeature('3-fat', 2035, 750, getTextStyle("妊娠舍"))

    setFeature('7',  1900, 1050, iconStyle)

    setFeature('7-sow', 1980, 1080, getTextStyle("育肥舍"))

    setEventListener()

    map.on('pointermove',function(e) {

var pixel=map.getEventPixel(e.originalEvent)

        var feature=map.forEachFeatureAtPixel(pixel,function (feature) {

return feature

        })

if(feature==undefined){

map.getTargetElement().style.cursor="auto"

        }else{

map.getTargetElement().style.cursor="pointer"

        }

})

}

//添加图标

function setFeature(id, x, y, style) {

var feature =new ol.Feature({

geometry:new ol.geom.Point([x, y])

})

    if (id !=null) {

feature.setId(id)

    }

feature.setStyle(style)

    vectorLayer.getSource().addFeature(feature)

}

function getIconStyle(src, scale) {

return new ol.style.Style({

image:new ol.style.Icon(({

anchor: [0.5, 1],

            src: src,

            scale: scale

})),

    })

}

function getTextStyle(text2) {

return new ol.style.Style({

text:new ol.style.Text({

font:'18 sans-serif',

            scale:2,

            text: text2,

            fill:new ol.style.Fill({

color:'#1976ff'

            }),

            stroke:new ol.style.Stroke({

color:'#fff',

                width:3

            })

})

})

}

function setEventListener() {

map.on('click', function (e1) {

e1.preventDefault()

        let f1 =map.forEachFeatureAtPixel(e1.pixel,

            function (feature) {

return feature

            })

        if (f1 !=null) {

let fId = f1.getId()

            const num = fId.split('')

            showVideo(num[0])

}else {

}

})

}

通常需要在地图上标注出一些景点、建筑或者公共设施，可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上，再将矢量层添加到地图上叠加显示；聚合标注的原理同上，但它适用于标注的数据量非常大的场景，随着层级的放大，会展示更多的标注，缩小时，则将标注聚合显示，能够在大量加载标注时提高渲染性能。

1、矢量标注

2、聚合标注

openlayers 可以创建一个 Overlay 覆盖层，这个覆盖层能够展示自己写的 html 内容，从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注，但覆盖层添加的覆盖物会影响地图的拖动（即在覆盖物上进行滑动 *** 作时地图无法响应，虽然可以通过设置 stopEvent 将滑动事件传递到地图上，但这样会导致在IOS端的覆盖物无法进行点击 *** 作）。

因此如果要添加可以点击并且不影响地图拖动的标注时，建议使用矢量层标注，而如果要展示自定义的一些内容，如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。

1、加载覆盖层

2、添加地图点击监听事件

原理大致与添加矢量标注相同，都是添加在矢量图层上，不过这里添加的是线对象。

---