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` 包是通过特殊的构建命令转过去的，主要是为了解决直接引用的方式。
加载标记点的一种方法是通过新建矢量图层，把所有的点加到这个矢量图层上，完整代码
代码语言：javascript复制 // 加载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)
}, 
