从零开始，构建电子地图网站：0_15_VUE+leaflet+springboot数据交互功能实现

还是在HistoryMap.vue中实现最初的设计。

Vue适合搭建交互简单的前端工程，像是整合leaflet这样，涉及到地图交互，组件之间的数据通信，挺麻烦的，最好还是用原生的来写。

不管如何，我们把这个工程完成吧。

因为通信比较复杂，所以取消了drawer抽屉移出属性table，直接用的leaflet的bindPopup。

一、效果图

 

二、文件结构

文件结构长这样。Icon文件夹中是点图标，一个红色，一个黑色。

三、HistoryMap.vue代码

所有内容都写在HistoryMap.vue中，其他的没有变化。

主要注意三点。

一是，每次重新加载的时候，对全部覆盖物会有一个移除的过程。

二是，地图加载覆盖物，后加载的会压在之前加载的上面，所以程序里，做了三次循环，先加载polygon，再加载point。

三是，覆盖物会横跨几个朝代，所以为了避免重复加载，用数组cntyindexlist[]、prefptsindexlist[]、prefpgnindexlist[]记录geometry对象的唯一索引gid，先判断geometry对象有没有被加载过，没有被加载过，再加载。

 

<template>

  <div>

    <div id="map">map</div>

    <div style="background-color: #fff; height: 100vh;width: 15%;position:absolute;left:0px;">

      <el-scrollbar style="height: 100%;">

        <el-tree :data="treedata" show-checkbox node-key="id" :props="defaultProps" @check="changecheck">

        </el-tree>

      </el-scrollbar>

    </div>

  </div>

</template>

<script>

import { treedata } from '../js/treedata.js'

import 'leaflet/dist/leaflet.css'

import 'leaflet/dist/leaflet.js'

import { TXTileLayer } from '../js/txTileLayer.js'

import axios from 'axios'

export default {

  data() {

    return {

      map: null,

      defaultProps: {

        children: 'children',

        label: 'label'

      },

      treedata: treedata

    };

  },

  methods: {

    initLeaflet() {

      this.map = L.map('map', {

        center: [36.0, 114.0],

        zoom: 4,

        maxZoom: 23,

        minZoom: 3

      })

      //按照新定义瓦片规则加载底图

      let txurl = 'http://rt1.map.gtimg.com/realtimerender/?z={z}&x={x}&y={y}&type=vector&style=1&v=1.1.1'

      let getUrlArgs = function(tilePoint) {

        return {

          z: tilePoint.z,

          x: tilePoint.x,

          y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y

        }

      }

      let options = {

        subdomain: