background

  • Since the first version was based on a cross-page siting tool created by Windvane, there were a number of students in the community who wanted to make a version that supported pure H5
  • This was one of my unfinished projects in phase one

Phase I: An autonavi + Windvane siting tool that says: Bye-bye to the Autonavi siting component

Basic functions of the first-phase version

The entire siting tool is made into a single maintained project, with on-site capabilities, cross-page access, communication and return of final data results.

Functional analysis

Among them, the capabilities on the end are:

  • OpenPage opens a new page
  • ExitPage exits the container
  • GetLocation Gets latitude and longitude
  • NativePostMsgToJs means of communication

Alternative thinking

1. Function realization of original openPage and exitPage

  • Router new open route (N)

Cause: Page advance and retreat will trigger refresh, unfriendly to form scene, page cache experience is not good, cumbersome communication may cause problems

  • Put it into the frame and control the switch of the frame to render the map (N)

Reason: a little rigid, not enough customization, need to write a complete call process

  • Embed iframe to control iframe loading and removal (Y)

Reason: Avoid the disadvantage of opening a new page, can customize the iframe rendering position, paving the way for the subsequent communication

2. Function realization of the original getLocation

When the end version is done, it is to obtain the current coordinates as accurately as possible, so the real-time Mars coordinates are obtained through the end

2.1 Problems:

  1. In the case of weak network autonavi, there will be a delay in returning the Api to the current location
  2. The logo back to the current location is not obvious to the village elderly, and there is a delay in invocation
  3. The coordinate accuracy is not high enough

2.2 plan

  1. When the page is just rendered, the coordinates are first obtained through THE Api, and only the coordinates are saved in the later period to ensure that the subsequent operations do not lag
  2. The simulation returns the current location with an obvious hint, eliminating the delay in invoking the Api per click
  3. Get coordinate Api parameters for precision parameter configuration

3. The realization of the original nativePostMsgToJs communication means

Because I maintain the siting tool as a separate project, the parameters are passed through the URL when called

  • Using local cache communication is also possible, but it has limitations (rookie domain names) and is not flexible enough

Iframe was used for loading in container rendering on the simulation end above. PostMessage was used for communication in consideration of the communication between different projects to ensure that all business projects could use it

// Dynamically create or write an iframe load component
constaddIframe = useCallback( (data) => { let url = `${mapEnv}? h5=true&key=${data.key}&desc=${data.desc}&v=${data.v}&title=${data.title}&zoom=${data.zoom}&serverKey=${data.serverKey}&locatio n=${data.location}#/`;var iframe = document.createElement('iframe'); iframe.src = url; document.body.append(iframe); } []);const onCancle = () => { }
  const onOk = () => { }
  const cbMessage = useCallback(
    (e: any) => {
      console.log(e.data, 'eeeeecb---Message');
      if(! e || ! e.data) {return;
      }
      if (e.data.cancle) {
        onCancle();
      } else {
        onOk(e.data);
      }
    },
    [onCancle, onOk]
  );
  useEffect(() => {
addIframe(data)
    window.addEventListener('message', (e) => cbMessage(e), false);
    return window.removeEventListener('message', (e) => cbMessage(e), false);
  }, [data,cbMessage]);
Copy the code

Depth optimized package

Although the entire map is packaged into a separate module, it’s still a bit of a hassle for users of pure H5. In order to keep the user out of the box as much as possible, without considering redundant logic processing, a separate package is packaged for H5 users.

1. map-site

@alife/map-site

2. Capabilities provided by this component

  • Map custom render area
  • Configure all the capability parameters of the end version
  • Unify iframe arousal and destruction
  • Unified communication and event callbacks
// Call mode
import H5Map from '@alife/map-site'

<H5Map
        id="h5_iframe"
        visible={visible}
        showArea="my_map"
        params={{
          key: 'fb0cf7c70e6d139a2fe7d4b02af40a46',
          desc: '11 If the surrounding information is not selected, the marked point coordinates shall prevail. ',
          v: '2.0',
          title: 'location demo',
          zoom: '15',
          serverKey: '8e5a71262cda4c03862279b0b9849515',
          location: result ? result.location : 120.154066 ', 30.290777 ',
        }}
        onCancle={() => {
          setVisibile(false);
          console.log('on calcle');
        }}
        onOk={(e: any) => {
          setResult(e);
          setVisibile(false);
          console.log(e, 'onOk cb'); }} / >Copy the code

In this way, we don’t need to pay attention to the redundant logic processing, all to this layer of intermediate components for unified processing

3. Effect drawing display

The overall style is the same as the end version, try to smooth out the differences to keep consistent

3.1 Local Custom Region Rendering (custom Render ID)

3.2 Full Screen Rendering (default full screen Rendering)

Welcome everyone access experience, put forward valuable advice

The overall style is the same as the end version, try to smooth out the differences to keep consistent

@alife/map-site

@ alife/map-site:https://web.npm.alibaba-inc.com/package/@alife/map-site

GitHub is open source

Pure H5 code open source: https://github.com/babybrotherzb