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.x
version
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
package
Dependent 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!