首页 / 浏览问题 / 云GIS / 问题详情
拖动点获取新的经纬度信息
6EXP 2018年05月28日

目的:在地图上根据经纬度描点,并设置该点的信息,比如行政区划,内码等,然后可以拖动点获取新的经纬度信息和该点的信息

使用 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: '&nbsp;'
        });
        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>

1个回答

你好,想要做要素拖拽的话,可以参考openlayer的官方范例http://openlayers.org/en/latest/examples/custom-interactions.html?q=pointer
你说feature.get('features')获取不到值,首先确认移动的时候有交互到要素

你的拖拽的代码我拿出来是有响应事件的,这块你可以调试一下你的代码检查一下 

1,610EXP 2018年05月30日
感谢指导,已经获取到对应的信息了
 map.on('pointermove', function (e) {
          map.forEachFeatureAtPixel(e.pixel, function (feature) {
            console.log(feature.getProperties().id)
          })
        });

...