|
|
@@ -0,0 +1,160 @@
|
|
|
+<template>
|
|
|
+ <div class="mapCom">
|
|
|
+ <div id="map"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
|
|
|
+import img from '@/assets/mapdarw/images/marker-icon.png'
|
|
|
+
|
|
|
+// import '@/assets/mapdarw/Leaflet.draw'
|
|
|
+// import '@/assets/mapdarw/leaflet.draw.css'
|
|
|
+// import '@/assets/mapdarw/leaflet.pin.css'
|
|
|
+// import '@/assets/mapdarw/leaflet.pin.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ img: img,
|
|
|
+ DefaultIcon1: null,
|
|
|
+ layerGroup: [],
|
|
|
+ layers: [],
|
|
|
+ rightObj: {},
|
|
|
+ areaLayer: null,
|
|
|
+ tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg',
|
|
|
+ ciLayer: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initMap() {
|
|
|
+ let map = L.map('map', {
|
|
|
+ center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
|
|
|
+ zoom: 16 //缩放比列
|
|
|
+ // drawControl: true
|
|
|
+ // zoomControl: false, //禁用 + - 按钮
|
|
|
+ // doubleClickZoom: true, // 禁用双击放大
|
|
|
+ // attributionControl: false, // 移除右下角leaflet标识
|
|
|
+ // preferCanvas: true
|
|
|
+ })
|
|
|
+ let name = L.tileLayer(
|
|
|
+ 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
|
|
|
+ ).addTo(map)
|
|
|
+
|
|
|
+ var editableLayers = new L.FeatureGroup()
|
|
|
+ map.addLayer(editableLayers)
|
|
|
+
|
|
|
+ var MyCustomMarker = L.Icon.extend({
|
|
|
+ options: {
|
|
|
+ shadowUrl: null,
|
|
|
+ iconAnchor: new L.Point(12, 12),
|
|
|
+ iconSize: new L.Point(24, 36),
|
|
|
+ iconUrl: this.img
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ var options = {
|
|
|
+ position: 'topright',
|
|
|
+ draw: {
|
|
|
+ polyline: {
|
|
|
+ shapeOptions: {
|
|
|
+ color: '#f357a1',
|
|
|
+ weight: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ polygon: {
|
|
|
+ allowIntersection: false, // Restricts shapes to simple polygons
|
|
|
+ drawError: {
|
|
|
+ color: '#e1e100', // Color the shape will turn when intersects
|
|
|
+ message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
|
|
|
+ },
|
|
|
+ shapeOptions: {
|
|
|
+ color: '#bada55'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // circle: false, // Turns off this drawing tool
|
|
|
+ rectangle: false,
|
|
|
+ // rectangle: {
|
|
|
+ // shapeOptions: {
|
|
|
+ // clickable: false
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ marker: {
|
|
|
+ icon: new MyCustomMarker()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ edit: {
|
|
|
+ featureGroup: editableLayers, //REQUIRED!!
|
|
|
+ remove: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var drawControl = new L.Control.Draw(options)
|
|
|
+ map.addControl(drawControl)
|
|
|
+
|
|
|
+ map.on(L.Draw.Event.CREATED, function (e) {
|
|
|
+ let type = e.layerType,
|
|
|
+ layer = e.layer
|
|
|
+
|
|
|
+ console.log('e====>>>', e)
|
|
|
+
|
|
|
+ if (type === 'marker') {
|
|
|
+ layer.bindPopup('A popup!')
|
|
|
+ }
|
|
|
+
|
|
|
+ editableLayers.addLayer(layer)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="sass">
|
|
|
+.mapCom
|
|
|
+ height: 85vh
|
|
|
+
|
|
|
+ .iconLabel
|
|
|
+ width: 80px !important
|
|
|
+
|
|
|
+ .iconSty
|
|
|
+ &Class
|
|
|
+ width: 50px
|
|
|
+ height: 100px
|
|
|
+ position: relative
|
|
|
+ top: 40px
|
|
|
+
|
|
|
+#map
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+
|
|
|
+.lmap-image
|
|
|
+ width: 32px
|
|
|
+ height: 32px
|
|
|
+
|
|
|
+.lmap-span
|
|
|
+ display: inline-block
|
|
|
+ margin-left: 5px
|
|
|
+ padding: 5px
|
|
|
+ font-weight: bold
|
|
|
+ line-height: 20px
|
|
|
+ font-size: 14px
|
|
|
+ color: #fff
|
|
|
+ white-space: nowrap
|
|
|
+
|
|
|
+.lmap-text
|
|
|
+ display: inline-block
|
|
|
+ margin-left: 5px
|
|
|
+ padding: 5px
|
|
|
+ font-weight: bold
|
|
|
+ line-height: 20px
|
|
|
+ font-size: 16px
|
|
|
+ color: #fff
|
|
|
+ width: 500px
|
|
|
+ white-space: nowrap
|
|
|
+ position: absolute
|
|
|
+ text-align: center
|
|
|
+ top: 25px
|
|
|
+ left: -250px
|
|
|
+</style>
|
