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

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

1

2

3

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

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

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

参考资料：

openlayers 文档地址： https://openlayers.org/en/latest/apidoc/

绘图人员绘制完地图并配准后，发布到 GeoServer（一款基于 java 的开源 GIS 工具集），需在 GeoServer 上设置好投影坐标系（EPSG:3857即墨卡托坐标系，EPSG:4326即WGS84坐标系）、地图瓦片格式、坐标轴范围、地图原点、地图层级、分辨率等参数，一般由后台人员设置。

1、项目引入 openlayers

首先npm 安装 openlayers

注意，在 vue 中必须逐一声明所需的 openlayers 库的对象和方法才能正常使用

2、加载手绘地图

手绘地图以 WMTS （Web Map Tile Service, Web 地图瓦片形式）加载，先创建一个类型为 WMTS 的图层资源，再将其放入创建的 Map 对象的图层资源集合中。

以上，实现加载手绘地图后，移动至指定经纬度。

这样就完成了手绘地图底图的加载，后续如何为地图添加标注（含聚合标注）、覆盖物及路线等，可以查看我的另一篇文章： https://www.jianshu.com/p/4af2a52a0fc6

JSON数据：

[

{"name":"白银区","position":[103,37]},

{"name":"平川区","position":[103,38]},

{"name":"靖远县","position":[103,39]},

{"name":"景泰县","position":[103,40]},

{"name":"会宁县","position":[103,41]}

]

添加多个标注

$.getJSON('openlayers/json_map/tmp/1.json',function(data){

//创建新标注层

Mk_2 = new OpenLayers.Layer.Markers("白银")

//设定初始化标注不可见

Mk_2.setOpacity(1)

//根据JSON服务器传回的数据创建标注点

$.each(data, function(i,n){

//创建新标注

var Mk = new OpenLayers.Marker(new OpenLayers.LonLat(n.position).transform("EPSG:4326", "EPSG:900913"))

//为标注注册事件

Mk.events.register("mousedown", Mk,function(evt) {

alert(n.name)

OpenLayers.Event.stop(evt)

})

//把标注加进标注层里

Mk_2.addMarker(Mk)

})

//把标注添加到地图上

map.addLayer(Mk_2)

})

---