使用OpenLayers3实现鼠标移动并显示坐标

这篇文章运用简单易懂的例子给大家介绍使用OpenLayers3实现鼠标移动并显示坐标,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> 1。前言

鼠标移动显示坐标,OpenLayers 3框架提供了鼠标移动显示坐标的控件(ol.control。MousePosition),默认显示在地图的右上角,其样式可以自定义。在这个例子中,我们通过前面的加载OSM加载瓦片图层,实现在地图容器的左下角显示坐标点的信息。

<强> 2。实现思路

(1)新建一个网页,参考前面的加载OSM瓦片地图,实现加载瓦片地图。
(2)在地图容器中新建一个div用于显示坐标信息,并设置其样式,通过设置z - index让其显示到地图上面。
(3)实例化一个鼠标位置控件(ol.control。MousePosition),可以根基实际的需求设置其,参数,例如坐标系(投影),坐标值的显示格式(coordinateFormat),关联显示鼠标位置坐标点的目标容器(目标)等。
(4)在地图容器中加载到地图容器中。可以在实例化地图容器地图的代码中,通过设置控制参数加载鼠标位置控件,也可以调用地图对象的addControl方法加载控件。

<强> 3。实现代码如下:

html: