1.1.0
This is a React map component based on OpenLayers, suitable for React and Next;
(Currently supported map service providers include Amap and OpenStreetMap),
and a unified interface is provided to facilitate developers to integrate map functions.
(Currently supported map service providers include Amap and OpenStreetMap),
and a unified interface is provided to facilitate developers to integrate map functions.
The maps shown in this document are for development and testing purposes only and are not suitable for production environments or commercial use. If you want to use them in a production environment, please be sure to apply for and use your own map service key! Go to the developer platform（AMap）
Full Demo
How to use？
1.Installation
npm i tango-map-cw @amap/amap-jsapi-loader* If you want to use the OpenLayers basemap and implement more native OpenLayers features, you need to install additional:
npm i olAfter that, you can use it in TangoMapViewer. Tango-map-cw has exposed the native capabilities of ol to developers, and can directly call all native APIs.
2.Import
// React
import { TangoMapViewer } from "tango-map-cw";
// Next
import dynamic from "next/dynamic";
const TangoMapViewer = dynamic(
() => import("tango-map-cw").then(mod => mod.TangoMapViewer),
{ ssr: false }
);
3.Usage
To properly call the API, please register as a developer on the AutoNavi Open Platform and apply for a web platform （JS API） key and security key. Go to the developer platform
// provide WGS84
const beijingGugong: [number, number] = [116.390741, 39.917351];
<TangoMapViewer
provider="amap" // map provider，support amap and ol（OpenStreetMap）
mapKey="your map key"
center={beijingGugong}
zoom={13} // the initial zoom ratio of the map, the zoom size of the map when loading（3-18）
style={{ width: "600px", height: "400px" }}
/>
Create markers on the map
// provide WGS84
type Marker = {
id: string | number;
mark: [number, number]; // [lon, lat]，WGS84
icon?: {
url: string; // supports images, but not SVG
size?: [number, number]; // width, height, icon size
};
};
// makers array
const markers = [
{
id: "point 1",
mark: [116.390741, 39.917351],
},
{
id: "point 2",
mark: [116.400741, 39.917351],
},
{
id: "point 3",
mark: [116.400741, 39.927351],
},
];
// show on map
<TangoMapViewer
provider="amap"
mapKey="your map key"
center={beijingGugong}
zoom={13}
style={{ width: "600px", height: "400px" }}
markers={markers} // markers array
/>
Creating vector polylines on the map
// provide WGS84
type Line ={
id: string | number;
coordinates: number[][];
strokeColor?: string;
strokeWidth?: number;
lineJoin?: "round" | "bevel" | "miter"; // polyline inflection point connection style
}
// array of node coordinates of the polyline
const allLines = [
{
id: "userLine1",
coordinates: [
[116.397128, 39.926],
[116.404, 39.914],
[116.388, 39.92],
[116.406, 39.921],
[116.39, 39.913],
[116.397128, 39.926],
],
strokeWidth: 4, // line width
strokeColor: "blue", // line color
lineJoin: "round", // polyline inflection point connection style
},
];
// show on map
<TangoMapViewer
provider="amap"
mapKey="your map key"
center={beijingGugong}
zoom={13}
style={{ width: "600px", height: "400px" }}
line={allLines} // polylines array
/>
Get location on the map
* Your server must be HTTPS（or localhost）to use this feature, and users need to authorize browser location permissions
<TangoMapViewer
provider="amap"
mapKey="your map key"
center={beijingGugong}
zoom={13}
style={{ width: "600px", height: "400px" }}
location // get the current location and display the positioning button
onLocate={(data) => { // positioning success callback
console.log("data ==> ", data);
}}
/>
* check the print information of successful positioning in the browser console
TangoMapViewer Props