コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

藏色散人
リリース： 2023-02-16 19:20:09
転載
4575 人が閲覧しました

本篇文章给大家带来了Echarts関連使用知识，其中主要内容是教大家如何にEcharts一步步绘制街道及镇级地图的，感兴趣的朋友下面続いて見て、大家に役立つことを望みます。

#bigmap をダウンロード (2 番目の全能バージョンを選択)

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

bigmap で必要な街道の .kml 文件

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）##3.ダウンロードが成功したら、.kml 文件を json に変換する必要がありますEchartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

.kml 文件を geojson.io に挿入します。複数の .kml 文件がある場合は、順次入力してください。成功後の右側領域は我们必要な json ファイルです。左側部分は我们后面绘对应です。形状 (これはチューブを使用しないこともできます)、統合された json データは、リスト内に保存されます (ここでは public/static/map.json が保存されます)

地址:

geojson.io/#map=12.59 /…

4. 最も重要なデータはすでに取得済みなので、次は echart の使用を開始して、Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

最初に echarts をインストールできます

npm install echarts
ログイン後にコピー
その後、vue 文書に直接入力する必要があります (全ローカル参照可参照 echarts 文档) 

import * as echarts from 'echarts';
ログイン後にコピー
ここでは、axios に必要な json データを要求するため、axios

をインストールします

npm i axios
ログイン後にコピー
导入axios

import axios from 'axios
ログイン後にコピー

用过echarts都知道，我们需要定义一个div容器来渲染地图

<div></div>
ログイン後にコピー

因为我的需求是进入页面直接渲染的所以我把js代码直接写在了mounted钩子里面

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

到这里应该就已经完成了，但是run以后发现报错了！

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

参考到了这篇文章：t.csdn.cn/2mozQ

原因：生成的地图里有一个区域为两块不连续的，type为GeometryCollection，echarts中对于此类型没有做处理 解决方案：把两块不连续的数组数据放到一起，类型type为Polygon。具体可参考上述文章。

最终效果：

Echartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）

推荐学习：《JavaScript视频教程》

以上がEchartsを使って道路や町レベルの地図を描く方法を詳しく説明（写真とテキスト付きの手順）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
vue.js echarts
ソース：juejin.im
前の記事：Node?のアンインストール方法を詳しく解説。 【ステップ共有】 次の記事：Node を使用して WebSocket プロトコルを手書きする手順を段階的に説明します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2160
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2310
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1947
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1821
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1875
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート