参考文章

引用css/js

  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
  2. <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>

初始化OpenLayers 地图

  1.  var map = new ol.Map({
  2.    target: 'map',
  3.    layers: [nativeOsmLayer],
  4.    view: new ol.View({
  5.      center: ol.proj.fromLonLat([37.41, 8.82]),
  6.      zoom: 4，
  7.      minZoom: 10,
  8.      maxZoom: 21
  9.   })
  11. });

地图瓦片数据源 new ol.layer.Tile

  1. let nativeOsmLayer = new ol.layer.Tile({
  2.   source: new ol.source.TileWMS({
  3.     url: baseMapUrl,
  4.     /* 参数 */
  5.     params: {
  6.       LAYERS: baseLayer, //此处可以是单个图层名称，也可以是图层组名称，或多个图层名称
  7.       TILED: true,
  8.       FORMAT: "image/png"
  9.     },
  10.     serverType: "geoserver" //服务器类型
  11.   })
  12. });

创建marker（矢量图层的数据来源 ol.source.Vector ）

  • 包含四个事件，addfeature，changefeature，clear，removefeature。

    1. /*  矢量标注的数据源 进行数据操作  eventMarker放入全局对数据进行操作*/
    2. let eventMarker = new ol.source.Vector({
    3.   features: []
    4. });
    5. /* 将数据源添加地图上（我们需要一个vector的layer来放置图标）*/
    6. let eventLayer = new ol.layer.Vector({
    7.   source: eventMarker,
    8.   visible: true, //设置true或者false是否显示 默认true显示
    9.   name: "ccc" //设置图层名称，根据名称查找图层
    10. });
    11. this.map.addLayer(eventLayer);

  • 另一种方式 ( 未亲测 ) ```javascript let layer = new ol.layer.Vector({ source: new ol.source.Vector(), })

this.map.addLayer(layer); / 创建一个features，并设置好放在地图上的位置 / let anchor = new ol.features({ geometry: new ol.geom.Point([104,30]) }) anchor.setStyle(new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 30], //锚点 anchorOrigin: “top-right”, //锚点源 anchorXUnits: “fraction”, //锚点X值单位 anchorYUnits: “pixels”, //锚点Y值单位 offsetOrigin: “top-right”, //偏移原点 opacity: 1, scale:1,//图片大小用缩放控制 src:’img/anchor.png’ }), }); ) layer.getSource().addFeature(anchor)

  1. <a name="TmPfi"></a>
  2. #### 创建矢量图层图标 addFeature
  3. ```javascript
  4. /*
  5. item-marker数据
  6. type-自定义图层名称 
  7. layerName-添加marker到哪个图层 
  8. eventOrSingImg-交通事件和交通标志的图片
  9. */
  10. function creatMarker(item, type, layerName, eventOrSingImg){
  11.   let wgs84 = [item.longitude,item.latitude];
  12.   let eventFeature = new ol.Feature({
  13.     geometry: new ol.geom.Point(translateInMap(wgs84)), //几何信息
  14.     layerType:type,
  15.     //因为openlayers是setStyle置空图层 那么再次点击需要找到自身图片
  16.     imgUrl:eventOrSingImg,
  17.     data:item
  18.   });
  19.   eventFeature.setStyle(createNodeStyle(img_address));
  20.   /* 将数据添加到矢量图数据源中 */
  21.   eventMarker.addFeature(eventFeature);
  22. }
  23. //****************************坐标点转换为大地坐标系*************************
  24. translateInMap(center) {
  25.   return ol.proj.fromLonLat(center);
  26. },
  27. //****************************坐标点转换为wgs84******************************
  28. transFormMap(center) {
  29.   let pos = [
  30.     parseFloat(center[0]),
  31.     parseFloat(center[1])
  32.   ];
  33.   return pos = ol.proj.transform(pos, "EPSG:3857", "EPSG:4326");
  34. },

获取数据源数据设置样式 getFeatures()

  1. let allEventMarker = eventMarker.getFeatures();
  2. for (let i = 0; i < allEventMarker.length; i++) {
  3.    var img_address  = "1.png";
  4.    allEventMarker[i].setStyle(createNodeStyle(img_address,'',0.5))
  5. }
  7. function createNodeStyle(imgurl,scale=1) {
  8.   return new ol.style.Style({
  9.         image: new ol.style.Icon({
  10.            color: 'rgba(255, 184, 0, 0.56)',//图标着色
  11.            anchor: [0.5, 30], //锚点
  12.            anchorOrigin: "top-right", //锚点源
  13.            anchorXUnits: "fraction", //锚点X值单位
  14.            anchorYUnits: "pixels", //锚点Y值单位
  15.            offsetOrigin: "top-right", //偏移原点
  16.            opacity: 1,
  17.            scale:1,//图片大小用缩放控制
  18.            src:imgurl
  19.        }),
  20.    });
  21. }

添加控件

  1. // 实例化比例尺控件
  2. let scaleLineControl = new ol.control.ScaleLine({
  3. // 设置比例尺单位为degrees、imperial、us、nautical或metric（度量单位）
  4.   units: "metric"
  5. });
  6. map.addControl(scaleLineControl);

地图放大缩小

  1. const view = map.getView();
  2. const zoom = view.getZoom();
  3. view.setZoom(zoom + 1);
  4. view.setZoom(zoom - 1);

添加鼠标右键菜单

  1. <template>
  2.   <div 
  3.       v-show="menuShow"
  4.       id="contextmenu_container" 
  5.       ref="contextmenu"
  6.       class="contextmenu"
  7.   >
  8.     <ul>
  9.         <div @click="creatNode">设置事件发生地点</div>
  10.         <li v-for="(item,index) in this.addForm.pathPoints">
  11.             <div @click="setStart(index)">设置上游起点{{index+1}}</div>
  12.             <div @click="setEnd(index)">设置下游终点{{index+1}}</div>
  13.         </li>
  14.     </ul>
  15.    </div>
  16. </template>
  17. <script>
  18.   export default {
  19.     methods:{
  20.     //添加鼠标右键
  21.         addMenu_over(){
  22.             var self = this;
  23.             this.menuShow = true;
  24.             /*使用这个 html 元素初始化一个 overlay，并将 overlay 添加到地图中*/
  25.             this.menu_overlay= new ol.Overlay({
  26.                 element: document.getElementById("contextmenu_container"),
  27.                 positioning: 'right-top'
  28.             });
  29.             this.map.addOverlay(self.menu_overlay);
  31.             $(self.map.getViewport()).unbind('contextmenu').on("contextmenu", function(event){
  32.                 event.preventDefault();//屏蔽自带的右键事件
  33.                 var pixel = [event.clientX,event.clientY];
  34.                 /*获取地图相应的点击坐标*/
  35.                 var coordinate =  self.map.getEventCoordinate(event.originalEvent);
  36.                 self.coordinate = coordinate;
  37.                 /*设置 overlay 的显示位置*/
  38.                 self.menu_overlay.setPosition(coordinate);
  39.             });
  41.         },
  42.     }
  43.   }          
  44. </script>

右键菜单隐藏

  1. this.menu_overlay.setPosition(undefined);