<template>
 <div>
   <div class="map" ref="map" @click="call"></div>

 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'


L.esri = Esri
// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  name: 'GeoJSON',
  mounted() {
    this.initMap()
  },
  methods: {
    call(e) {
      console.log(e.target.attributes,'target')
      if(e.target.attributes['layer-type']){
        console.log(e.target.attributes['layer-type'].value, '获取到点击位置,可做点击事件处理')
        // 
      }
      // console.log('call',e)
    },
    // 初始化Map
    initMap() {
      var map = L.map(this.$refs.map).setView([24.48, 118.108], 13);
      L.esri.basemapLayer("Streets").addTo(map)
      // 需要arcgis 10.4以后才支持
     
      const defaultStyle = {
        color: "#ff0000", opacity: 0.5
      }
      const mouseoverStyle = {
        color: "#ff0000", opacity: 0.8
      }
      //
      let url = 'http://192.168.110.201:6080/arcgis/rest/services/Clone/SMBZD/MapServer/1/query'
      L.esri.request(url,{where:'1=1',f:'geojson'},function(error,result){
        // console.log(result,'result')
         L.geoJSON(result, {
           // 线面自定义属性  for styling GeoJSON lines and polygons,
          //  style: function(feature) {
          //   //  console.log(feature.properties,'properties')
          //     switch (feature.properties.name) {
          //         case '鼓浪屿街道': return {color: "#ff0000", opacity: 0.8};
          //         // case '筼筜街道':   return {color: "#0000ff", opacity: 0.8};
          //     }
          // },
          style: defaultStyle,
          //  // 点位置 自定义样式
          //   pointToLayer: function (feature, latlng) {
          //       return L.circleMarker(latlng, customerStyle);
          //   },
            // 绑定事件
            onEachFeature: (feature, layer) => {
                // console.log(layer, feature)
                // does this feature have a property named popupContent?
                if (feature.properties && feature.properties.name) {
                  const html = `<div>项目名称: ${feature.properties.name}</div> <a href="#" layer-type="detail">查看详情</a>`
                  // layer.bindPopup(feature.properties.name);
                  layer.bindPopup(html);
                }


                layer.on('mouseout',(e)=>{
                  console.log(e,'out')
                   //
                  layer.setStyle(defaultStyle);
                  if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                  }

                })
                layer.on('mouseover', (e)=>{
                  console.log(e,'over')
                  layer.setStyle(mouseoverStyle);
                  if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                  }
                })
            },
          //   filter: function(feature) {
          //       // 只返回这个数据
          //       // if(feature.properties.name == '厦门九中避灾点') {
          //          return feature.properties.name;
          //       // }
          //   }
         }).addTo(map);
      })

      url = 'http://192.168.110.201:6080/arcgis/rest/services/Clone/SMBZD/MapServer/0/query'
      // 使用默认样式
      // L.esri.request(url,{where:'1=1',f:'geojson'},function(error,result){
      //   // console.log(result,'result')
      //    L.geoJSON(result).addTo(map);
      // })


      var customerStyle = {
          radius: 8,
          fillColor: "#ff7800",
          color: "#000",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.8
      };
      console.log('customerStyle', customerStyle)
      L.esri.request(url,{where:'1=1',f:'geojson'},function(error,result){
        // console.log(result,'result')
         L.geoJSON(result, {
           // 线面自定义属性  for styling GeoJSON lines and polygons,
           style: function(feature) {
              switch (feature.properties.party) {
                  case '厦门九中避灾点': return {color: "#ff0000"};
                  case 'Democrat':   return {color: "#0000ff"};
              }
          },
           // 点位置 自定义样式
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, customerStyle);
                // return L.maker(latlng, {highlight: 'temporary'})
            },
            // 绑定事件
            onEachFeature: (feature, layer) => {
               //
                layer.on('mouseout',(e)=>{
                  console.log(e,'out')
                   //
                  layer.setStyle({
                    fillColor: "#ff7800",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                  });
                  if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                  }

                })
                layer.on('mouseover', (e)=>{
                  console.log(e,'over')
                  layer.setStyle({
                    fillColor: "#ff7800",
                    weight: 2,
                    color: '#000',
                    dashArray: '',
                    fillOpacity: 0.5
                  });
                  if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                  }
                })

                // console.log(layer, feature)
                // does this feature have a property named popupContent?
                if (feature.properties && feature.properties.name) {
                  const html = `<div>项目名称: ${feature.properties.name}</div> <a href="#" layer-type="detail">查看详情</a>`
                  // layer.bindPopup(feature.properties.name);

                  layer.bindPopup(html);
                }
               
            },
            filter: function(feature) {
                // 只返回这个数据
                // if(feature.properties.name == '厦门九中避灾点') {
                   return feature.properties.name;
                // }
            }
         }).addTo(map);
      })
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
</style>