标签：leaflet Vue GIS Leaflet json rem import data

 package.json中引入并安装：

"leaflet": "~1.4.0",
"vue2-leaflet": "^2.5.2"

组件写法：

<template>
  <div class="vue-leaflet">
    <l-map
      style="width: 100%; height: 100%"
      :zoom="map.zoom"
      :center="map.center"
      :min-zoom="map.minZoom"
      :max-zoom="map.maxZoom"
    >
      <l-tile-layer :url="map.url" />
      <template v-for="(item, index) in points">
        <l-marker
          :key="index"
          :lat-lng="[item.lat, item.lng]"
          :icon="item.icon"
          @click="pointClick(item)"
        />
      </template>
      <l-geo-json
        :geojson="map.geoJSON"
        :options-style="map.geoStyle"
      />
    </l-map>

    <div class="search-tool">
      查询等功能。。。
    </div>
  </div>
</template>

<script>
import * as Leaflet from 'leaflet'
import 'leaflet/dist/leaflet.css'
import hb from '@/assets/json/hubei.json' // 边界线JSON文件
import { LMap, LTileLayer, LMarker, LGeoJson } from 'vue2-leaflet' // 渲染组件
export default {
  name: 'ZsMap',
  components: {
    LMap, LTileLayer, LMarker, LGeoJson
  },
  data() {
    return {
      map: {
        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
        zoom: 7,
        minZoom: 2,
        maxZoom: 16,
        center: [30.978551, 112.730713],
        geoJSON: hb,
        geoStyle: {
          color: '#1E9FFF',
          fillColor: '#E8E8E8',
          weight: 1,
          opacity: 1,
          fillOpacity: 0.2
        }
      },
      points: [], // 点位对象数组
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      // 请求数据响应中初始化点位 this.initPoint(data.data)
      
    },
    // 加载点位
    initPoint(data) {
      data.forEach(element => {
        element.icon = Leaflet.icon({
          iconUrl: require('静态文件中的图标'),
          iconSize: [20, 20]
        })
      })
      this.points = data
    },
    // 点位点击事件
    pointClick(item) {
        
    }
  }
}
</script>

<style lang='scss' scoped>
.vue-leaflet {
  height: calc(100vh - 5.3rem);
  position: relative;
}

/deep/.leaflet-left {
  display: none !important;
}

.search-tool {
  position: absolute;
  top: 1.125rem;
  left: 0.8125rem;
  z-index: 1231;
  display: flex;
}

</style>

标签：leaflet,Vue,GIS,Leaflet,json,rem,import,data
来源： https://blog.csdn.net/Junyaxx/article/details/120910576

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。