目录
一、案例截图
可以随意拖拽点位到你想要的位置
二、安装OpenLayers库
npm install ol
三、代码实现
3.1、初始化变量
关键代码：
javascript
data() {
return {
map:null,
vectorLayer:null,
}
},3.2、创建一个点
关键代码：
javascript
createPoint(coordinate){
// 创建feature要素，一个feature就是一个点坐标信息
let feature = new Feature({
geometry: new Point(coordinate),
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: 'http://lbs.tianditu.gov.cn/images/bus/end.png',
scale: 1,
}),
zIndex: 10
}),
);
return feature;
},3.3、将点添加到地图上
关键代码：
javascript
let feature = this.createPoint([113.082753,28.180449]);
const vectorSource = new VectorSource({
features: [feature],
});
this.vectorLayer = new VectorLayer({
source: vectorSource,
});
this.map.addLayer(this.vectorLayer);3.4、实现点位拖拽
关键代码：
javascript
addDraggableInteraction(feature) {
// 创建可拖拽的交互
const translate = new Translate({
features: new Collection([feature]),
});
// 添加交互到地图
this.map.addInteraction(translate);
// Marker 1 拖拽事件
translate.on('translatestart', (evt) => {
console.log("当前经纬度信息："+evt.coordinate)
});
translate.on('translating', (evt) => {
console.log("当前经纬度信息："+evt.coordinate)
});
},3.5、完整代码
javascript
<template>
<div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import { Vector as VectorLayer } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Circle, Fill, Icon, Stroke, Style} from 'ol/style';
import 'ol/ol.css';
import Select from 'ol/interaction/Select';
import { OSM } from 'ol/source';
import { LineString } from 'ol/geom';
import Translate from 'ol/interaction/Translate';
import { Collection } from 'ol';
export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
}
export default {
data() {
return {
map:null,
vectorLayer:null,
}
},
mounted(){
this.initMap() // 加载矢量底图
},
methods:{
initMap() {
const KEY = '你申请的KEY'
this.map = new Map({
target: 'map-container',
layers: [
// 底图
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
layer: 'vec', // 矢量底图
matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影
style: "default",
crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
format: "tiles", //请求的图层格式，这里指定为瓦片格式
wrapX: true, // 允许地图在 X 方向重复（环绕）
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
}),
// 标注
new TileLayer({
source: new WMTS({
url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
layer: 'cva', //矢量注记
matrixSet: 'c',
style: "default",
crossOrigin: 'anonymous',
format: "tiles",
wrapX: true,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
})
})
})
],
view: new View({
center: [113.082753,28.180449],
projection: projection,
zoom: 12,
maxZoom: 17,
minZoom: 1
}),
//加载控件到地图容器中
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
});
let feature = this.createPoint([113.082753,28.180449]);
const vectorSource = new VectorSource({
features: [feature],
});
this.vectorLayer = new VectorLayer({
source: vectorSource,
});
this.map.addLayer(this.vectorLayer);
this.addDraggableInteraction(feature);
},
createPoint(coordinate){
// 创建feature要素，一个feature就是一个点坐标信息
let feature = new Feature({
geometry: new Point(coordinate),
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: 'http://lbs.tianditu.gov.cn/images/bus/end.png',
scale: 1,
}),
zIndex: 10
}),
);
return feature;
},
addDraggableInteraction(feature) {
// 创建可拖拽的交互
const translate = new Translate({
features: new Collection([feature]),
});
// 添加交互到地图
this.map.addInteraction(translate);
// Marker 1 拖拽事件
translate.on('translatestart', (evt) => {
console.log("当前经纬度信息："+evt.coordinate)
});
translate.on('translating', (evt) => {
console.log("当前经纬度信息："+evt.coordinate)
});
},
}
}
</script>
<style scoped>
#map-container {
width: 100%;
height: 100vh;
}
</style>