android WebView使用leaflet加载天地图

android混合式开发加载天地图

1.创建项目

 引入依赖

将目录切换为app目录在activity_main.xml写

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="0dp">
​
​
​
 <com.github.lzyzsd.jsbridge.BridgeWebView
     android:id="@+id/webview"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />
​
</LinearLayout>

再到MainActivity类写

在onCreate方法里面写

webview = findViewById(R.id.webview);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);    //设置webview支持javascript
settings.setUseWideViewPort(true);    //设置webview推荐使用的窗口，使html界面自适应屏幕
webview.setDefaultHandler(new DefaultHandler());
webview.setWebViewClient(new WebViewClient());
webview.loadUrl("file:///android_asset/dist/index.html");

再到清单列表中加入网络加载权限

Vue代码如下

<template>
​
  <div class="main">
    <el-button @click="local" style="position: absolute;top: 10%; z-index: 1000">默认按钮</el-button>
    <el-button @click="back" style="position: absolute;top: 10%;right: 0; z-index: 1000">返回</el-button>
    <div id="map">
    </div>
  </div>
</template>
​
<script>
​
// import IP from '@/netWork/requestIp';
// import Trans from '@/api/transform'
export default {
  name: "index",
  data() {
    return {
      map: null,
      locationLayer: null,
      coordtransform: null,
    }
  },
  created() {
    // this.common.documentInit();
  },
  computed: {},
  mounted() {
    this.init();
    window.callJsFunction = this.callJsFunction;
    // this.timer = setInterval(this.local, 1000);
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      // this.coordtransform = Trans.init();
      this.mapInit();
      // let center = this.webMercator2lonLat([13134068.526061961427331, 4044242.124333931598812]);
      // this.currentLocation(center,280);
    },
    back() {
      this.$router.push({name:'index'});
    },
    mapInit() {
      let that = this;
      let center = that.webMercator2lonLat([13134068.526061961427331, 4044242.124333931598812]);
      let layer = L.tileLayer('http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1');
      this.map = L.map("map", {
        center: center, // 地图中心
        zoom: 14, //缩放比列
        layers: [layer],
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
      });
    },
​
    //墨卡托转经纬度
    webMercator2lonLat: function (mercator) {
      var lonlat = [];
      var x = mercator[0] / 20037508.34 * 180;
      var y = mercator[1] / 20037508.34 * 180;
      y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
      lonlat[0] = y;
      // lonlat[1] = parseFloat(y.toFixed(4));
      lonlat[1] = x;
      return lonlat;
    },
    }
    }
    </script>
​
<style scoped>
.main {
  width: 100%;
  height: 100%;
}
​
#map {
  width: 100%;
  height: 100%;
​
}
</style>

效果图如下