安卓智能地图开发与实施九：地图缩放与旋转 - ArcGIS Runtime SDK for Android（Version 100.0.0）

最新推荐文章于 2024-07-10 15:42:17 发布

虾神说D

最新推荐文章于 2024-07-10 15:42:17 发布

阅读量5.3k

点赞数 3

分类专栏： Mobile GIS 文章标签： arcgis-runtime-sdk-for-android 安卓缩放旋转 100 韩源萌

本文链接：https://blog.csdn.net/allenlu2008/article/details/72236318

版权

Mobile GIS 专栏收录该内容

25 篇文章 72 订阅

订阅专栏

移动电子地图缩放与旋转

MapView（com.esri.arcgisruntime.mapping.view.MapView）自身提供手势操作来放大、缩小、旋转。当通过按钮或者说事件来调整电子地图放大、缩小、旋转时，需要稍微调整。

这里写图片描述

MapView提供了和放大、缩小、旋转相关的方法如下：
setViewpointAsync：改变当前移动电子地图的视图范围
setViewpointRotationAsync：改变旋转角度
setViewpointScaleAsync：改变比例尺

这里写图片描述

注：当使用本地切片时，很难获取到Layer的所有Scale（比例尺），无法一级一级缩放。当然，使用在线切片地图作为基础底图时可以采用setViewpointScaleAsync方法一级一级缩放。

电子地图旋转

这里写图片描述

直接使用setViewpointScaleAsync方法。指北参数为0。

MapView mainMapView =
 (MapView) findViewById(R.id.mMapView);
mainMapView.setViewpointRotationAsync(0);

电子地图缩放

这里写图片描述

操作稍微有点复杂，因为没有直接的ZoomIn和ZoomOut方法。可以通过设置Viewpoint（setViewpointAsync）和Scale（setViewpointScaleAsync）来实现。使用设置Scale较为简便。

double mScale = mainMapView.getMapScale();
mainMapView.setViewpointScaleAsync(mScale*0.5);
mainMapView.setViewpointScaleAsync(mScale*2);

隐藏电子地图的网格

MapView（com.esri.arcgisruntime.mapping.view.MapView）默认提供了带有网格效果，通过其setBackgroundGrid ()方法，来设置，接收参数为
BackgroundGrid（com.esri.arcgisruntime.mapping.view.BackgroundGrid）

BackgroundGrid mainBackgroundGrid = new BackgroundGrid();
mainBackgroundGrid.setColor(0xffffffff);
mainBackgroundGrid.setGridLineColor(0xffffffff);
mainBackgroundGrid.setGridLineWidth(0);
mainMapView.setBackgroundGrid(mainBackgroundGrid);

基本的安卓程序框架

主要包括台头（ToolBar）、MapView对象、地图浮动按钮以及图层管理侧滑面板。
Android Studio已经提供了基本的控件，例如DrawerLayout、ToolBar、LinearLayout、ConstraintLayout、NavigationView等帮助我们构建一个基本的安卓程序框架。

创建空工程

这里写图片描述

详细步骤参考
安卓智能地图开发与实施三：创建第一个地图程序 - ArcGIS Runtime SDK for Android（Version 100.0.0）。
http://blog.csdn.net/allenlu2008/article/details/71112432

隐藏原有的ActionBar

这里写图片描述

添加无ActionBar样式，并在AndroidManifest.xml中指向该样式。

style.xml文件

 <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

替换主程序依托类

使用DrawerLayout布局，主要是为了后续做侧滑面板。继承Application新制作自定义类，是为了存储自定义变量，方便各个模块之间调用。

这里写图片描述

注意，需要添加引用（DrawerLayout、NavigationView），

compile 'com.android.support:support-v4:25.3.1'
compile 'com.android.support:design:25.3.1'

自定义Activity

继承AppCompatActivity新制作自定义Activity，主要用以分离业务类代码。

这里写图片描述

package esrichina.hymn.usingmappingbyhymnlocal;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.view.Menu;
import android.view.MenuItem;

import com.esri.arcgisruntime.mapping.view.MapView;

import esrichina.hymn.Bootstrap.TypefaceProvider;
import esrichina.hymn.Methods.MapViewMethodsClass;
import esrichina.hymn.usingmappingbyhymnlocal.Components.MainActivityHeaderComponent;
import esrichina.hymn.usingmappingbyhymnlocal.Components.MainManagerLayerComponent;
import esrichina.hymn.usingmappingbyhymnlocal.Components.MainMapFloatButtonComponent;

/**
 * Created by HymnHan on 2017/5/10.
 */

public class HymnActivity extends AppCompatActivity {
    public static HymnActivity mainHymnActivity;
    protected Configurations mainConfigurations;
    private MapView mainMapView;
    private DrawerLayout mainContainer;

    //Activity 台头模块
    private MainActivityHeaderComponent mainActivityHeaderComponent;
    //Mapview 地图浮动按钮模块
    private MainMapFloatButtonComponent mainMapFloatButtonComponent;
    //LayerManager 地图图层管理
    public MainManagerLayerComponent mainManagerLayerComponent;
    public HymnActivity() {
        super();
    }
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mainHymnActivity = this;
        mainConfigurations = (Configurations) getApplication();
        TypefaceProvider.registerDefaultIconSets();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_activity_header_menu, menu);
        MenuItem menuItem = menu.findItem(R.id.action_search);//在菜单中找到对应控件的item
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
        return true;
    }
    public void Configurations(MapView mMapView, DrawerLayout mDrawerLayout){
        mainMapView = mMapView;
        mainContainer = mDrawerLayout;
        mainConfigurations.ConfigurationsFunction(mMapView,mDrawerLayout);
        //初始化台头
        mainActivityHeaderComponent = new MainActivityHeaderComponent();
        //初始化地图浮动按钮
        mainMapFloatButtonComponent = new MainMapFloatButtonComponent();
        //初始化地图图层管理
        mainManagerLayerComponent = new MainManagerLayerComponent();
    }
    public void CloseDrawerFunction() {
        if (mainContainer != null) {
            mainContainer.closeDrawer(GravityCompat.START);
            mainContainer.closeDrawer(GravityCompat.END);
        }
    }

    public void OpenLeftDrawerFunction() {
        if (mainContainer != null) {
            mainContainer.openDrawer(GravityCompat.START);
        }
    }

    public void OpenRightDrawerFunction() {
        if (mainContainer != null) {
            mainContainer.openDrawer(GravityCompat.END);
        }
    }
    public Configurations getMainConfigurations() {
        return mainConfigurations;
    }
    public MapView getMainMapView() {
        return mainMapView;
    }
    public DrawerLayout getMainContainer() {
        return mainContainer;
    }
}

制作ToolBar

使用安卓自带的ToolBar，制作基本框架的台头。

这里写图片描述

main_activity_header_container.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="esrichina.hymn.mapbasicframeworkbyhymn.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/mainHeaderToolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" >
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

MainActivityHeaderComponent.java文件：

package esrichina.hymn.mapbasicframeworkbyhymn.Components;

import android.support.v7.widget.Toolbar;

import esrichina.hymn.mapbasicframeworkbyhymn.R;

/**
 * Created by HymnHan on 2017/5/11.
 */

public class MainActivityHeaderComponent extends BaseComponent {
    public MainActivityHeaderComponent() {
        Toolbar toolbar = (Toolbar) mainHymnActivity.findViewById(R.id.mainHeaderToolBar);
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setTitle(R.string.app_name);
        toolbar.setSubtitle(R.string.sub_app_name);
        mainHymnActivity.setSupportActionBar(toolbar);
    }
}

制作地图布局文件

这里写图片描述

地图浮动按钮文件（main_map_floatbutton_container.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="48dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="@dimen/window_header_height_inner"
    android:layout_marginRight="@dimen/window_inner"
    app:layout_constraintRight_toRightOf="parent"
    android:orientation="vertical">
    <esrichina.hymn.Bootstrap.BootstrapButtonGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:bootstrapBrand="info"
        app:roundedCorners="true">
        <esrichina.hymn.Bootstrap.BootstrapButton
            android:id="@+id/mainNorthBT"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:fontAwesomeIcon="fa_compass" />
        <esrichina.hymn.Bootstrap.BootstrapButton
            android:id="@+id/mainZoomInBT"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:fontAwesomeIcon="fa_plus" />
        <esrichina.hymn.Bootstrap.BootstrapButton
            android:id="@+id/mainZoomOutBT"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:fontAwesomeIcon="fa_minus" />
        <esrichina.hymn.Bootstrap.BootstrapButton
            android:id="@+id/mainFullMapBT"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:fontAwesomeIcon="fa_globe" />
    </esrichina.hymn.Bootstrap.BootstrapButtonGroup>
    <esrichina.hymn.Bootstrap.BootstrapButton
        android:id="@+id/mainOpenRightBT"
        android:layout_marginTop="@dimen/window_inner"
        app:bootstrapBrand="info"
        app:roundedCorners="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        app:typicon="ty_tabs_outline"/>
</LinearLayout>

地图浮动按钮文件（main_map_container.xml）：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.esri.arcgisruntime.mapping.view.MapView
        android:id="@+id/mainMapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp" />
    <include layout="@layout/main_map_floatbutton_container"/>
</android.support.constraint.ConstraintLayout>

浮动按钮布局利用了BootstrapButtonGroup和BootstrapButton，感兴趣的同学可以参考https://github.com/Bearded-Hen/Android-Bootstrap。

MainMapFloatButtonComponent.java文件：

package esrichina.hymn.mapbasicframeworkbyhymn.Components;


import android.view.View;

import esrichina.hymn.Bootstrap.BootstrapButton;
import esrichina.hymn.Methods.MapViewMethodsClass;
import esrichina.hymn.mapbasicframeworkbyhymn.Configurations;
import esrichina.hymn.mapbasicframeworkbyhymn.R;


/**
 * Created by HymnHan on 2017/4/7.
 * MapView 浮动按钮模块
 */

public class MainMapFloatButtonComponent extends BaseComponent {
    private BootstrapButton mainNorthBT;
    private BootstrapButton mainZoomInBT;
    private BootstrapButton mainZoomOutBT;
    private BootstrapButton mainFullMapBT;
    private BootstrapButton mainOpenRightBT;

    public MainMapFloatButtonComponent() {
        mainNorthBT = (BootstrapButton) mainHymnActivity.findViewById(R.id.mainNorthBT);
        mainNorthBT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MapViewMethodsClass.ChangeMapViewRotationFunction(mainConfigurations.getMainMapView());
            }
        });
        mainZoomInBT = (BootstrapButton) mainHymnActivity.findViewById(R.id.mainZoomInBT);
        mainZoomInBT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MapViewMethodsClass.ChangeMapViewScaleZoomInFunction(mainConfigurations.getMainMapView());
            }
        });
        mainZoomOutBT = (BootstrapButton) mainHymnActivity.findViewById(R.id.mainZoomOutBT);
        mainZoomOutBT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MapViewMethodsClass.ChangeMapViewScaleZoomOutFunction(mainConfigurations.getMainMapView());
            }
        });
        mainFullMapBT = (BootstrapButton) mainHymnActivity.findViewById(R.id.mainFullMapBT);
        mainFullMapBT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MapViewMethodsClass.ChangeMapViewViewpointFunction(
                        mainConfigurations.getMainMapView(),mainConfigurations.getMainFullExtent());
                MapViewMethodsClass.ChangeMapViewRotationFunction(mainConfigurations.getMainMapView());
            }
        });
        mainOpenRightBT = (BootstrapButton) mainHymnActivity.findViewById(R.id.mainOpenRightBT);
        mainOpenRightBT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mainHymnActivity.OpenRightDrawerFunction();
            }
        });
    }
}