Openlayer添加标记点（1）Openlayer 和ol 是什么关系？

tianyawhl

发布于 2021-03-02 16:20:54

1.9K0

发布于 2021-03-02 16:20:54

文章被收录于专栏：前端之攻略前端之攻略

Openlayer 和ol 是什么关系？

在使用Openlayer的时候可以npm install openlayers --save也可以使用 npm install ol --save 明显感觉前面安装特别慢。

网上查的资料2者的关系与区别

在4.0版本之前，`ol` 的确是 `openlayers` 的简称，但是在 4版本之后新增了 `ol package` 以便于更好的支持 `webpack gulp rollup` 等这些模块打包器，能做到按需引入。而且之前使用 npm 安装 `openlayers` 这个包时，因为它依赖了 `closure-util` 来进行编译，速度应该很慢。并且官方计划在5.0版本完全摆脱goog.require和goog.provide，放弃对closure-util的支持，使用ES模块来构建源码，详见 [releases]( openlayers/openlayers)。现在来说他们默认采用的是 ES module 构建，推荐在 angular vue react 这些构建型的项目使用 `ol` 包，`openlayers` 包是通过特殊的构建命令转过去的，主要是为了解决直接引用的方式。

加载标记点的一种方法是通过新建矢量图层，把所有的点加到这个矢量图层上，完整代码

    // 加载openLayer地图
    showOpenLayerMap(){
      let tileLayer
      let source 
      let center = [119.986658, 31.806713]
      if(this.mapState == "a"){
        // 可以加载瓦片地图和arcGis地图，并且不会存在跨域的问题，arcGis for js 会存在跨域问题
        source = new ol.source.XYZ({          
            url: "http://xxx.xxx.x.xx:8090/image/roadmap/{z}/{x}/{y}.png",      
        })
      }else if(this.mapState == "b"){
          source = new ol.source.TileArcGISRest({        
            url: 'http://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer', //World_Topo_Map 图层
            // projection:'EPSG:4326',          
          })
      }
      tileLayer = new ol.layer.Tile({
          source: source
      });

      this.OLMap = new ol.Map({
          view: new ol.View({
            projection: "EPSG:4326", // 经纬度       
            center: center,        
            zoom: 10,
            minZoom: 7, 
            maxZoom: 12,
          }),
          target: "OLMap",
          layers: [tileLayer],
        });
    },

  // 在地图上画点 -- ol地图  
  showOLmassMarkers(data){
    if(this.olLayer){
      this.OLMap.removeLayer(this.olLayer)
    }
   
    let iconFeatures=[]  // 保存所有的点Feature
    // 矢量图层
    this.olLayer = new ol.layer.Vector({
      source: new ol.source.Vector(),
    });
    // 不能采用异步方法
    for(let i=0;i<data.length;i++){
      let iconFeature = new ol.Feature({ 
          geometry: new ol.geom.Point(   //绘制图形（点）
            data[i] 
          ),
      }); 
      iconFeature.setStyle(         
          new ol.style.Style({
            image: new ol.style.Icon({
                scale:0.5,
                //控制标注图片和文字之间的距离
                // anchor: [0.2, 1],
                //标注样式的起点位置
                anchorOrigin: 'top-right',
                //X方向单位：分数
                anchorXUnits: 'fraction',
                //Y方向单位：像素
                anchorYUnits: 'pixels',
                //偏移起点位置的方向
                offsetOrigin: 'top-right',
                //透明度
                opacity: 1,
                //图片路径
                src:require("@/assets/imgs/mass0.png")
            
            }),
          },
          )
        ); 
        iconFeatures.push(iconFeature)         
    }
    // 加载多个点用addFeatures，一个点用addFeature
    this.olLayer.getSource().addFeatures(iconFeatures)  
    this.OLMap.addLayer(this.olLayer)
  },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

npm

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

npm

登录后参与评论

0 条评论

热度