Openlayers 杂项

介绍一些XYZ矢量地图地址，

谷歌

http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0

高德地图 style=6/7/8  卫星图是6,

http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}

炫酷地图

http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}

自定义缩放

    /* 自定义控制层级变化 */
    changeZoom=(state)=>{
        var view = map.getView();
        var zoom = view.getZoom();
        if (state) {
            view.setZoom(zoom + 1);   
        }else{
            view.setZoom(zoom - 1);
        }
    }

效果：

 

设置中心点

/* 设置中心点 */
/* [13377148.370579995,3546089.601028211] */
var mapView = new View({
    center: [120,30],
    projection: 'EPSG:4326',/* 指定投影使用EPSG:4326 */
    zoom: 14,               /* 层级 */
    minZoom:4,              /* 层级 */
    maxZoom:16              /* 最大层级 */
})

OpneLayers弹框

根据地图的左右上下移动而移动

案例地址：https://openlayers.org/en/latest/examples/popup.html?q=Overlay。

计算两点之间的距离 

Api文档地址：https://openlayers.org/en/latest/apidoc/module-ol_sphere.html

getDistance

var c1 =  [120.21240234375001,30.240086360983426];//起始点，杭州
var c2 =  [113.57666015625,34.74161249883172]     //起始点，郑州
var earch_radius=6371008.8;   // 地球半径 平均值  米
console.log(getDistance(c1,c2,earch_radius)/1000) //拿到KM

比例尺

scaleLine

Api文档地址：https://openlayers.org/en/latest/examples/scaleline-indiana-east.html?q=ScaleLine

获取到地图左右两边的经纬度

1.拿到地图中心点的经纬度，当前地图的分辨率；

2.拿到地图的长度，宽度

        /* 监听层级变化，输出当前层级和分辨率 */
        map.getView().on('change:center', function(){
            const height = document.documentElement.clientHeight;
            const width = document.documentElement.clientWidth;
            const center = this.getCenter()/* 地图中心点 */
            var distinguishability = this.getResolution() /* 拿到分辨率 */
            var longitude = distinguishability*width/2    /* 经度距离 */
            var latitude = distinguishability*height/2    /* 纬度距离 */
            that.setState({leftBottom:[center[0]-longitude,center[1]-latitude],topRight:[center[0]+longitude,center[1]+latitude]})
        })

图层元素选中控制

1.Select API

选项。 名称 类型 默认 描述 addCondition 模块：ol /事件/条件〜条件   该函数接受module:ol/MapBrowserEvent~MapBrowserEvent并返回一个布尔值，以指示是否应处理该事件。默认情况下是module:ol/events/condition~never。如果您要使用其他事件来添加和删除，请使用此选项toggle。 condition 模块：ol /事件/条件〜条件   该函数接受module:ol/MapBrowserEvent~MapBrowserEvent并返回一个布尔值，以指示是否应处理该事件。这是整个选定功能的事件。默认情况下是module:ol/events/condition~singleClick。单击功能将选择该功能并删除选择中的所有功能。在任何功能之外单击都会从选择中删除所有功能。见toggle，add，remove从选择添加/删除额外的功能/选项。 layers Array。< 模块：ol / layer / Layer〜Layer > | 功能   应当从中选择要素的图层列表。可替代地，可以提供过滤功能。该函数将在地图中的每个图层上调用，并应返回true想要选择的图层。如果没有该选项，则所有可见层都将被视为可选层。 style 模块：ol / style / Style〜StyleLike   所选功能的样式。默认情况下，使用默认的编辑样式（请参阅参考资料module:ol/style）。 removeCondition 模块：ol /事件/条件〜条件   该函数接受module:ol/MapBrowserEvent~MapBrowserEvent并返回一个布尔值，以指示是否应处理该事件。默认情况下是module:ol/events/condition~never。如果您要使用其他事件来添加和删除，请使用此选项toggle。 toggleCondition 模块：ol /事件/条件〜条件   该函数接受module:ol/MapBrowserEvent~MapBrowserEvent并返回一个布尔值，以指示是否应处理该事件。这是活动之外的condition活动。默认情况下，module:ol/events/condition~shiftKeyOnly即按下shift和condition事件一样，如果当前未选择该功能，则将该功能添加到当前选择中；如果未选中，则将其删除。查看，add以及remove 是否要使用其他事件而不是切换。 multi 布尔值 假 一个布尔值，用于确定默认行为是应在单击的地图位置上仅选择单个要素还是全部（重叠）要素。默认false表示单选。 features module：ol / Collection〜Collection。< module：ol / Feature〜Feature >   交互将放置选定要素的集合。可选的。如果未设置，则交互将创建一个集合。无论如何，交互使用的集合都由返回 module:ol/interaction/Select~Select#getFeatures。 filter 模块：ol / interaction / Select〜FilterFunction   该函数接受module:ol/Featureand和an module:ol/layer/Layer并返回（true如果可以选择该功能）false。 hitTolerance 数 0 命中检测公差。将检查给定位置周围半径内的像素的特征。

        var selectSingleClick = new Select({
            // style:jeosionStyle,
            hitTolerance:5
        });
        mapEvent.addInteraction(selectSingleClick);
        this.setState({selectFeature:selectSingleClick})
        /*获取到选中的信息*/
        selectSingleClick.on('select', (e)=>{
            var features= e.target.getFeatures().getArray();
            console.log(features)
        })