Openlayers API运用相关功能记录

原创已于 2023-11-16 16:39:58 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers3

于 2019-09-25 11:57:08 首次发布

openlayers 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用OpenLayers库进行地图操作的各种方法，包括事件监听、默认展示配置、坐标转换、多边形中心点获取等。此外还介绍了如何加载GeoJSON数据、设置填充透明度及实现图层高亮等功能。

1.事件

#鼠标更改视野事件
map.getView().on('change:resolution', function(){})

#鼠标拖动事件,地图拖动结束后执行
map.on("moveend", function (evt) {});

#鼠标单击事件
map.on('singleclick', function(evt) {
    // 获取当前鼠标点击的feature
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(
            feature, layer) {
        return feature;
    });
})

#鼠标双击事件
map.on("dblclick", function (evt) {});

#鼠标悬浮图层高亮并添加阴影
## 添加阴影的方式
lightLayer.on('precompose', (evt) => {
  evt.context.shadowBlur = 25;
  evt.context.shadowColor = 'black';
});
lightLayer.on('postcompose', (evt) => {
  evt.context.shadowBlur = 0;
  evt.context.shadowColor = 'black';
});

##鼠标悬浮地图事件
map.on('pointermove', ()=>{});

鼠标悬浮的时候，将当前悬浮的feature添加到lightLayer中并修改样式，就能实现高亮效果

2.默认展示属性

controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false })

3.获取多边形中心点

var extent = feature.getGeometry().getExtent();
var center = ol.extent.getCenter(extent);

4.移动到指定经纬度及视野等级

view.setZoom(16);
view.animate({
    center: center,
    duration: 0
});

5.填充设置透明度

let color = ol.color.asArray('#000');
color= color.slice();
color[3] = 0.4; // 透明度

6.加载Geojson数据对象

let features = new GeoJSON().readFeatures(copyWenzhou_border, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857',
  });
  let vectorLayer = new layerVector({
    source: new sourceVector({
      features: features,
    }),
    zIndex: 100,
    style() {
      return wenZhouPolygonLayerStyle;
    },
  });


var format_wenzhou1_0 = new ol.format.GeoJSON();
var features_wenzhou1_0 = format_wenzhou1_0.readFeatures(json_wenzhou1_0, 
            {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});

7.Geojson数据对象Polygon转StringLine

copyWenzhou_border.features[0].geometry.type = 'LineString';
copyWenzhou_border.features[0].geometry.coordinates =
    copyWenzhou_border.features[0].geometry.coordinates[0];

8.默认经纬度

// web地图默认是3857， 我们用的坐标系是4326, 需要转一下

console.log(ol.proj.transform([12957588.728337044, 4851421.175183355],"EPSG:3857","EPSG:4326"));
console.log(ol.proj.transform([116.4, 39.9],"EPSG:4326","EPSG:3857"));

9.fit偏移

默认情况下，会根据展示内容居中展示

const vectorSource = new ol.source.Vector({features: AllMarks});
map.getView().fit(vectorSource.getExtent());

但有时候地图上会展示一些内容，如table 、echarts 等等，导致地图内容被遮住，这时候就需要将展示内容进行偏移，方式如下：

const vectorSource = new ol.source.Vector({features: AllMarks});
const extent = vectorSource.getExtent();
const width = extent[2] - extent[0]
const height = extent[3] - extent[1]

// 经纬度距离
// 获取一半屏幕宽度 和 屏幕高度
const bWidth = width / 2
const bHeight = height / 2

// 自定义偏移量				
extent[0] = extent[0] - bWidth + bWidth
extent[2] = extent[2] + bWidth + bWidth
extent[1] = extent[1] - bHeight
extent[3] = extent[3] + bHeight

map.getView().fit(extent);