Создание Java-апплета для отображения географических карт
Многие начинающие Java-программисты, после знакомства с базовыми возможностями и методами создания Java-апплетов, пробуют применить полученные знания для написания уже собственных апплетов — небольших программ, добавляемых к веб-странице. Итак, если вы тоже один из них, то сегодня мы попробуем вместе создать свой несложный апплет для отображения географической карты. Целью создания данного приложения будет то, что часто требуется разместить план или карту того или иного объекта больших размеров.
И поскольку детальное изображение не будет вписываться в дизайн и приведет к медленной загрузке веб-странички, то большинство HTML-программистов прибегает к использованию тега , позволяющему создать несколько «кликабельных» областей на изображении. Мы же, естественно, отстанемся верны Java и попробуем создать апплет Map, который будет отображать общий глобальный план и по щелчку мыши загружать более детальное изображение выделенной области карты. Так как карта у вас будет у каждого своя, то весьма разумно будет создать апплет, который будет можно легко настроить на любые изображения. Вы уже знаете, что параметры апплета задаются в HTML-теге , поэтому чтобы наш пример был полезнее для вас в освоении Java попробуем для настройки приложения использовать файл конфигурации. Такая конструкция кроме всего прочего позволит «спрятать» от любопытных глаз «конструкцию» вашей карты и не даст скопировать файлы изображений.
Поэтому первое, с чего мы пожалуй начнем проектирование апплета — разработаем структуру файла конфигурации. Итак, Map.dat будет содержать названия графических файлов разных частей карты и координаты областей, где пользователь по щелчку мыши сможет получить «увеличенную» картинку. Следуя нашему техническому заданию разобъем файл на две части: глобальный вид и детальные изображения с координатами. Итак, получим примерно следущее:
# Global map picture V0.jpg # Map area definition 202 214 55 55 V1.jpg 202 159 55 55 V2.jpg 257 159 55 55 V3.jpg 257 214 55 55 V4.jpg 92 214 55 55 V7.jpg 147 214 55 55 V8.jpg 147 159 55 55 V9.jpg 92 159 55 55 V10.jpg
Используя знак «#» можно будет отделять комментарии от остального содержания файла.
Теперь начнем проектировать непосредственно сам Java-апплет. Создайте файл нашего будущего класса Map.java. И поместите туда следущее:
import java.applet.*; public class Map extends Applet < /** * Initialization. */ public void init() < // Прочитать файл конфигурации // Отобразить карту >>
Как видите из комментариев (Листинг 2) дело осталось за малым: прочитать файл конфигурации и в соответствии с полученными значениями отобразить карту. Начнем с первого. Создадим метод getData() для чтения файла конфигурации Map.dat. Для доступа к файловой системе (чтение файла) нам потребуется использовать классы InputStream и StreamTokenizer из пакета java.io. Класс StreamTokenizer реализует простой лескический сканер, который разбивает поток символов InputStream на лексемы (слова). Это полезно для нас так как наш файл Map.dat содержит различные лексемы: координаты областей в виде чисел и названия файлов. Создав фильтр, можно воспользоваться методом nextToken() для чтения лексем. Он возвращает либо символ, либо константу: StreamTokenizer.TT_EOF, StreamTokenizer.TT_NUMBER, StreamTokenizer.TT_WORD. Фильтрацию комментариев, которые у нас начинаются с символа «#», можно просто осуществить при помощи метода commentChar().
Текст метода будет следующим:
/** * Read the data file Map.dat. */ protected void getData() < InputStream is=null; int i=0; int ix=0; int x=0,y=0,w=0,h=0; try < try < is = new URL(getCodeBase(), "Map.dat").openStream(); StreamTokenizer st = new StreamTokenizer(is); st.eolIsSignificant(false); st.commentChar('#'); while (st.ttype != StreamTokenizer.TT_EOF) < st.nextToken(); if (st.ttype==st.TT_NUMBER) < int n = (int) st.nval; switch (i) < case 0: x = n; break; case 1: y = n; break; case 2: w = n; break; case 3: h = n; break; >i++; if (i==4) < lPoint[ix] = new Point(x,y); rPoint[ix] = new Point(w,h); i=0; >//continue; > if(st.ttype==st.TT_WORD) < mapFile[ix]=st.sval; ix++; >> /* while */ > catch (MalformedURLException e) <> > catch (IOException e) <> count=ix; > Вы должны были заметить, что в приведенном коде встретились еще необъясненные поля lPoint и rPoint. Это массивы класса Point в которых мы будем хранить точки, считанные из файла. Класс Point, описанный как часть пакета awt, представляет собой структуру данных, которая может хранить координаты X,Y. mapFile — строковый массив для хранения имен файлов.
Теперь приступим к getMap(). В качестве параметра вызова этого метода будет имя файла pic, который требуется показать. После загрузки картинки не забудем перерисовать апплет при помощи repaint();
/** * Get file of map picture from URL. */ private void getMap(String pic) < map = getImage(getCodeBase(), pic); repaint(); >/** * Update applet. **/ public void update(Graphics g) < paint(g); >public void paint(Graphics g) < g.drawImage(map,0,0,this); g.setColor(Color.black); g.drawRect(0,0,size().width-1, size().height-1); if (!isZoom & curId!=0) < g.setColor(Color.red); g.drawRect(lPoint[curId].x, lPoint[curId].y, rPoint[curId].x, rPoint[curId].y); >>
Листинг 4. Методы getMap(), update() и paint()
Для переключения между общим и детальным планом будем использовать булеву переменную isZoom, которая будет true, тогда когда нам потребуется увеличивать нашу карту, т.е. показать картинку детального плана. Увеличение/уменьшение будет происходить при помощи щелчка мыши по карте. Для того, чтобы пользователь, использующий наш апплет, смог определить куда ему нажимать (возможно, что не все области общего плана можно будет увеличить), при наведении курсора мыши на «кликабельную» область будем показывать ее прямоугольную рамку красного цвета. Таким образом вам осталось только добавить методы, которые будут отвечать за обработку событий мыши.
public boolean mouseUp(Event evt, int x, int y) < if (isZoom) < isZoom=false; getMap(mapFile[0]); >else < if (curId == 0) < showStatus("This area have not zoom."); >else < isZoom=true; getMap(mapFile[curId]); >> return true; > public boolean mouseMove(Event evt, int x, int y) < int i; i = getIndex(x,y); if (!isZoom) < if (curId != i) < if (curId != 0) repaint(lPoint[curId].x, lPoint[curId].y,rPoint[curId].x+1, rPoint[curId].y+1); if (i != 0) showArea(i); curId = i; >> return true; > /** * Show area under mouse pointer. **/ private void showArea(int i) < Graphics g = null; g = this.getGraphics(); g.setColor(Color.red); g.drawRect(lPoint[i].x, lPoint[i].y, rPoint[i].x, rPoint[i].y); >/** * Get index of map image. **/ private int getIndex(int x, int y) < for (int i=1; i=lPoint[i].x & x=lPoint[i].y & y
Листинг 5. Обработка событий мыши
Ну и наконец, сделаем более дружественный интерфейс — добавим простой метод, который будет отображать сообщения в строке статуса браузера.
/** * Show message in status line. **/ private void zoomStatus()
Листинг 5. Метод zoomStatus()
Теперь, естественно, не забыв добавить все поля и классы, которые используем, получим следущее:
import java.awt.*; import java.awt.image.*; import java.applet.*; import java.net.*; import java.io.*; public class Map extends Applet < int max=100; Image map; int count; Point lPoint[]; Point rPoint[]; String mapFile[]=new String[max]; int curId; boolean isZoom; /** * Initialization. */ public void init()
Листинг 6. Окончательный вид начала файла класса
Откомпилировав код и получив файл апплета Map.class попробуем вызвать его из HTML-страницы. Вызов класса из страницы будет следующим:
Не забудьте поместить файлы вашей карты в тот же каталог, где находятся апплет, HTML-страница и Map.dat.
Display a web map
Learn how to create and display a map from a web map stored in ArcGIS .
A web map contains the definition of a map , including properties such as the basemap , initial extent , layers , styles , pop-ups , and labels . You can author and save web maps using the Map Viewer or ArcGIS Pro and share them in ArcGIS . Each web map is stored as an item in ArcGIS Online or ArcGIS Enterprise , allowing you to access a web map from a portal using its item ID and display it in your app.
In this tutorial, you use a web map ‘s item ID to display a map of trails, trailheads and parks in the Santa Monica Mountains . The web map is hosted in ArcGIS Online .
Note
For more background information about the topics in this tutorial, visit Maps (2D) and in the Mapping APIs and location services guide.
Prerequisites
The following are required for this tutorial:
- An ArcGIS account to access your API keys . If you don’t have an account, sign up for free.
- Confirm that your system meets the minimum system requirements.
- An IDE for Java.
Note
This tutorial uses IntelliJ IDEA, but the code described will work within any supported Java IDE.
Steps
Open a Java project with Gradle
- To start this tutorial, complete the Display a map tutorial, or download and unzip the Display a map solution into a new folder.
- Open the build.gradle file as a project in IntelliJ IDEA.
- If you downloaded the solution project, set your API key.
- Go to your developer dashboard to get your API key . For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.
- In IntelliJ IDEA‘s Project tool window, open src/main/java/com.example.app and double-click App.
- In the start() method, set the API key property on the ArcGISRuntimeEnvironment with your API key . Replace YOUR_API_KEY with your actual API Key. Be sure to surround your API Key with quotes, because the parameter passed to se t A p i K ey is a string.
@Override public void start(Stage stage) // set the title and size of the stage and show it stage.setTitle("Display a map tutorial"); stage.setWidth(800); stage.setHeight(700); stage.show(); // create a JavaFX scene with a stack pane as the root node, and add it to the scene StackPane stackPane = new StackPane(); Scene scene = new Scene(stackPane); stage.setScene(scene); // Note: it is not best practice to store API keys in source code. // The API key is referenced here for the convenience of this tutorial. String yourApiKey = "YOUR_API_KEY"; ArcGISRuntimeEnvironment.setApiKey(yourApiKey); Prepare files before coding the app
Modify the files from the Display a map tutorial so that they can be used in this tutorial: you will add and remove imports, change the application title, and remove unnecessary code.
- In IntelliJ IDEA‘s Project tool window, open src/main/java/com.example.app and double-click App.
- Add the following imports above the existing imports:
15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 16 17 18 19 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 20 19 18 17 16 15 14 13 13 13 13 13 13 13 13 13 13 13 13 13 13
import com.esri.arcgisruntime.portal.Portal; import com.esri.arcgisruntime.portal.PortalItem; import com.esri.arcgisruntime.ArcGISRuntimeEnvironment; import com.esri.arcgisruntime.mapping.ArcGISMap; import com.esri.arcgisruntime.mapping.view.MapView;