安装依赖
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 里添加点位的流程
- 创建点位
- 创建图层
- 将点位添加到图层
- 将图层添加到地图
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: 图层名
- 创建所有点位
- 将点位添加到图层里聚合
- 将聚合图层添加到地图
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里的函数
- 创建点位,并传入自定义数据
- 点击该点位,获取数据
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
