目录

1、准备 

2、瓦片地图显示

3、增加矢量图层

4、利用click实现鼠标点击效果

       在常见的导航软件中，往往都存在标记起/止点的需求。毕竟路径规划中的重要传入参数就是起止点坐标。在常用的不管是移动端还是PC端，导航地图上一般在选择起止点位置会留下图标标记。如下是在PC端百度地图上的截图：

        但是显示方式是右击鼠标选择起点、终点、途径点。如下： 

        本文最终获得的效果展示：

起止点图标交互式显示

1、准备 

        基于此，这篇文章则是基于OpenLayers简单地实现导航地图上(起/终)点的交互式图标显示。首先准备的资源包括：ol的库文件css和js，再加上起点/终点图标png文件。

2、瓦片地图显示

        使用瓦片数据作为地图，通过服务的方式加载显示，具体的显示方式参考以前写过的文章：地图瓦片数据的多种利用形式以及瓦片数据的浏览显示_nanke_yh的博客-CSDN博客_瓦片数据https://blog.csdn.net/nanke_yh/article/details/125212932

        效果：

3、增加矢量图层

        在地图上增加点图标，则需要在地图之上增加一个矢量图层。

    //创建矢量图层var vecSource = new ol.source.Vector();var vecLayer = new ol.layer.Vector({source: vecSource});vecSource.clear();map.addLayer(vecLayer);//添加到map里面

4、利用click实现鼠标点击效果

	//鼠标点击实现地图上显示起止点图标    var clickcount = 0;$("#map").click(function (e){if(clickcount>=2){//重置点击次数vecSource.clear();clickcount = 0;}var selCoords = map.getEventCoordinate(e);var cPoint = new ol.geom.Point([selCoords[0]*1,selCoords[1]*1]);if(clickcount == 0){//起点var startPtFeature = new ol.Feature(cPoint);//设置自己的样式：图标形式startPtFeature.setStyle(new ol.style.Style({image: new ol.style.Icon({src: 'locate_start.png'})}));vecSource.addFeature(startPtFeature);}else{//终点var endPtFeature = new ol.Feature(cPoint);//设置自己的样式：图标形式endPtFeature.setStyle(new ol.style.Style({image: new ol.style.Icon({src: 'locate_end.png'})}));vecSource.addFeature(endPtFeature);}clickcount++;})

最终效果如下：