introduce

In the first chapter, we made a simple demo test and uploaded it into a NPM package to the NPM official website. It can also be used directly in other projects. What we need to do next is to integrate Leaflet with supermap, Mapbox and other functions and make it into a NPM package for others to use

Leaflet introduction

Leaflet is an open source JS map library, so it only has map components and does not provide API of map content equivalent to Baidu Map or Autonavi map or other maps. It is very lightweight and powerful and can render most maps on the market, such as Baidu Map, Autonavi Map, Google Map, Supermap, mapbox Map of heaven and Earth or picture map, but to render based on the online map of map vendors, such as relying on Supermap ArcGIS gaode Baidu leaflet has some more basic functions of the API, such as rendering map simple points and so on. If we need to do some thermal map what we still need to download other dependence In the process of my development, I greatly affected the progress and spent most of my time looking for suitable plug-ins and some problems of adaptation. Speaking of which, I think you also understand the benefits and power of leaflet.js. Our next goal is to re-encapsulate the Leaflet so that we only need to call the component to pass in the corresponding parameters Like element ANTD and other UI libraries, it will obviously save a lot of development time. For example, we can use maps from multiple manufacturers in a project. For example, I use Baidu Map on one page and MAPBox to make 3D maps on the other page At this time, we just need to change the incoming parameters of map and it is OK. There is no need to write the functional code about marker of mapbox. Our goal is to complete a simple configuration, use corresponding components and transfer corresponding parameters Turn it into an NPM package right out of the box!

1. Organize project folders

1.1 Organize the project directory

In the last article we created a test folder for testing purposes and now it is no longer useful. We can delete it and create an lMap folder or just rename the Test folder lMap and use it as a place to store the map components. The overall structure remains the same as it was yesterday

1.2 Preparing to Construct the Map folder

Now that we have created the lMap folder we are going to start writing the code that will render our map so that we can see the structure clearly and we are going to create a map folder in SRC folder and we are going to put the code for our map in SRC/Map folder and then we are going to have a circle of dots in that folder The types folder was created under SRC to hold the.d.ts files and an _abstract folder was created under SRC to hold the abstract TS rules of some functions The directory structure at this point

2. Start building the map component

2.1 Installing the Leaflet plug-in

The folder has been placed and the main files have been created. Next, let’s start to write the map components. First, install the Leaflet plug-in Mapbox does not require installation dependencies

yarn add leaflet; // Install leaflet yarn add@supermap /iclient-leaflet // Install the supermap engineCopy the code

2.2 Start preparing to start development

After the installation is completed, we can start to develop our map components. First of all, map.ts is introduced under the Map folder

// import leaflet import L from "leaflet"; // import "leaflet/dist/leaflet.css"; // supermap engine import "@supermap/iclient-leaflet";Copy the code

3. Start developing the map component

3.1 Write a template for the map component -> lMap/ SRC /index.vue

Since I was going to develop the NPM package, I created two development areas: a Vue file for rendering templates and a TS file for writing some map logic so that we could start writing the code for rendering map components in our index.vue In index.vue we basically write templates and base data and basically get the data from the parent component so we write the corresponding data in the place we use and then get the data and pass it to Map. ts for logical processing and rendering

The function of the createMap mapFunction.ts file is to assemble the exposed methods of the various functions and then write the corresponding functions of the file For example, the function we’re writing right now is the base render function and we’re going to write a createMap method in mapFunction.ts and then we’re going to write the configuration items that we need to get from the parent component that we’re going to pass in when we use the component and we’re going to give the arrangement below It then passes to Map.ts for rendering

//lMap/src/index.vue <template> <div style="width: 100%; height: 100%"> <div ref="map" style="with: 100%; height: 100%;" ></div> <slot></slot> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch, Provide } from "vue-property-decorator"; import MapFunction from "./map/mapFunction"; @Component({name: "lMap",}) export default class leafletMap extends Vue {// Map : any; Existence: Boolean = false; // map config @prop () config! : any; @prop ({type: [Array, Object], Required: true}) center! : [number, number] | { lng: number; lat: number }; // Map scale @prop ({required: true}) zoom! : number; // Map minimum zoom @prop () minZoom! : number; // map maxZoom @prop () maxZoom! : number; // Can the map be zoomed @Prop({default: true}) scrollWheelZoom! : boolean; @prop ({default: true}) draggable! : boolean; Get mapSetting() {return {center: this.center, zoom: this.zoom, minZoom: this.minZoom, maxZoom: this.minZoom: this.minZoom, maxZoom: this.maxZoom > 18 ? 18 : this.maxZoom, scrollWheelZoom: this.scrollWheelZoom, draggable: this.draggable, }; } // Map initialization async init() {try {if (this.map) {return await this.map.init (this.$refs.map as HTMLElement, this.mapSetting, this.$listeners); } } catch (err) { return Promise.reject(err); }} async mounted() {this.map = await mapfunction.createmap (this.config); this.init().then((event) => { this.existence = true; }); } } </script>Copy the code

Ts -> SRC /map/function.ts

The purpose of mapfunction. ts is to organize our function file ts. For example, we are going to reference our map.ts and we will introduce other map components in the future and expose themselves to be accessible and used

// src/map/mapFunction.ts import Map from "./_abstract/map"; import { MapConfig } from ".. /types"; import LeafletMap from "./map"; class MapFunction { static async createMap(config: MapConfig): Promise<Map> { return new LeafletMap(config.content); } } export default MapFunction;Copy the code

3.3 Write map rendering code -> SRC /map/map.ts

Here we have the code we use for our map and then we introduce the dependencies and then pass the parameters from index.vue to the map API. Now we will do a basic rendering of the Supermap cloud GIS map

// src/map/map.ts import Map from "./_abstract/map"; import { LeafLetMapConfig } from ".. /types"; // import leaflet import L from "leaflet"; // import "leaflet/dist/leaflet.css"; // supermap engine import "@supermap/iclient-leaflet"; The class leafletMap extends the Map {/ / leaflet dynamic configuration leafletMap: string | any = {}; constructor(config: LeafLetMapConfig) { super(); this.leafletMap = config; */ async init(elm: HTMLElement, setting: any = this.setting, listener? : any): Promise<any> { const config = this.leafletMap; try { if (! (window as any).supermap) {this.map = l.map(elm, {CRS: (L as any).crs [config.crs], // Initialize the geographic center of the map. Center: [setting.center[0], setting.center[1]], // maxZoom: setting. MaxZoom, // minZoom: Setting. MinZoom, // Initialize the map zoom zoom zoom zoom: setting. Zoom, // default to add zoom control zoomControl: False, // (Polygon scaling) : Determines whether the map can be scaled to the rectangle dragged out by the mouse while holding down the Shift key boxZoom: false, // Whether the map automatically handles browser window resizing to update itself. TrackResize: false, // Focuses on the map and allows the user to navigate the map using the keyboard's arrow keys and add/subtract keys. Keyboard: false, // (Fade animation) : Determines whether the tile fade animation is available. CSS3 transitions are generally supported by default in all browsers, except Android. FadeAnimation: true, // (Zoom animation) Determines whether tile zoom animation is available. CSS3 transitions are generally supported by default in all browsers, except Android: zoomAnimation: true, // (zoomAnimation: true) : Determines whether the zooming of a note plays with the map zooming animation. If disabled, the note will disappear when stretched in the animation. CSS3 transitions are generally supported by default in all browsers, with the exception of Android. MarkerZoomAnimation: true, // Attribute control --> Whether to display watermark attributionControl: false, // whether to allow zoom in and out scrollWheelZoom: True, // Drag dragging: true, // Double click to zoom in and out doubleClickZoom: false,}); (L as any)[config["type"]][config["mapType"]](config["url"]).addTo(this.map); } return this.map; } catch (error) { console.log(error, "map.ts-error"); } } } export default leafletMap;Copy the code

Now that I’ve rendered the basic map components I’m going to see if I can use them

4. Test use in the project

4.1 Test use in the project

As in the previous article, main.ts is introduced in packages/lMap/index.ts and packages/index.ts exposed in the VUE project and then passes the corresponding parameters in vUE directly using the component name L-map We specify in the component that we need to transmit the map configuration of center center point and initial zoom level of zoom maxZoom minZoom map Max/minZoom register and config. Next, let’s try it together

CRS: refers to the map coordinate system. Generally, there will be annotations in the map. Type: use the rendering engine of the map. Map type such as Map of heaven and Earth gaode URL: map rendering address

// doc/App.vue <template> <div id="app"> <div id="nav"> <l-map id="lmap" ref="map" :center="center" :zoom="zoom" :minZoom="minZoom" :maxZoom="maxZoom" :config="mapConfig"></l-map> </div> </div> </template> <script lang="ts"> import {  Component, Vue } from "vue-property-decorator"; Export Default class App extends Vue {// Map base configuration mapConfig = {content: {CRS: "EPSG3857", type: "supermap", mapType: "tiledMapLayer", url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China", }, }; // Map center = [39.90586280822754, 116.38834476470947]; // Map initial zoom level zoom = 10; // Map minZoom level = 3; // map maxZoom level maxZoom = 18; } </script> <style> #app { width: 1000px; height: 1000px; } #nav { width: 100%; height: 100%; } #lmap { width: 100%; height: 100%; background: Red; } </style>Copy the code

4.2 Viewing The Effect

Okay, all the parameters have been passed so let’s see what happens

Ok, no problem. The next step is to test packaging and other projects

5. Package and upload to NPM and other projects for testing

5.1 Downloading and Registering the NPM package

Package as in the previous article yarn lib and upload via NPM publish as described in the previous article and will not be repeated here

Then download our newly uploaded NPM package in our other projects and globally import our project dependencies and registrations in main.js

Import leafletMap from "lf-map-npm"; import leafletMap from "lF-map-npm "; Import "lf-map-npm/lib/lf-map-npm.css"; // Import "lf-map-npm/lib/lf-map-npm.css"; // Register our dependency package vue. use(leafletMap);Copy the code

5.2 Write test code

Basically the same code as above in the project

// App.vue <template> <div id="app"> <l-map id="lmap" ref="map" :center="center" :zoom="zoom" :minZoom="minZoom" :maxZoom="maxZoom" :config="mapConfig"></l-map> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component({}) export default class App extends Vue {mapConfig = {content: {CRS: "EPSG3857", type: "supermap", mapType: "tiledMapLayer", url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China", }, }; // Map center = [39.90586280822754, 116.38834476470947]; // Map initial zoom level zoom = 10; // Map minZoom level = 3; // map maxZoom level maxZoom = 18; } </script> <style> #app { width: 100%; height: 500px; margin-top: 60px; } </style>Copy the code

5.3 Viewing the Effect

Successfully render without any problems ~

conclusion

This article briefly describes the basic rendering functions of Leaflet and supermap. Other functions have not been realized yet. In the next article, some functions of integrated rendering mapbox and basic map will be realized, such as click to obtain coordinate position, destroy map, monitor map and other functions, and then encapsulate marker The target wants to introduce effects that the component can use by passing in the corresponding parameters

Hope to be helpful to you

If there are any mistakes, please point them out and discuss them warmly. The project has been packaged as NPM package on NPM official website. Welcome to download and use it

NPM address

NPM address www.npmjs.com/package/lf-…

https://www.npmjs.com/package/lf-map-npm
Copy the code

Making the address

I have put the map part under the map branch of the project. If you have any requirements, please download it from the Map branch and run it to see the effect

Making address github.com/dzc980812/l…

https://github.com/dzc980812/lf-map/tree/map
Copy the code
If need to reprint please indicate the source or obtain authorizationCopy the code