بررسی اجمالی
این آموزش به شما نشان می دهد که چگونه داده ها را در نقشه های گوگل تجسم کنید. به عنوان مثال، نقشه های این آموزش داده های مربوط به مکان زلزله و بزرگی آنها را به تصویر می کشد. تکنیکهایی را بیاموزید که با منبع داده خود استفاده کنید و داستانهای قدرتمندی مانند موارد زیر در نقشههای Google ایجاد کنید.
2 فریم اول که در بالا (از چپ به راست) دیده می شود، نقشه ها را با نشانگرهای اصلی و دایره های اندازه نشان می دهد. آخرین فریم یک نقشه حرارتی را نشان می دهد.
در حال وارد کردن داده های شما
این آموزش از داده های زلزله در زمان واقعی از سازمان زمین شناسی ایالات متحده (USGS) استفاده می کند. وبسایت USGS دادههای آنها را در قالبهای مختلفی ارائه میکند که میتوانید برای دسترسی محلی توسط برنامه خود، آنها را در دامنه خود کپی کنید. این آموزش JSONP را مستقیماً از سرورهای USGS با اضافه کردن یک تگ script
به سر سند درخواست می کند.
// Create a script tag and set the USGS URL as the source. var script = document.createElement('script'); script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'; document.getElementsByTagName('head')[0].appendChild(script);
قرار دادن نشانگرهای اساسی
اکنون که دادههای مربوط به مکان زلزله را از خوراک USGS به برنامه خود آوردهاید، میتوانید آن را روی نقشه نمایش دهید. این بخش به شما نشان می دهد که چگونه یک نقشه ایجاد کنید که از داده های وارد شده برای قرار دادن یک نشانگر اصلی در مرکز هر مکان زلزله استفاده می کند.
بخش زیر کل کد مورد نیاز برای ایجاد نقشه را در این آموزش نمایش می دهد.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results: any) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
جاوا اسکریپت
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Markers</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Sample را امتحان کنید
استفاده از اشکال و نقشه های حرارتی برای سفارشی کردن نقشه ها
این بخش راه های دیگری را برای سفارشی کردن مجموعه داده های غنی روی نقشه به شما نشان می دهد. نقشه ایجاد شده در بخش قبلی این آموزش را در نظر بگیرید که نشانگرهایی را در هر مکان زلزله نشان می دهد. میتوانید نشانگرها را برای تجسم دادههای اضافی، مانند مکانهایی که بیشترین زلزلهها را دارند، و بزرگی یا عمق آنها، سفارشی کنید.
در اینجا چند گزینه برای سفارشی کردن نشانگر اصلی وجود دارد:
استفاده از اندازه دایره :
با استفاده از نمادها می توانید دایره هایی (یا هر شکل دیگری) با اندازه های نسبت به بزرگی یک زلزله رسم کنید. به این ترتیب زلزله های قدرتمند به عنوان بزرگترین دایره های روی نقشه نمایش داده می شوند.استفاده از نقشه های حرارتی :
لایه Heatmap در کتابخانه تجسم یک راه ساده و در عین حال قدرتمند برای نمایش توزیع زمین لرزه ها ارائه می دهد. نقشههای حرارتی از رنگها برای نشان دادن چگالی نقاط استفاده میکنند و انتخاب مناطق پر فعالیت را آسانتر میکنند. نقشههای حرارتی همچنین میتوانند ازWeightedLocations
استفاده کنند تا برای مثال، زلزلههای بزرگتر بهطور برجستهتر در نقشه حرارتی نمایش داده شوند.
اندازه دایره
نقشه زیر نشانگرهای سفارشی شده را با استفاده از دایره ها نشان می دهد. اندازه دایره با بزرگی یک زلزله در آن مکان خاص افزایش می یابد.
بخش زیر کل کد مورد نیاز برای ایجاد نقشه با نشانگرهای دایره ای سفارشی را نشان می دهد.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag") as number; return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude: number) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results: any) { map.data.addGeoJson(results); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
جاوا اسکریپت
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag"); return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results) { map.data.addGeoJson(results); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Circles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Sample را امتحان کنید
نقشه های حرارتی
نقشه های گرمایی درک توزیع زمین لرزه ها را برای بینندگان آسان می کند، گزارش شده توسط USGS. به جای قرار دادن یک نشانگر در هر کانون، نقشه های حرارتی از رنگ و شکل برای نمایش توزیع داده ها استفاده می کنند. در این مثال، رنگ قرمز نشان دهنده مناطقی است که فعالیت زلزله زیاد است.
بخش زیر کل کد مورد نیاز برای ایجاد این نقشه را نشان می دهد.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results: any) { const heatmapData: google.maps.LatLng[] = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
جاوا اسکریپت
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results) { const heatmapData = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Heatmap</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=visualization&v=weekly" defer ></script> </body> </html>
Sample را امتحان کنید
اطلاعات بیشتر
در مورد موضوعات زیر بیشتر بخوانید: