First of all, the reason for choosing arcgis for mapping is that it supports the development of various APIs such as native, JS, Android, and IOS, and has a rich ecological chain. At the same time, it can complete layer and data analysis. This is the most critical reason. less than.
The map interaction in uniapp must be done through renderjs. When the map function is very cumbersome, the renderjs layer will be very large, so I encapsulate the used arcgis method into an ES6 class class, so that the initialization of the map function call can be done through a new one. object to achieve.
Simple steps to load a map page
1.npm install --save esri-loader to download the esri package
2. Map page
<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>
Note: I briefly introduced the interaction and attention between the service layer and the renderjs layer in the previous article, and you can simply refer to the interaction between renderjs and the service layer
Let's take a look at the function interface of my project thematic map.
The first is the function list on the left, which realizes the vector measurement, coordinate query, real-time positioning and reset functions of the map. The realization of these basic functions is relatively simple. What is cumbersome is the function list on the right side. From the top down, there are specific functions such as layer control, layer data query, and land occupation analysis. Logic functions are relatively easy to implement, but frequent calls to map functions and frequent interactions are a headache. So I added many attributes to the render object monitored by renderjs, corresponding to different response events. When the values of different attributes change, it means that the corresponding map function is triggered. After each trigger monitoring event is completed, it is reset to empty, and it can continue to be triggered next time. The passed value is received at the renderjs layer, and the value is judged by the if condition to trigger the imported map method.
layer control
Layer data point query, perform data query according to the layer opened in layer control
Layer Data Region Query
Sketch tools (undo, restore drawing area) (when there are three or more drawing points on the map, the sketch control module will be displayed)
Land Occupation Analysis
To define the map class, you need to use loadModules to import the arcgis method package, because some methods cannot be used because of the import introduction. After trying different versions of arcgis, there are still problems, so it is recommended to use loadModules to import
ES6 writing method, add JTMapKit method to the prototype
Sketch tool related
It is recommended to use the sketch tool for all operations related to map drawing, which is much more convenient than adding a drawing layer by yourself, and the interactive response of the map is very fast. The built-in sketchviewModel layer is used to store temporary annotations, which are automatically deleted after drawing.
/* 草图编辑工具--扩展方法 */
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();
}
});
},
})