Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article will be developed on the basis of the latest version of Amap 2.x. The first time I used the 2.x version, I was still in a panic, hoping to step on fewer pits…

Scott map2.xversion

There are still many changes in 1.x and 2.x versions. Map JSAPI 2.0 is the fourth generation Web map rendering engine provided by Autonavi Open Platform for free. It takes WebGL as the main drawing method and widely adopts various cutting-edge technologies to greatly improve interactive experience and visual experience. Compatible with all browser environments IE9 and above, version 2.x sample center

Map declaration file

Global declaration file

declare global { namespace AMap { const addCss: (newStyle: string) => void; export interface Area { visible: boolean; rejectTexture: boolean; color1: string; color2: string; path: any[]; } interface BaseLayer { hide(): void; show(zIndex: number): void; add(vectors: VectorOverlay | VectorOverlay[]): void; remove(vectors: VectorOverlay | VectorOverlay[]): void; has(vector: any): boolean; clear(): void; setOptions(opts: any): void; }... }Copy the code

LOCA Data visualization API 2.0

Layer container and layer controller

Var map = new map. map ('map', {showLabel: false, viewMode: '3D', pitch: 50, zoom: 12, // Initialize map level center: [121.496534, 31.243335] // Initialize map center}); Var loca = new loca. Container({map: map,}); Blight = {intensity: 0.8, 0 ~ 1 color: '# FFF ', // environmental light color}; Color: 'RGB (255,255,255)', // color: RGB (255,255,255) [0, 0, 0], / / light into the position of target position: [0, 1, 1], / / coordinate position}; // pointLight = {color: 'RGB (255,255,255)', [121.50741577148439, 31.236288641793006, 1000], // The position of the point light intensity: 4, // The light intensity // The distance indicates the distance from the light source to the position where the light intensity is 0, 0 means that the light does not disappear. distance: 10000, }; // Create various layers todo:... // Start animation loca.animate. Start (); // Pause animation loca.animate. Pause (); // Stop animation loca.animate. Stop ();Copy the code

Changes in the project

packageDependent package change

"Dependencies" : {" @ amap/amap - jsapi - loader ":" ^ "1.0.1," @ amap/amap - jsapi - types ":" ^ 0.0.8 "}Copy the code

Map dependency package configuration,Be careful with this step and match the package version numbers

Import AMapLoader from '@amap/amap-jsapi-loader'; Vue.use(AMapLoader); // amaploader. load({"key": process.env.vue_app_map_key, // The applied Web developer key, the first time to call the load must be filled with "version": "2.0", // Specify the version of JSAPI to be loaded, default is 1.4.15 "plugins": [], // list of plugins to be used, such as "amap.scale" and "AMapUI": {// Whether to load AMapUI, default does not load "version": "Plugins ":['overlay/SimpleMarker']," overlay/SimpleMarker ":['overlay/SimpleMarker'] By default, "version" is not loaded: '2.0.0' // Loca version, Default 1.3.2},}).then(() => {// todo // successful map instance operation}).catch(error => {// map loading error trap console.log(error); })Copy the code

Use the Visual Map Layer container controller

This. mapRoadIns = new map. Map('mapLoca', {viewMode: '3D', zoom: 11.8, center: [121.304018, 31.217688], mapStyle: 'amap: / / styles/bf648dad78e5b49b24f02d7d8e069bde, showBuildingBlock: This.locains = new loca.container ({map: this.maproadins,})Copy the code

Cruiser example

Amap cruise organ side example

Load ([' UI /misc/PathSimplifier'], (PathSimplifier) => {if (! PathSimplifier. SupportCanvas) {alert (' the current environment doesn't support Canvas! '); return; } window.PathSimplifier = PathSimplifier window.pathSimplifierIns = pathSimplifierIns; setTimeout(() => { this.setGpsTrackList() })Copy the code
Problems in development

The cruise track does not correspond to the map. Personally, I think it is an asynchronous problem, which leads to inconsistent points and positions. The solution is style compensation

 position: relative;
    width: 100%;
    height: 100%;
}
.amap-ui-pathsimplifier-container canvas {
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
Copy the code

End result

Problems with 3D viewsFinally, a 2D demo

conclusion

Compared to two kinds of methods, I feel or the second solution is more flexible, configurable and scalable function, plan a application animation function is more, the picture is fluent, but the animation is not easy to control process, to be set in driving, can only work to reset the animation, demand is not much, can consider to use the, Hope experienced big guy points out correct exchange, progress together!