|
|
@@ -1,132 +1,132 @@
|
|
|
-<!-- **************************************NO.5 地图*************************************** -->
|
|
|
-<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>
|
|
|
+<!--<!– **************************************NO.5 地图*************************************** –>-->
|
|
|
+<!--<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>-->
|
lyq