tz-onest-data/data-ui/src/views/centerdata_emergency1/enterprise/supermap.vue

<!--&lt;!&ndash; **************************************NO.5 地图*************************************** &ndash;&gt;-->
<!--<template>-->
<!--  <div class="map-container">-->

<!--    <div id="enterprisemap" style="width: 100%;height: 100%;"></div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--  import L from 'leaflet'-->
<!--  import '@supermap/iclient-leaflet'-->
<!--  import 'leaflet/dist/leaflet.css'-->

<!--  export default {-->
<!--    name: 'spuermap',-->
<!--    data() {-->
<!--      return {-->
<!--        mapUrl: 'http://121.36.228.94:8090/iserver/services/map-JiLin/rest/maps/JiLin',-->
<!--        map: null,-->
<!--        lat: '',-->
<!--        lng: '',-->
<!--        iconMarker: new L.Icon({-->
<!--          iconUrl: require('@/assets/images/icon-danger.png'),-->
<!--          iconSize: [65, 60],-->
<!--          iconAnchor: [12, 41],-->
<!--          popupAnchor: [17, -34],-->
<!--          shadowSize: [41, 41]-->
<!--        }),-->
<!--        marker: {},-->
<!--        layers: [],-->
<!--        myGroup: undefined-->
<!--      }-->
<!--    },-->
<!--    mounted() {-->
<!--      this.initMap()-->
<!--    },-->
<!--    props:{-->
<!--      setLatLng : Function-->
<!--    },-->
<!--    methods: {-->
<!--      clearM: async function() {-->
<!--        if (this.myGroup != undefined) {-->
<!--          // await this.initMap()-->
<!--          this.myGroup.clearLayers()-->
<!--        }-->
<!--        this.layers = []-->
<!--      },-->

<!--      setMarker(lat,lng){-->
<!--        this.clearM()-->
<!--        let marker = window.L.marker([lat, lng], {-->
<!--          icon: this.iconMarker-->
<!--        })-->
<!--        this.layers.push(marker)-->
<!--        this.myGroup = window.L.layerGroup(this.layers)-->
<!--        this.map.addLayer(this.myGroup)-->


<!--        this.map.panTo([lat,lng])-->
<!--        // let center = window.L.LonLat(104.07, 30.67);-->
<!--        // this.map.setCenter(center,7)-->
<!--      },-->

<!--      initMap() {-->
<!--        let lat = 43.875228-->
<!--        let lon = 125.379896-->
<!--        this.map = window.L.map('enterprisemap', {-->
<!--          crs: window.L.CRS.EPSG4326,-->
<!--          center: [lat, lon],-->
<!--          maxZoom: 18,-->
<!--          zoom: 10,-->
<!--          editable: true,-->
<!--          zoomControl: false-->
<!--        })-->
<!--        window.L.supermap.tiledMapLayer(this.mapUrl).addTo(this.map)-->
<!--        let that = this-->
<!--        this.map.on('click', function(e) {-->
<!--          that.clearM()-->
<!--          let lat = e.latlng.lat-->
<!--          let lng = e.latlng.lng-->
<!--          let marker = window.L.marker([lat, lng], {-->
<!--            icon: that.iconMarker-->
<!--          })-->
<!--          that.setLatLng(lat,lng)-->

<!--          that.layers.push(marker)-->
<!--          that.myGroup = window.L.layerGroup(that.layers)-->
<!--          that.map.addLayer(that.myGroup)-->


<!--        })-->



<!--        // this.map.on('click', function(e) {-->
<!--        //   console.log(e)-->
<!--        //   let lat = e.latlng.lat-->
<!--        //   let lng = e.latlng.lng-->
<!--        //   // let marker = L.marker([lat, lng], {-->
<!--        //   //   icon: this.iconMarker-->
<!--        //   // })-->
<!--        //   // this.layers.push(marker)-->
<!--        //   // this.myGroup = L.layerGroup(this.layers)-->
<!--        //   // this.map.addLayer(this.myGroup)-->
<!--        //   // this.map.addLayer(this.marker)-->
<!--        // })-->
<!--      }-->
<!--    }-->

<!--  }-->
<!--</script>-->

<!--<style rel="stylesheet/scss" lang="scss">-->
<!--  .map-container {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    color: #fff;-->
<!--    background-color: #01020c;-->
<!--    box-shadow: rgba(1, 2, 12, 1) 0px 0px 25px inset;-->

<!--    .leaflet-left {-->
<!--      .leaflet-control {-->
<!--        margin-top: 60px;-->
<!--      }-->
<!--    }-->

<!--    .leaflet-right {-->
<!--      display: none;-->
<!--    }-->
<!--  }-->
<!--</style>-->