封装openlayer,简易开发地图

安装依赖

npm install ol ol-utils

创建地图

render(url, id, center) 创建地图
url: 地图地址
id: 用于挂载地图的节点id
center: 地图中心点经纬度

import {
    render
} from 'ol-utils';

window.onload = function() {
   // 谷歌在线地图
 let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
 let elID = 'app';
 let center = [112.55, 28.27];

 let map = render(elID, url, center);
};

效果图

image.png

添加点位

createFeature(center, icon) 创建点位
center: 点位的经纬度
icon: 点位的图标

createLayer() 创建图层

在 openlayer 里添加点位的流程

1. 创建点位
2. 创建图层
3. 将点位添加到图层
4. 将图层添加到地图

import {
    render,
    createLayer,
    createFeature
} from 'ol-utils';

// 图片
import orange from '@/img/orange.png';

window.onload = function() {
    let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
    let elID = 'app';
    let center = [112.55, 28.27];

    let map = render(elID, url, center);
    
    // 1.创建点位
    let feature = createFeature(center, orange);
    
    // 2.创建图层
    let layer = createLayer();
    
    // 3. 将点位添加到图层  
    layer.getSource().addFeature(feature);
    
    // 4.将图层添加到地图
    map.addLayer(layer);
};

效果图

image.png

点位进阶 --- 聚合效果

createCluster(features, icon, name) 创建聚合点位图层
features: 所有点位数组
icon: 聚合的图标
name: 图层名

1. 创建所有点位
2. 将点位添加到图层里聚合
3. 将聚合图层添加到地图

import {
    render,
    createCluster,
    createFeature
} from 'ol-utils';
import { Style } from 'ol/style';

import orange from '@/img/orange.png';

window.onload = function() {
    let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
    let elID = 'app';
    let center = [112.55, 28.27];

    let map = render(elID, url, center);

    let features = [];

        // 创建所有点位,点位无需设置图标
    for (let i = 0; i < 50; i++) {
        let lon = 112.55 + i * 0.001;
        let lat = 28.27 + i * Math.random() * 0.005;
        let feature = createFeature([lon, lat]);
        features.push(feature);
    }

        // 创建聚合图层
    let cluster = createCluster(features, orange, 'test');

         // 将图层添加到地图
    map.addLayer(cluster);
};

效果图

image.png

添加弹窗

createOverlay(el, coord, offset) 创建弹窗图层
el: DOM元素节点ID
coord: 弹窗在地图上的经纬度
offset: 弹窗偏移距离, [y, x]

在地图挂载点的DOM节点下创建一个div#over
设置style

#over {
  width: 300px;
  height: 300px;
  background: #666;
}

import {
    render,
    createOverlay
} from 'ol-utils';
import { Style } from 'ol/style';

import orange from '@/img/orange.png';

window.onload = function() {
    let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
    let elID = 'app';
    let center = [112.55, 28.27];

    let map = render(elID, url, center);

    let overlay = createOverlay('over', center, [0, 0]);

    map.addOverlay(overlay);
};

效果图

image.png

事件交互

addEvent(map, type, callback) 为地图上点位添加相关事件
map: Map实例对象
type: 事件类型,暂时只支持singleclick,click和pointermove(鼠标覆盖)
callback: 回调函数

import {
    render,
    createLayer,
    createFeature,
    addEvent
} from 'ol-utils';

import orange from '@/img/orange.png';

window.onload = function() {
    let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
    let elID = 'app';
    let center = [112.55, 28.27];
    let map = render(elID, url, center);
    let feature = createFeature(center, orange);
    let layer = createLayer();

    layer.getSource().addFeature(feature);
    map.addLayer(layer);
    
    // 添加事件
    addEvent(map, 'pointermove', (e) => {
        console.log(e);
        alert(e.mapBrowserEvent.coordinate)
    })
};

当鼠标移到某个点位上,将会弹出该点位的经纬度信息

效果图

image.png

点位传参

Feature.set(key, value) 这是openlayer里的函数

1. 创建点位,并传入自定义数据
2. 点击该点位,获取数据

import {
    render,
    createLayer,
    createFeature,
    addEvent
} from 'ol-utils';

import orange from '@/img/orange.png';

window.onload = function() {
    let url =
        'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0';
    let elID = 'app';
    let center = [112.55, 28.27];
    let map = render(elID, url, center);
    let feature = createFeature(center, orange);
    
    // 设置值
    feature.set('greet', 'this is a icon on map');

    let layer = createLayer();
    
    layer.getSource().addFeature(feature);
    map.addLayer(layer);

    // 添加事件
    addEvent(map, 'click', (e) => {
        // 获得点位的值
        let greet = e.selected[0].get('greet');

        alert(greet);
    })
};

效果图

点位该点位,显示我们传入的数据

image.png

github地址