A demanda requer o desenho de um mapa do distrito de Putuo em Xangai, ruas e cidades específicas. O Echart comum só pode desenhar mapas de províncias e cidades, mas não pode fornecer dados específicos de ruas e cidades. Assim, você pode obter dados específicos por meio do bigmap.
- Baixe o bigmap (escolha a segunda versão onipotente)
- Baixe o arquivo .kml da rua desejada no bigmap
3. Após o download bem-sucedido, o arquivo .kml precisa ser convertido em json
Importe o arquivo .kml para geojson.io. Se houver vários arquivos .kml, importe-os um por um. Depois que a importação for bem-sucedida, a área direita é o arquivo json que precisamos e a parte esquerda é a forma correspondente ao map que iremos desenhar depois (isso pode ser ignorado. ), copie os dados do json e salve no projeto (aqui eu salvo em public/static/map.json)
Endereço: geojson.io/#map=12.59/…
4. Os dados mais importantes já estão disponíveis e você pode começar a desenhar com o echart
Primeiro instale echarts
npm install echarts
复制代码Em seguida, importe-o diretamente no arquivo vue sob demanda (para importação global, consulte a documentação do echarts)
import * as echarts from 'echarts';
复制代码Aqui também precisamos usar axios para solicitar os dados json que acabamos de ter, então instale axios
npm i axios
复制代码importar axios
import axios from 'axios
复制代码Como todos sabemos depois de usar echarts, precisamos definir um contêiner div para renderizar o mapa
<div id="main" style="width: 300px; height: 500px"></div>
复制代码Como meu requisito é entrar na página e renderizar diretamente, escrevi o código js diretamente no gancho montado
Deveria ter sido concluído aqui, mas após rodar, constatou-se que foi reportado um erro!
Consulte este artigo: t.csdn.cn/2mozQ
Motivo: Existem duas áreas descontínuas no mapa gerado, o tipo é GeometryCollection e não há solução para este tipo em echarts: coloque dois dados de array descontínuos juntos e o tipo é Polygon. Para obter detalhes, consulte o artigo acima.
efeito final: