目的：在地图上根据经纬度描点,并设置该点的信息，比如行政区划，内码等，然后可以拖动点获取新的经纬度信息和该点的信息
使用 vector.getSource().addFeature(feature);进行描点，ol.interaction.Pointer进行鼠标事件监听，没有反应，使用map.on('pointermove'监听的时候通过map.forEachFeatureAtPixel(e.pixel, function (feature) 去遍历所有点，feature.get('features')取值时获取不到，以下是全部代码
<script src="../supermap/libs/map-cangchu.js"></script>
<template>
<div style="margin:0 auto;width: 100%;" id="superMap">
<div id="map" style="margin:0 auto;width: 90%;height: 65%;float: left;margin-left: 5%;margin-top: 2%"></div>
<div id="mouse-position" style="margin: 10px auto;width: 90%;height: 1%;display:none;"></div>
<div id="jwd" style="margin: 10px auto;width: 90%;height: 1%;display:none;"></div>
</div>
</template>
<script>
import ol from 'openlayers';
import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers';
import src from '../pages/map.png';
export default {
components: {
ol,
TileSuperMapRest,
},
data () {
return {
map:''
}
},
methods:{
getMap(){
//var afterUrl = window.location.search.substring(1);//(问号以后的字符串)
document.getElementById('superMap').style.height=document.body.scrollWidth+'px';
//地图描点
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
text:new ol.style.Text({
text:"100"
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Icon({
src:src
})
})
});
//获取鼠标所在的经纬度
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: 'mouse-position',
undefinedHTML: ' '
});
function mapInteractions_downEvent(evt) { //This event fire when a click was caught on the map
console.log("DOWN EVENT");
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {return feature;});
if (feature === undefined)
return false; /////// Drag sequence doesn't start
this.lastCursorPosition = evt.coordinate;
var coordinate = evt.coordinate;
console.log(coordinate)
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
console.log("鼠标按下>>>>:"+hdms)
return true; /////// If I drag the cursor element, Drag sequence start
}
function mapInteractions_dragEvent(evt) { //Cursor currently dragged
var deltaX = evt.coordinate[0] - this.lastCursorPosition[0];
var deltaY = evt.coordinate[1] - this.lastCursorPosition[1];
var geometry = cursorFeature.getGeometry();
geometry.translate(deltaX, deltaY);
this.lastCursorPosition[0] = evt.coordinate[0];
this.lastCursorPosition[1] = evt.coordinate[1];
}
function mapInteractions_moveEvent(evt) { //This event fire when a ":hover" event was caught on the map
//console.log("MOVE EVENT")
}
function mapInteractions_upEvent(evt) { //This event fire when element is currently drag and "up event" was caught on the map.
alert("UP EVENT")
var coordinate = evt.coordinate;
console.log(coordinate)
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
console.log("鼠标松开>>>>:"+hdms)
return false;
}
var mapView,mapMouseEvents,mapInteractions,mapLayers;
mapView = new ol.View({
center: ol.proj.fromLonLat([106, 34]),
zoom: 2
});
mapMouseEvents = function () {
ol.interaction.Pointer.call(this, {
handleDownEvent: mapInteractions_downEvent,
handleDragEvent: mapInteractions_dragEvent,
handleUpEvent: mapInteractions_upEvent, //End of drag
handleMoveEvent: mapInteractions_moveEvent
});
this.lastCursorPosition = undefined;
};
ol.inherits(mapMouseEvents, ol.interaction.Pointer);
mapInteractions = new ol.interaction.defaults({}).extend([new mapMouseEvents]);
var map = new ol.Map({
//地图监听事件,实时获取鼠标所在的经纬度
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}).extend([mousePositionControl]),
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China"
}),
}),vector],
view: new ol.View({
center: ol.proj.fromLonLat([106, 34]),
zoom:3.6,
minZoom:3.7
}),
interactions: mapInteractions
});
//地图描点设置
var draw, snap;
var modify = new ol.interaction.Modify({source: source});
map.addInteraction(modify);
draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
map.addInteraction(draw);
snap = new ol.interaction.Snap({source: source});
map.addInteraction(snap);
function addInteractions() {
draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
map.addInteraction(draw);
snap = new ol.interaction.Snap({source: source});
map.addInteraction(snap);
}
var geom = new ol.geom.Point(ol.proj.transform([116,38],'EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(geom);
feature.setProperties({jwd: [116,38]});
feature.setStyle(new ol.style.Style({
text:new ol.style.Text({
text:"1000",
fill: new ol.style.Fill({
color: '#657511'
}),
}),
image: new ol.style.Icon({
src:src
}),
fill: new ol.style.Fill({
color: '#657511'
}),
}));
vector.getSource().addFeature(feature);
var geom = new ol.geom.Point(ol.proj.transform([105,38],'EPSG:4326', 'EPSG:3857'));
var featur1e = new ol.Feature(geom);
featur1e.setProperties({jwd: [105,38]});
function sty(){
var vc =new ol.style.Style({
text:new ol.style.Text({
text:"100ssss0",
fill: new ol.style.Fill({
color: '#954125'
}),
}),
image: new ol.style.Icon({
src:src
}),
});
return vc;
}
featur1e.setStyle(sty());
//console.log(feature);
vector.getSource().addFeature(featur1e);
//响应鼠标移动事件
map.on('pointermove', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature) {
console.log(feature.get("features"))
})
});
console.log(this.map);
},
},
created () { /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
this.$nextTick(()=>{
this.getMap();
})
},
}
</script>
