Tout d'abord, la raison du choix d'arcgis pour la cartographie est qu'il prend en charge le développement de diverses API telles que natives, JS, Android et IOS, et possède une chaîne écologique riche.En même temps, il peut compléter l'analyse des couches et des données C'est la raison la plus critique.
L'interaction de la carte dans uniapp doit se faire via renderjs.Lorsque la fonction map est très lourde, la couche renderjs sera très volumineuse, j'encapsule donc la méthode arcgis utilisée dans une classe de classe ES6, de sorte que l'initialisation de l'appel de la fonction map puisse se faire à travers un nouvel objet à atteindre.
Étapes simples pour charger une page de carte
1.npm install --save esri-loader pour télécharger le package esri
2. Page Carte
<template>
<view >
<view id="myMapView" style=" height: 623px " />
</view>
</template>
<script module="myMapViews" lang="renderjs">
//renderjs部分
import {
loadModules
} from 'esri-loader'
export default {
name: 'myMapView',
data() {
return {};
},
mounted() {
this.createMapView()
},
methods: {
createMapView() {
const options = {
url: 'https://js.arcgis.com/4.14/init.js',
css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
};
loadModules([
"esri/Map",
"esri/views/MapView"
], options).then(([Map, MapView]) => {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "myMapView",
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
})
}
}
}
</script>
<scrip>
// service 层
</scrip>
<style>
</style>
Remarque : j'ai brièvement présenté l'interaction et l'attention entre la couche service et la couche renderjs dans l'article précédent, et vous pouvez simplement vous référer à l' interaction entre renderjs et la couche service
Jetons un coup d'œil à l'interface des fonctions de la carte thématique de mon projet.
La première est la liste des fonctions à gauche, qui réalise les fonctions de mesure vectorielle, de recherche de coordonnées, de positionnement en temps réel et de réinitialisation de la carte.La réalisation de ces fonctions de base est relativement simple. Ce qui est encombrant, c'est la liste des fonctions sur le côté droit.De haut en bas, il existe des fonctions spécifiques telles que le contrôle des couches, la requête des données des couches et l'analyse de l'occupation des terres. Les fonctions logiques sont relativement faciles à mettre en œuvre, mais les appels fréquents aux fonctions de mappage et les interactions fréquentes sont un casse-tête. J'ai donc ajouté de nombreux attributs à l'objet de rendu surveillé par renderjs, correspondant à différents événements de réponse. Lorsque les valeurs des différents attributs changent, cela signifie que la fonction de carte correspondante est déclenchée. Une fois que chaque événement de surveillance de déclencheur est terminé, il est réinitialisé à vide et peut continuer à être déclenché la prochaine fois. La valeur transmise est reçue au niveau de la couche renderjs et la valeur est jugée par la condition if pour déclencher la méthode de carte importée.
contrôle des calques
Requête de point de données de couche, effectuer une requête de données en fonction de la couche ouverte dans le contrôle de couche
Requête de région de données de couche
Outils d'esquisse (annuler, restaurer la zone de dessin) (lorsqu'il y a trois points de dessin ou plus sur la carte, le module de contrôle d'esquisse s'affiche)
Analyse de l'occupation des sols
Pour définir la classe de carte, vous devez utiliser loadModules pour importer le package de méthode arcgis, car certaines méthodes ne peuvent pas être utilisées en raison de l'introduction de l'importation. Après avoir essayé différentes versions d'arcgis, des problèmes subsistent, il est donc recommandé d'utiliser loadModules pour importer
Méthode d'écriture ES6, ajouter la méthode JTMapKit au prototype
Outil d'esquisse lié
Il est recommandé d'utiliser l'outil d'esquisse pour toutes les opérations liées au dessin de la carte, ce qui est beaucoup plus pratique que d'ajouter une couche de dessin par vous-même, et la réponse interactive de la carte est très rapide. La couche sketchviewModel intégrée est utilisée pour stocker des annotations temporaires, qui sont automatiquement supprimées après le dessin.
/* 草图编辑工具--扩展方法 */
Object.assign(JTMapKit.prototype, {
/**
* 启用草图编辑工具
* @param {JSON} options 配置项
* options.onadded{function}:添加点回调
* options.onredo{function}:恢复回调
* options.onundo{function}:撤销回调
* @param {function} callSuccess 成功回调
*/
_sketchToolsInit: function(options, callSuccess) {
/* 自身替换 */
let _self = this;
loadModules([
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/projection",
"esri/geometry/SpatialReference"
]).then(([GraphicsLayer, SketchViewModel, projection, SpatialReference]) => {
/* 判断是否存在草图图层 不存在则创建并加入地图中 */
if (!_self.layerSketch) {
_self.layerSketch = new GraphicsLayer();
_self.map.add(_self.layerSketch);
}
/* 草图辅助图层 */
if (!_self.graphicsLayer) {
_self.graphicsLayer = new GraphicsLayer();
_self.map.layers.add(_self.graphicsLayer);
}
/* 判断草图工具是否存在 不存在则创建 */
if (!_self.sketchViewModel) {
_self.sketchViewModel = new SketchViewModel({
layer: _self.layerSketch,
view: _self.mapView,
pointSymbol: _self.sketchPointSymbol,
polylineSymbol: _self.sketchLineSymbol,
polygonSymbol: _self.sketchPolygonSymbol,
});
/* 绑定创建事件 */
_self.sketchViewModel.on("create", function(event) {
if (event.state == "start") {
_self.layerSketch.removeAll(); //删除全部
}
if (event.toolEventInfo && event.toolEventInfo.type === "vertex-add") {
if (options && options.onadded) options.onadded(event.graphic
.geometry);
}
if (event.state === 'complete') {
if (options && options.oncomplete) options.oncomplete(event.graphic
.geometry);
}
});
/* 绑定redo事件 */
_self.sketchViewModel.on('redo', function(event) {
if (event.graphics && options && options.onredo) options.onredo(event
.graphics[0]
.geometry);
});
/* 绑定undo事件 */
_self.sketchViewModel.on('undo', function(event) {
if (event.graphics && options && options.onundo) options.onundo(event
.graphics[0]
.geometry);
});
// _self.sketchViewModel.create()
/* 回调 */
if (callSuccess) callSuccess();
}
});
},
})