效果
FeatureLayer和GeoJSONLayer, 一个矢量点同时渲染图形和文本
代码
相关参数自行查阅文档, 这里就不做注释了
示例代码手动创建FeatureLayer方式, 如果是通过远程url加载图层的 渲染方式同理, GeoJSONLayer同理
<!DOCTYPE html>
<html lang="zn"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;}#mapview {position: absolute;width: 100%;height: 100%;}* {margin: 0;padding: 0;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.23/"></script></head><body><div id="mapview"></div><script>javascript">require(['esri/Map','esri/views/MapView','esri/layers/FeatureLayer','esri/Graphic'], function (Map, MapView, FeatureLayer, Graphic) {// 初始化底图window.map = new Map({basemap: 'dark-gray-vector'})// 创建2维视图let view = new MapView({container: 'mapview',map: map,zoom: 11,center: [104.783916597735, 32.55699155692144] // 设置地图的初始化中心点坐标})// 生成100个随机点var points = generateRandomPointsInPolygon([[[104.64487088240317, 32.66500681729125],[104.91060269392625, 32.6635616904849],[104.88210690535206, 32.54642886312837],[104.68812954939528, 32.54787588095771]]],100)// 创建feature点位const features = points.map((point, index) => ({geometry: {type: 'point',x: point[0],y: point[1]},attributes: {ObjectID: Math.random(),name: `点${index + 1}`}}))if (!features.length) {return}console.log(features)const featureLayer = new FeatureLayer({source: features,title: '生态因子点位图层',objectIdField: 'ObjectID', // 重要, 必须fields: [{ name: 'name', type: 'string' }],outFields: ['*'],popupTemplate: {title: '{name}'},// 渲染成简单圆点renderer: {type: 'simple',symbol: {type: 'simple-marker',color: 'red',size: '10px',outline: {width: 1,color: '#fff'}}},// 渲染额外的文本图形labelingInfo: [{symbol: {type: 'text',color: '#fff',// haloSize: 1,// haloColor: '#fff',backgroundColor: 'rgba(27,140,155,0.7)',// xoffset: -22,yoffset: 15,horizontalAlignment: 'center',font: { family: 'sans-serif', size: 8 }},labelPlacement: 'center-center',labelExpressionInfo: { expression: '$feature.name' }}]})map.add(featureLayer)// 添加点击view.on('click', event => {const { longitude, latitude } = event.mapPoint// console.log('>>> 点击的坐标: ')console.log(`${longitude}, ${latitude}`)})// 生成随机点function generateRandomPointsInPolygon(polygonCoords, number) {// 判断是否在图形内function isPointInsidePolygon(point, polygonCoords) {let crossings = 0for (let i = 0, j = polygonCoords[0].length - 1; i < polygonCoords[0].length; j = i++) {const xi = polygonCoords[0][i][0]const yi = polygonCoords[0][i][1]const xj = polygonCoords[0][j][0]const yj = polygonCoords[0][j][1]if (((yi <= point[1] && point[1] < yj) || (yj <= point[1] && point[1] < yi)) &&point[0] < ((xj - xi) * (point[1] - yi)) / (yj - yi) + xi) {crossings++}}return crossings % 2 !== 0}// 存储生成的随机点let randomPoints = []// 获取多边形的最小和最大经纬度范围let minLat = polygonCoords[0][0][1]let maxLat = polygonCoords[0][0][1]let minLng = polygonCoords[0][0][0]let maxLng = polygonCoords[0][0][0]for (let i = 0; i < polygonCoords[0].length; i++) {const lat = polygonCoords[0][i][1]const lng = polygonCoords[0][i][0]if (lat < minLat) {minLat = lat}if (lat > maxLat) {maxLat = lat}if (lng < minLng) {minLng = lng}if (lng > maxLng) {maxLng = lng}}for (let i = 0; i < number; i++) {let isPointInside = falselet randomPoint// 不断尝试生成随机点，直到点在多边形内while (!isPointInside) {// 在多边形的经纬度范围内随机生成一个点const randomLat = minLat + (maxLat - minLat) * Math.random()const randomLng = minLng + (maxLng - minLng) * Math.random()randomPoint = [randomLng, randomLat]// 使用射线法判断点是否在多边形内isPointInside = isPointInsidePolygon(randomPoint, polygonCoords)}randomPoints.push(randomPoint)}return randomPoints}})</script></body>
</html>![[极客时间]AIGC产品经理训练营毕业总结](/images/no-images.jpg)
